Blog

Aceik adds Chief Operating Officer and Creative Director to staff

Wayne Vickers
COO & Creative Director, Aceik

Aceik is excited to announce the recent appointment of Wayne Vickers, former Head of Customer Experience for the Australian Football League (AFL) as Chief Operating Officer and Creative Director.

The new hire demonstrates Aceik’s continued commitment to its Sitecore clients, as well as the Sitecore partnership. The Aceik team is already in a strong partnership with both the Chief Executive Officer, Jason Horne and Chief Technology Officer, Thomas Tyack holding Sitecore MVP recognition over multiple years.

The appointment highlights Aceik’s desire to introduce more and more brands to the power of Sitecore, to enable them to drive personalised experiences and positive marketing ROI.

Vickers has more than 20 years digital experience, having worked client side for AFL, Myer, Quiksilver in Customer Experience and eCommerce roles, as well as founding two digital agencies that included brands such as Seek and Fosters.

“I’m thrilled to join Aceik. The agency has always shown outstanding technical Sitecore prowess, and I’m excited to take our Sitecore marketing and creative expertise to the next level, so we continue to help new and existing customers to grow their digital businesses through the use of Sitecore’s best-in-class marketing features,” said Vickers.

Jason Horne, Chief Executive Officer at Aceik said, “Aceik’s Sitecore knowledge is vast and our agility is unmatched. We keep up with evolving technology and can change direction more easily than larger companies, giving our clients the most innovative Sitecore solutions to their business problems.

Horne continued, “Helping our clients to realise the full potential of Sitecore’s experience platform is at the centre of everything we do. With Wayne’s digital experience expertise, we’re looking forward to creating stronger long term relationships with our clients and Sitecore”.

Aceik named a 2020 Sitecore Experience Award Honorable Mention in Most Sophisticated Implementation category for work with RAA

Aceik today announced it has been named a Sitecore Experience Award (SEA) Honorable Mention in the Most Sophisticated Implementation category for its work with customer RAA. The agency was recognised for RAA’s improved website performance, increased automation, making site services more efficient and providing customers and visitors with a better experience.

“We now have a great foundation for our primary digital channel, a more capable team and a business that has confidence in our delivery thanks to our partnership with Aceik,” said Matt Mitchell, Senior Manager, Digital Technology Services, RAA.

The Sitecore Experience Awards 2020 recognize brands that have built truly customer-centric digital experiences with Sitecore® technology. The SEAs are awarded to Sitecore customers and their partners whose entries clearly demonstrate that their Sitecore solution delivers an outstanding experience for all users from partner developers and internal customer marketers to business and IT users and end-user customers.

“We are honored to have worked closely with the RAA team to deliver this next step in the business’ digital strategy: a customer-centric website that not only meets the needs of their customers, but is now also recognized by Sitecore,” said Jason Horne, Chief Executive Officer, Aceik.

“Showcasing the complex capabilities and scalability that Sitecore enables for organisations and brands, we’re proud to recognise some of the most sophisticated implementations we’ve seen from customers and partners at the 2020 Sitecore Experience Awards,” said Paige O’Neill, CMO, Sitecore. “Helping organizations make data-informed marketing decisions, utilize content more effectively across channels and regions, and deliver more personalised experiences is at the heart Sitecore’s integrated platform. We have seen exceptional customer work this year, unlocking new levels of audience engagement and shortened time-to-market for content creation to provide superior digital experiences that drive ROI and deliver business value.”

SEA 2020 Honorable Mentions were selected as they demonstrated to the judges that they used Sitecore solutions to make notable impact in terms of experience or content management.

Through the rigorous selection process, each entry was judged by a panel of Sitecore leadership from that entry’s region. There are five regions that evaluated and approved all regional selections based on specific selection and scoring criteria.

Q&A with Sitecore Strategy MVPs

Last week, our fearless leader, Aceik’s CEO, Jason Horne joined a stellar panel, Sitecore Strategy MVP Q&A! as part of the Australian Sitecore Marketers Group.

Australians love an open dialogue, and Australian Sitecore marketers are no exception. This panel was the chance to ask a Sitecore MVP questions about personalisation, testing or marketing automation!

For this event, group organisers wanted to do something completely different – and taking a page from the popular ABC show Q&A assembled a stellar panel of Sitecore MVPs including:

Marty Drill – Moderator, CEO Luminary

Marty founded Luminary in 1999. One of the pioneers in digital, Luminary is a Sitecore Gold Partner that focuses on crafting experiences that are intuitive and engaging. A digital agency that has worked with hundreds of companies on countless projects across just about every industry there is. Luminary remains one of the oldest independent digital agencies in Australia.

Alison Sainsbury – Panelist, Director of Sitecore’s Business Value & Strategy Asia Pacific Japan

Alison leads the regional Sitecore SBOS (Sitecore Business Optimisation Strategies) team. She’s a global expert on optimisation in Sitecore, and has worked with customers such as Toyota, ExxonMobil, Blackmores and Brother to help them create and deliver optimisation strategies on Sitecore. Alison is also the author of numerous Sitecore guides and whitepapers, including UX4CX and the recently released Multisite Optimisation whitepaper, and works closely with the MVP community globally.

Greg Baxter – Panelist, Experience Director Codehouse

Greg was a founding member of Sitecore APJ, and spent 8 years working with Sitecore partners and customers with personalisation and optimisation . Greg has worked all over the globe with customers including The Australian Dept of Defence, Billabong, Church & Dwight, Huawei, Network 10, Stockland and Roche Pharmaceuticals. Greg is a three time Sitecore Strategy MVP.

Robyn Johnstone – Panelist, Digital Marketing Manager Minter Ellison

Robyn Johnstone is the Digital Marketing Manager at law firm MinterEllison. She is relentless in her aim to deliver outstanding digital experience in a traditional business with no shortage of content. She and her small team, work to optimise content though the use of profile building, personalisation and targeting. Robyn is a Sitecore Strategy MVP.

Jason Horne – Panelist, CEO Aceik

Jason is an expert in Sitecore solutions, and has delivered numerous large Sitecore projects, including RAA, Village Roadshow and UniSuper among many others. Jason is a technical leader who enjoys bridging the gap between technical and non-technical professionals to deliver innovative enterprise solutions built on Sitecore. Jason is a five time Sitecore Technical MVP.

Brady Clarke – Panelist, Technical Content Manager R/GA

Brady is the glue that ties Sitecore to content optimisation. He has broad front and back end technical skills combined with the marketing knowledge to drive digital campaigns, landing page optimisation and marketing automation. Brady has worked with customers like Toyota, Crikey and Smart Company. Brady is a Sitecore Strategy MVP.

Let’s get into the Q&A

With the format free form, expect the questions and answers to be varied.

Why do Google Analytics and Sitecore Analytics give different results?

Alison: Google Analytics is a JAVA script based client side tracking and Sitecore Analytics is ASP based service side tracking. Technically, they’re tracking slightly different things.

Google is also better at screening out bots and providing actual visitor numbers.

But you do need both. Sitecore Analytics will usually be a little higher but should only be 10% higher if more than that then you might be tracking some weird things (ie firing multiple times on a page). It’s good to compare the two sets of results as part of a marketing readiness scan.

What’s the most exciting thing about Sitecore 10 for marketers?

Greg: Where to start? Additional filters around analytics, and segmenting more tightly around profiles. Now able to manipulate actionable analytics which means campaign creation is much easier.

Can also more easily tell what goals have been converted by people in that campaign and what location they were in. Split filter by that dimension.

Also, Salesforce connector and updates to horizon.

Additional templates in EXM.

When I do profiles should I be using my existing personas?

Greg: Profile on higher level things at least initially. Profile around things like what kind of cheese you like, connoisseur lifecycle rather than Minnie or Mickey Mouse.

For personalisation – start simply by understanding what people want, where they are in the lifecycle and is there an opportunity to cross sell and upsell.

Robyn: I agree, keep it as simple as possible. You usually have a lot of content and building it out for all the areas is overwhelming. Ask yourself, are they interested in X or Y industry then personalise.  Then dig deeper for more sophistication.

How do we go about setting up taxonomies?

Greg: Plan for scalability. Taxonomies are really easy to set up technically. The biggest issue is thinking into the future. Roll them into campaign groups and around goals but take the time to sit back and think about possible campaign combinations that you may have.

Map out the taxonomies and consider what the ramifications might be on future marketing endeavours. Work out whether you wish to be super specific or general.

Another potential difficulty, if you’re building these out agency side can be getting client buy in for setting these up in a specific way. Be ready to justify the plan.

Robyn: Going campaign by campaign was most useful for my team. Sometimes campaigns are easier than the whole site as it is taking bite sized bits but obviously the con is not having a whole-site view.

Alison: Set up campaign groups, campaign facets, asset facets, goal facets. You need to have a campaign group and a channel. The rest around facets is optional. Also consider that you may wish to add your own new custom channels.

Can you each share some best practice examples of campaigns you have seen?

Brady: Toyota Corolla Hatch launch campaign – simple implementation, hectic turnaround (6 weeks). Personalisation with campaign tags based on 4 different channels including email for 5 different segments and incredible uplift compared to control groups. Display ads are usually a low conversion rate, but on this campaign we saw a 600% uptick for category leadership and 500% for owners.

Greg: Back in the day, it was a small regional bank, 2 week campaign and they wanted more likes than the Big 4 Banks and wanted visitors to switch to their home loan offering. They created an online game on a personalised website. The difference between the personalised campaign and the same campaign a year prior that wasn’t personalised was a 60% increase in direct sales.

Another favourite of mine is Auckland Airport with the goal of driving people to retail pages. Most retail sales at an airport are terminal spend. The set up campaign personalisation around products and drove 400% increase to terminal pages and people pre-ordering product when knew they had to travel.

Robyn: We now show other content because we know someone is interested in a particular topic. We sometimes have marketers in other areas ask why a PDF has been downloaded in a particular campaign – and it’s usually because of these triggers.

Jason: Village Theme Parks – some multi-site personalisation and campaigns, fed into whitepaper.

Any bad rollouts – what else should we not do?

Jason: Make personalisation part of the plan from the start. Start thinking about how to use personalisation and Sitecore marketing features in the discovery and design phases. Start with the end in mind. And go live utilising some personalisation immediately. Don’t make personalisation Phase 2 because you want to show tangible value immediately.

If you leave personalisation til Phase 2 there may be delays, budgets are cut back and then you aren’t demonstrating immediate gains. You need to show that you’re a profit centre and not a cost centre.

Robyn: Wish we had done that too.

Greg: Once saw a campaign with autotranslated content from English to Japanese. The system called ‘dolphins’ ‘sea monsters’ – so the tagline was basically ‘Come to SeaWorld and feed the Sea Monster’. Cultural sensitivity lacking.

Alison: Read and learn. How personalisation planning will impact the UX. Go live with a site that’s ready for personalisation.

#1 identify your goals and implement while site is being built. You can change the values later! Just pop them in.

#2 QA/UAT Testing – does it work. Create a campaign tag, give it to a few people, hit the link, go into analytics and check it worked, is analytics happening at all, do a TEST DRIVE! Have seen assumptions about analytics working and then it’s not once the site goes live. Sitecore is a Ferrari but looked around rather than given a test drive. Take the test drive!

Jason: If you’re going out to tender, always include that out-of-the-box features should work, test for that and make sure they are working. That’s also down to the implementation. Sitecore allows a lot of rope, which is great, but without a plan some people can hang themselves with it. If personalisation is not included in phase 1, it may not be set up correctly and then phase 2 becomes remediation (which is a drag).

Greg: Personalise around your highest value profiles and campaign. Look at the hero image and launch with hero image personalisation. It doesn’t add a huge amount to launch cost/to Phase 1. And then you know from Day 1 that personalisation does work. If your budget gets squeezed – don’t let personalisation walk out the door.

Jason: To enable these features is not costly because it’s built into the partner proposal. You just need to ensure it’s built into the RFP.

How do you account for lifestyle – future personalisations to this change? Ie home loan > insurance

Brady: Consider what is the length of the funnel for your industry? Toyota is a 2-3 month funnel length. You’re a Hilux person and probably want a ute. The funnel doesn’t work in 3 months time because you’ve probably already purchased.

How long do people spend on deciding and researching home loans? If you have a goal for a purchase then do not show that personalised pre-purchase content to people who have triggered that goal.

Greg: Create a goal ladder for the customer journey. If the visitor has bought home insurance then show car insurance, and inside, if they’ve bought both then showcase Frisbee insurance.

Sitecore Commerce has a bunch of goals in there around the shopping cart. If you’re looking at a purchase form for insurance, then absolutely track it. Figure out where visitors drop out on the form and take a look at the form to determine why they’re dropping out. Inject an A/B test into a form. And personalise someone who hasn’t completed the process (ie 50% of the form to go, 1 step left).

Is it possible to globally manage a rule that appears on multiple pages?

Jason: Yes. That’s what you should do so you don’t have a bunch of custom rules dotted throughout your components. Set up one rule and reuse them. Best way not to get lost.

Alison: One rule to rule them all.

Conclusion

Marty Drill wrapped up the session perfectly with “we’re no longer in the same boat. But we are in the same storm and people are being impacted in different ways and make a difference by reaching out to someone.”

Resources from the Sitecore team:

Website Accessibility Tricks & Tips

Article Pre-Evaluation:

Estimated read-time: 14 Minutes

Level of reading competence and understanding: Semi-Technical

Author: Gavin McQuienn, Lead Front-End Engineer, Aceik


What we cover in this article:


What is Website Accessibility?

Website accessibility is the inclusive practice of structuring a website to ensure that the maximum number of people can access/navigate and obtain information within websites on the World Wide Web, in particular for those with physical disabilities & situational disabilities, such as socio-economic restrictions on bandwidth and speed.

In technical-speak, it is the practice of implementing/leveraging the proper usage functionally-descriptive HTML tags, best practices-practice HTML structures, CSS, images and media, such as video and audio.

Accessibility Users – Web Statistics & Debunking the Myths 

In the past, there has often been a mindset that users utilising disability related accessibility website features were the minority. Well here are a few things that most do not consider when casting thought upon this subject.

Accessibility – not only benefits people with disabilities 

Business Cases for Accessibility Improvements

  • Legal & General Group – doubled visitor numbers, cut maintenance costs by two thirds and increased natural search traffic by 50%. 
  • Tesco – £35 thousand GBP to build their accessible website, £13 million GBP per year in resultant revenue. 
  • CNET – 30% increase in traffic from Google after CNET started providing transcripts, “We saw a significant increase in SEO referrals when we launched an HTML version of our site, the major component of which was our transcripts.” – Justin Eckhouse, CNET, 2009.
  • This American Life is a broadcast heard on more than 500 National Public Radio (NPR) stations by about 2.1 million listeners each week in the United States. In 2011, the broadcaster committed to creating transcripts for their entire archive of recorded programs and recorded. This subsequently resulted in:
    • search traffic increased 6.86%,
    • better comprehension for visitors who use English as a second language,
    • visitors were able to use transcripts in noisy or sound-sensitive environments,
    • ability to more easily translate, and
    • ability to search text to reference a specific section of audio.
  • “Many organisations are waking up to the fact that embracing accessibility leads to multiple benefits – reducing legal risks, strengthening brand presence, improving customer experience and colleague productivity.” – Paul Smyth, Head of Digital Accessibility, Barclays

Accessibility Internet Traffic Statistics 

In the USA ~ according to the Census Bureau on July 25, 2012:

  • 54% of adults living with a disability go online.
  • 56.7 million Americans (18.7% of the population), that is a figure of 19.9 million (roughly 8.2%) have proven to have difficulty lifting or grasping objects, which could impair their ability to use a mouse or keyboard.
  • 8.1 million (3.3%) suffer from vision impairment. Such demographics commonly use tools such as a screen magnifier, screen readers, or might have a form of color blindness, to which colour contrasts become ever so important.
  • 7.6 million (3.1%) have been proven to have a hearing impairment – given such disabilities would rely heavily on transcripts and/or captions for audio/video media.
  • Sight and hearing impairments cover an average of 6.8 percent of the population aged 15 years +. These figures jump to a whopping 21.3 percent of the population when you look specifically at the ageing population, people aged 65+.
  • The Baby Boomer generation (born between 1945 and 1964) is going to cross that 65-year barrier in 2010. This same web-savvy generation created the Internet, for the most part and represents one of the largest single demographics in the United States.

What can you do to increase your website’s accessibility?

Implementing accessibility features has been proven to not only increase the overall user experience and usability of a website, which will ultimately translate into higher traffic and increased SEO impact / reach, but will ensure modern best-practice standards are adhered to, which ultimately instills a higher level of code and content quality throughout a site. 

There are many things that you can start doing today, but to successfully administer a high level of accessibility is generally a 3-pronged approach:

  1. Design considerations
    1. Ensuring that even at the initial design phase that colour-contrasts, disability user-journey/navigation & audio/video media content alternatives are considered
  2. Content editors preparation, structures, awareness and consideration 
    1. Preparing audio/video media and written content for multiple demographics, such as transcripted media, listing average article read-time estimations, competency reading level grading & text alternatives for media including images, video and audio
  3. Adopting technical development hygiene / strategies 
    1. Making use of the correct usage and structured HTML, such as tab-indexed links/navigation items, hidden content for screen-readers, and especially accessibility related HTML tags & CSS, such as Aria labels, CSS user-interaction related Pseudo classes. 

Accessibility – Technical Standards, approaches, best practices & things to consider.

We have separated some well-known strategies into categories of implementation-difficulty and ultimately, development/preparation related costs/efforts ~ it must be noted that some of these tactics can be implemented to existing codebases in a, ‘moving forward’ mentality / approach, which will still slowly start to increase your accessibility support.

This may include, but is not limited to such items as:

Low Cost / Effort / Preliminary planning required
Implementing correct usage of functionally user-interactive CSS Pseudo-Classes such Focus, Active, Visited, Hover, etc

.btn {
  &:hover,
  &:focus,
  &.focus {
    color: $purple5;
    background-color: darken($yellow1, 10%);
  }
}
  • Meaningfully named, underlined/colored (or otherwise differentiated) Anchor links
  • Textual equivalents provided for images
  • Providing meaningful `alt` & `title` tags for all imagery
<img src="" alt="ENTER IMAGE DESCRIPTION - Helpful with SEO" title="This is an image of a Ragdoll cat jumping">

`Tab-indexed` user journey-tested Anchor Links and Buttons, as well as `title` tags explaining functionality 

<a class="btn btn-secondary" href="#" tabindex="0" title="Click here to see cats from category 1">
Pictures of category 1 cats
</a>
<a class="btn btn-secondary" href="#"  tabindex="1" title="Click here to see cats from category 2">
Pictures of category 2 cats
</a>
<a class="btn btn-secondary" href="#"  tabindex="2" title="Click here to see cats from category 3">
Pictures of category 3 cats
</a>

Medium Cost / Effort / Preliminary planning required

  • Text and images are large and/or enlargeable
  • Mobile optimised imagery, media & mobile-specific layouts 
  • Textual equivalents provided for images 
  • Text and images are large and/or enlargeable

High Cost / Effort / Preliminary planning required

  • Keyboard supported Menu-Navigations
  • Magnifying text/imagery options for content
  • Alternate methods of obtaining information regarding visual/audio media, such as  closed captioned and/or a sign language versions
  • Captha’s that have multiple options to human validity, such as Audio options regarding successful passphrases, or modern captchas do not require input from a user


  • Print-friendly web pages – making sure that your pages are accessible and usable even when printed or saved as a PDF file

Aria Label HTML Tags & Screen Reader Specific CSS Classes 

What are Aria Labels HTML related Tags?

ARIA stands for Accessible Rich Internet Applications and is a set of attributes that define/provide alternatives to make web applications / content (in particular those written using Javascript) more accessible to people with disabilities.

Aria Labels extend HTML and pass information to assistive technologies related to interactions and widgets commonly used in applications, which provide the user with additional information that would not otherwise be accessible. For example, ARIA enables accessible navigation landmarks in HTML4, form hints and error messages, live content updates, JavaScript related widgets and many more. 

Luckily HTML5  provides a lot more descriptive HTML tags, which are designed to provide additional information to the end user regarding the type of element they are viewing, while enabling more descriptive code which enables developers to more easily decipher new code block/snippets, which in turn increases productivity and the efficiency one can alter existing components. 

Here’s the markup for a progress bar widget: ~ snippet taken from Developer.Moziila

<div id="percent-loaded" role="progressbar" aria-valuenow="75"
    aria-valuemin="0" aria-valuemax="100">
</div>

Here we have a progress bar and it is built using a `<div>`, which actually gives the user no meaning. Currently HTML5 has new inbuilt tags that allow you to break up your elements with more meaning, but unfortunately, a lot of the time there isn’t a more semantic tag available for developers to use HTML4 or 5, so we need to include ARIA roles and properties. 

In this example, we are adding specified attributes to the element such as the `role=”progressbar”` attribute, which notifies the browser that this element is a Javascript driven progress bar widget. The `aria-valuemin` and `aria-valuemax` attributes specify the minimum and maximum values of the element, and the `aria-valuenow` expresses the current state of the progress but, so this must be kept in sync with the JavaScript.

Screen Reader Specific CSS Classes

There are occasional instances where content should be made available to screen reader users, but hidden from sighted users. In the vast majority cases, content that is available visually should be available to screen reader users, and vice versa. Cases where verbose cues or instructions are provided only for screen reader users are most likely a reflection of poor design, usability, and accessibility. However, there are a few cases where information or meaning is apparent visually, but may not be apparent to screen reader users. In these rare cases, it may be appropriate to cause content to be read by a screen reader, but remain invisible to sighted users.

Techniques for hiding content 

There are several mechanisms that can be used for hiding content. It’s important that a technique be implemented that results in the desired outcome and accessibility.

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

Here is a few approaches of embedding additional information for the user to utilise

  • `display:none` or `visibility: hidden`
display:none;
// or
visibility: hidden;
  • hidden attribute
<p hidden></p>
  • `width:0px`, `height:0px` or other 0 pixel sizing technique
width: 0px;
height: 0px;
  • `text-indent: -10000px;`
text-indent: -10000px;
  • Absolutely positioning content off-screen
.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
  • The `.sr-only` CSS class, which stands for  “screen reader only”, is just an abrtiory name and can be called anything you wish, but whatever you name this should then be referenced from within the tag of the element being hidden, as shown:
<div class="sr-only">This text is hidden.</div>

For more information regarding these techniques, please visit WebAim.org

Resources for Online Accessibility Audits

The following is a list of websites and web tools that are built to help you plan, design and also evaluate any accessibility flaws that may have been overlooked in the development of your current site. 

Most of these tools are free (at an entry-level anyway) and if nothing else can evaluate and provide feedback into any website that is currently live on the internet and include tools that can help evaluate colour contrasts, HTML structures / markup that could be improved to ensure small, and sometimes large wins in regards to increasing accessibility compliance.

There are many tools and services available at www.w3.org/WAI/ER/tools, but a lot are actually links to businesses trying to entice you to let them assess & implement your accessibility upgrade, so finding the hidden-gems that are free can be a little painstaking. So here is shortlist we recommend:

Accessibility Evaluation / Compliance tools & helpers: 

Best Practice Examples of Accessible Websites

Here, in no particular order are some examples of websites that meet a high accessibility standard and still look modern, fun and/or are highly functional: 

Based on what you’ve just read above, take a look at these websites and let us know what accessibility features you can find. Post a comment below or reply back to info@aceik.com.au

Technical Legalities around Accessibility

More and more cases are starting to surface regarding end-users suing companies for negligence in regards to not adhering to Accessibility compliance, which means your organisation’s website could be at risk without you realising it. The reality here is, you are not alone.  

Here are some related statistics regarding Accessibility Laws and also some examples of what has happened in the past when an end-user of these websites decides to take these companies to court, in regards to failure to comply with these laws and the needs of individuals with disabilities.

Some surprising statistics regarding Accessibility Law

  • In the UK alone, on average 70% of websites are not compliant with accessibility laws. Globally, around 10% of the world’s population (650 million people) live with a disability. As life expectancy increases, this number is also expected to grow.
  • 92% of the most popular federal websites fail to meet basic standards for accessibility, says a study from the Information Technology and Innovation Foundation

Accessibility related Legal Case Studies in the US

  • In January 2019, Beyoncé Knowles’ company, Parkwood Entertainment, became the defendant in a class-action lawsuit alleging that it violated the Americans with Disabilities Act (ADA). The suit, filed by a blind woman from New York, claimed that the company’s website, Beyonce.com, did not provide accommodation for people with significant vision impairments, leaving an estimated 2 million blind people and others with vision impairments unable to access the primary portal for news about all things Bey.
  • A blind man filed a lawsuit against Domino’s in September 2016 and claimed that he was unable to order customized pizza or take advantage of online-only discounts because both the website and mobile app wouldn’t work with his screen reading software. Neither the website or app met basic Web Content Accessibility Guidelines (WCAG) and a judge ruled in favor of Guillermo Robles, the man who filed the lawsuit.
  • A class action lawsuit was filed in January 2018 against Burger King by a visually-impaired woman. The individuals involved were using screen reading software to understand and interact with the website. Because there were no alt-tags or other features in place, the individuals reached significant barriers in accessing basic information on the website.

Accessibility related Legal Case Studies in Australia

  • Coles.com.au – Closer to home, a case originated in early November 2014 where coles.com.au was sued by disability-user who claimed that she was being discriminated against in regards to being able to access the website ~ Please follow these related article links: Coles lawsuit Article 1, Coles lawsuit Article 2
  • 2000 Sydney Olympics – On the 7th June 1999, The Maguire Law Firm made a complaint to the Human Rights & Equal Opportunity Commission (HREOC), alleging that the Sydney Organising Committee for the Olympic Games (SOCOG) had discriminated against him as a disbled person, in contravention of the Disability Discrimination Act 1992 in three aspects: 
    • The failure to provide braille copies of the information required to order Olympic Games tickets
    • The failure to provide braille copies of the Olympic Games souvenir programme, and
    • The failure to provide a website which was accessible to Maguire

After the completion of the ticket book case (Maguire v SOCOG 1999 ) on 30 September 1999, conciliation on the remaining matters was attempted but by 29 November 1999, the talks failed. ~ This information taken from Wikipedia

Aceik – Current Accessibility Examples 

We thought it best to highlight a couple of examples from our current clientele that highlight some great development-integration accessibility pieces that we have had the honour of implementing of late:

  • The City of Yarra Council – https://www.yarracity.vic.gov.au/
    • Including features such as a fully keyboard function navigation, the ability to increase website text-sizes, print-friendly page options have been included, multi-language selection abilities, clearly highlighted link focus states and whole range other accessible consideration can be found throughout this website.
  • Chisholm Institute of Tafehttps://www.chisholm.edu.au/
    • Once again the navigation here is completely keyboard accessible, link focus and hover-states are clearly highlighted, colour contrasts have been carefully  considered, images are clearly labelled and media accessibility has also been considered, this allowing users multiple methods to access non-written media.

Personal notes from the author

In closing, personally I have researched this topic for years, and to my knowledge no one document or article pulls together all related facets (and so extensively) on this subject matter as I have attempted to do here, hence why I have made this quite a lengthy piece. 

It really is a massive topic to cover and there are so many angles one needs to consider to gain a holistic understanding that will empower/compel business-owners and stakeholders to justify the additional effort, cost and benefits associated with implementing extensive and well planned Web-Accessibility, so I hope this helps to empower not only business owners, but also educates and increases the level of Website Development standards, industry wide.

Article Resources

Sitecore Commerce 10 Development Environment with Docker

Sitecore Commerce 10 was released with official support for use of containers for development and production. There are different topologies that are available for development xc0, xc1 and xc1-cxa. But unfortunately the only images that have a working SXA storefront are xc1-cxa.

This article describes how to customize the xc0 docker compose file to be able to spin up a development environment with a fully functioning SXA storefront.

Customized version of xc0 docker compose file is available on my github.

Update SQL & SOLR Image Reference to XC1

  • Use xc1 image for SQL so the databases have all the items for SXA, SXA Steorefront and SPE.
  • Use xc1 image for SOLR to it includes the cores for SXA indexes.

Add Processing Instance and Customize

  • Copy the prc role from xc1-cxa docker compose file
  • Update the xConnect-Collection connection string to http://xconnect

Add Reporting Instance

  • Copy and add the rep role from xc1-cxa docker compose file

Update Content Management Instance and Customize

  • Copy and replace cm role from xc1-cxa docker compose file
  • Update all the xconnect and xdb connection strings to http://xconnect (as per the above screenshot).

JSS and OKTA: Blog 2 – Login via embedded OKTA Form (August RELEASE)

This blog post is based on the OKTA samples @ https://developer.okta.com/quickstart-fragments/angular/default-example/ and the OKTA sign in widget that can be integrated into the page.

The branch mentioned above contains a working example that I will now run through in the rest of this blog. Once up and running your should get a login embedded into our JSS application that allows us to login via OKTA.


Overview

Firstly lets have a quick run through of the changes we made to the first blog in order to integrate the widget.

  1. OKTA configuration settings
    • These are stored in a settings file in the root of the JSS application: jss-okta-config.json
    • All settings to do with our OKTA instance can be added in here.
  2. Create the placeholder component to contain the widget
    • In JSS we scaffold up a new component
    • src\app\components\okta-sign-in\okta-sign-in.component.ts
    • Have a look at https://github.com/TomTyack/jssokta/blob/feature/okta-sign-in-widget/JSS/src/app/components/okta-sign-in/okta-sign-in.component.ts
      1. ngOnInit()
        1. Note how the code dynamically imports the OKTA sign in widget.
        • import('@okta/okta-signin-widget')
        • This is necessary as the library contains a reference to window. Which will break our Server Side code if imported normaly.
        • So in order to workaround this flaw we dynamically import the library only after verifying that this code is running client side.
      2. detectTranslationLoading()
        • Wait for the dictionary service to be loaded so that we can inject the Dictionary into the form.
      3. bootupSignin()
        • Initialise the OKTA widget configuration, inject labels and URLS
      4. injectWidgetPhase()
        • Render the widget
    • This contains the widget code and the has a matching from end HTML template in Angular.
      • The HTML file contains the following important tag
      •  <div id=”okta-signin-container”></div>
  3. Add the component to the /login route
  4. Adjust the navigation to include a new button for the widget
  5. Dictionary additions

Demo Video

To show you a video of this JSS example in action take a quick gander at the following video:


Demo Installation

  1. Clone the Repository
  2. Deploy the application. Follow the same instructions from the first blog. <<< UPDATE LINK
  3. Run the application. Follow the same instructions from the first blog. <<< UPDATE LINK
  1. Click on the “Login Embedded” link in the navigation
  2. Login to OKTA (if not already) using the details you registered with.
  3. You should arrive back on the profile page
  4. undefined
  5. Success!! hopefully 🙂
  6. Inside the OKTA Dashboard is a handy log that shows all login activity. This is a great way to see what is going on. Screenshot shown at the bottom.
    • undefined

Summary

That concludes the run through of how to integrate the OKTA Angular SDK and Embedded Widget into Sitecore JSS. OKTA is a leader in user authentication management and having the ability to integrate into our JSS applications is an exciting prospect. I hope this example is of use to you and your teams if your considering the same technology mix.


JSS and OKTA: Blog 1 – Login via External OKTA Form

This blog post is based on the OKTA samples @ https://developer.okta.com/quickstart-fragments/angular/default-example/

The OKTA samples makes use of the OKTA Angular SDK and allows you to set up a development OKTA cloud instance for testing the code.

For this blog I have integrated the OKTA example into the Angular JSS starter repository to for a new repository to accompany this blog. https://github.com/TomTyack/jssokta

This repository contains a working example that I will now run through in the rest of this blog. All you need to do is sign up for your own developer sandbox (OKTA) instance using a dummy user and test it out.


Overview

Firstly lets have a quick run through of the changes we made to the original examples in order to integrate them with the angular JSS application.

  1. OKTA configuration settings
  2. Provide the Login and Logout Buttons
  3. Create the Callback Handler
    • The callback handles integration in JSS takes place inside: src\app\routing\routing.module.ts
    • JSS Example: https://github.com/TomTyack/jssokta/blob/master/JSS/src/app/routing/routing.module.ts
    • In this case I made the route: /implicitcallback
    • Importantly the route must be added at the top of the list so that JSS routing doesn’t hijack the route before our OKTA module gets a chance. I spent a little while scratching my head over this one when I originally added it the bottom of the route config.
  4. Update your NgModule
    • This requires a little bit of adjustment from the original example.
    • Module integration is done via: src\app\app.module.ts
  5. Use the Access Token

Demo Video

To show you a video of this JSS example in action take a quick gander at the following video:

Note: In the video I started off the demo by running in Disconnected mode with localhost. Surprisingly this worked and it redirected back to the connected app domain. In reality a better test would have been to start on the same domain in integrated mode. I’m not sure that you could run this test end to end in disconnected.

Demo Installation

  1. Clone the Repository
  2. Sign up for an OKTA developer account
    • https://developer.okta.com/signup/
    • When it asks you what sort of application you want just click “Do this later”.
    • Confirm your email address and fill out the security questions and change your temporary password.
  3. In the top navigation withing the OKTA Dashboard
  4. Back in the JSS OKTA Repository (open it in VS Code or your editor of choice)
    • From the command line run: npm install
    • Open the file: jss-okta-config.json (in the root of the JSS Application)
      • issuer: Swtich out “INSERT-OKTA-ID” with the relevant ID from the same domain your viewing the OKTA portal in.
      • redirectUri: Replace ‘jssokta’ with ‘jss.okta.portal’ or whichever domain you set.
      • clientId: Found on the application > General tab. About 20 characters long.
  5. IIS
    • OKTA requires us to be running a domain with https, as such it makes it difficult to test this out in Disconnected mode.
    • Setup a Sitecore instance and make sure JSS is installed.
    • Add your new domain to the local hosts file and make sure its mapped to 127.0.0.1
    • Add the new domain to your Sitecore instance in IIS and make sure it capable of HTTPS. Use the developer certificate as a default.
  6. Back in the JSS OKTA Repository
    • Got to sitecore\config\JSSOkta.config
      • hostName: jss.okta.portal
    • From the command line run: JSS Deploy app
      • run through the setup as you would any JSS application so that it would connect with your Sitecore instance.
      • Sample config from my tests: See scjssconfig.json at the bottom of this blog
    • From the command line run: JSS Deploy config
    • From the command line run (again): JSS Deploy app -c -d
  7. Test out the deployed application:
    • Navigate to your domain: example: https://jss.okta.portal/ (must have SSL)
    • If prompted about the SSL security warning proceed and ignore. “Proceed to jss.okta.portal (unsafe)”
    • undefined
    • Click on the “Login” link in the navigation
    • Login to OKTA (if not already) using the details you registered with.
    • You should arrive back on the profile page
    • undefined
    • Success!! hopefully 🙂
    • Inside the OKTA Dashboard is a handy log that shows all login activity. This is a great way to see what is going on. Screenshot shown at the bottom.
      • undefined

Summary

That concludes the run through of how to integrating the OKTA Angular SDK in Sitecore JSS. OKTA is a leader in user authentication management and having the ability to integrate into our JSS applications is an exciting prospect. I hope this example is of use to you and your teams if your considering the same technology mix.


OKTA Setup Screenshots and Sample Config

I have included screenshots of all my OKTA settings below. As I know this can be difficult to diagnose at times.


scjssconfig.json

{
  "sitecore": {
    "instancePath": "C:\\inetpub\\wwwroot\\test.dev.local",
    "apiKey": "{FB95B118-E04F-4D5B-9465-01AE804A2F5A}",
    "deploySecret": "r6bnvuhv13beudhix1lxnej2ci38u0i6kxhnpy22i6ps",
    "deployUrl": "http://jss.okta.portal/sitecore/api/jss/import",
    "layoutServiceHost": "https://jss.okta.portal"
  }
}

Introduce YML Linting to your JSS Apps

Intro: This post shares how and why you might like to introduce a YML linter into the build process for your next Sitecore JSS project. Particularly if you are relying on the YML import process when building a new application. Shout out to David Huby (Solutions Architect) for introducing team Aceik to yaml-lint.

Why would you want to do this on a JSS project?

When running the JSS application and testing latest changes, we sometimes discovered some strange behaviour with dictionary items, or a page might not load properly.

A 404 page displayed after an invalid YML change was made

This can be caused by a small (incorrect) change in YML breaking individual routes. For example, lets say you have an incorrect tab or character in the wrong place. The YML syntax requires correct spacing and line returns to be valid but this is not always so obvious when done incorrectly. Sometimes only after you run the JSS application and test out the changes do you discover some strange behaviours or the page not loading properly.

To avoid this we found it handy to introduce a YML linter into the JSS build process. This solves the issue of someone making a small change to the YML files and breaking individual routes.

Here are the steps needed to introduce a YML linter into a node-based JSS project:

  1. Install yaml-lint (https://www.npmjs.com/package/yaml-lint)
  2. In the application root create the file .yaml-lint.json
  3. Update the package.json
    • Create a new script entry called yamllint
      • “yamllint”: “node ./scripts/yaml-lint.js”
    • Update the script called ‘build’
      • “build”: “npm-run-all yamllint –serial bootstrap:connected build:client build:server”,
  4. Download the following scripts file and place it in the /scripts folder
    1. https://github.com/TomTyack/jss/blob/feature/YAML-Linter/samples/react/scripts/yaml-lint.js

You can also see the pull request with the above changes at:

https://github.com/Sitecore/jss/pull/385/files

Demo

People of Aceik: Jen Gorshkova, Account Manager

We have launched a new series to introduce you to our talented and hard working team mates. They’re behind the success of our client’s projects – working diligently to ensure we exceed our customers’ expectations.

This month, we sat down with our Account Manager, Jen Gorshkova.

Jen, tell us about your background.

Jen: I moved to Melbourne in 2014 when I started my career in business development at Epicor, ERP software solution. I fell in love with helping clients by finding the best solutions for the business. Getting the “Aha” moment from my clients after the implementation was the most rewarding, and seeing their business succeeding and growing further.

In 2016, I joined Revolution IT as an Account Manager, where my role was to build and maintain strong, long-lasting customer relationships with the clients and partners. I was working closely with the Product Owner and Marketing Manager to push out a new product – Crowdsource testing. The new and most effective method of digital testing platforms.

In 2018, I joined Aceik as an Account Manager to look after our exciting clients and ensure world-class delivery.

Tell us about joining Aceik

Jen: I met Jason, our CEO, in 2018 because he had an account manager role available. I joined Aceik because Jason wanted to build a company that is different from any other. The company that deeply cares about the quality of the work delivery, and ensures honesty and transparency with their clients.

At that time, Aceik was at the start of its growth journey. Jason had won a few large clients and projects and required help to provide the best service! I was looking forward to bringing my expertise and experience working with enterprise clients to help take Aceik to the next level. I was learning new skills and taking on responsibilities outside of my role from the day one. It was also great to see how close the Sitecore community is.

Why did you join Aceik?

Jen: I was impressed by Jason’s vision of wanting to build a unique company. A company that is known for providing high-quality work, full transparency and honesty with its clients. I wanted to be part of a team that doesn’t cut corners, always thrives and offers learning and improvement opportunities.

I got really excited about contributing to the success and growth of Aceik. My work ethic always included providing the best possible solution to my clients, and ensuring that they are happy with the outcome. The Aceik culture is very much aligned to how I operate.

I was also thrilled with the line of work, as Aceik provides a great range of digital services from a full rebuild to solution review to ongoing support. Aceik stood out from most companies out there, and I knew that my skill set and can-do attitude would benefit the team and company.

What’s your favourite thing about working for Jason and with the team?

Jen: I like working in a close-knit team where each day is different and never boring. You always have to wear different hats, and take on extra responsibility, learn a new skill set and see new ideas come to life. I have participated in various roles – marketing, project management and operations. Sometimes, I’ve even been challenged to improve my technical knowledge and skills. I have learnt a lot and I’m grateful to have the best teachers!

The team at Aceik is always keen to jump in and help. No job is too small or too big. Each team member is unique and has their own style of working – but one thing everyone has in common is their passion for what they do.

Working in a culture where each opinion matters is how we do it at Aceik!  

Is there a project, a customer campaign, something that stands out in your mind that you were really excited that you got to tick that box and go, “This is done”.

Jen: One of our clients reached out to us, as they had a tight deadline to meet. The previous vendor had left the platform in non-working state. We were able to quickly to jump onboard and identify their issues and put the best plan forward on rescuing the project.

It was amazing to see two teams collaborating and brainstorming ideas. It was a great representation of a truly agile project! Where we had the scope right from the start but also the opportunity to add and change features along the way.

The client was pleased about the open communication via Slack and seeing tickets moving through the board on JIRA – where they could easily comment as we go. One of their favourite parts was the showcase at the end of each sprint, where we all celebrated success!

When the customer went live – their site speed was drastically enhanced, user experience improved and they won new clients! Here at Aceik we see our clients’ success is our success!

While we’re in the middle of coronavirus pandemic and Aceik is now working from home. How do you make it work for you?

Jen: As a company, we ensured everyone is comfortable and have all they need to work from home. My working station is well set up with an ergonomic chair and a big screen. We also introduced regular online catch-ups and quick quizzes/games to keep the team connected.

I do miss meeting up with the team in person, but thanks to technologies such as Slack and Zoom, we’re still able to communicate well and ensure our projects are delivered on time.

There a few tricks I have learned about working from home:

  1. Prioritise your tasks in the morning and ensure to timebox them.
  2. I also found it important to disengage and go for walks around lunchtime. It meant I was refreshed and energised for the afternoon.

Let’s talk about life outside of Aceik. Who is Jen outside of work?

Jen: I’ve moved countries a few times now. I was born and raised in a place called Kyrgyzstan, which is a beautiful country in the middle east. When I was younger, I moved to New Zealand, but always wanted to live in a big city and eventually relocated to Melbourne, one of the most liveable places in the world.

Being active is a big part of my life. I enjoy running, yoga, hikes and healthy eating. I believe that staying healthy helps with being productive at work. I also believe in continued learning. Since joining Aceik, I’ve become certificated in a number of Sitecore courses. And my current goal is to gain new project management skills and some of the courses I would like to do:

  1. Prince2
  2. PMBok

One Performance Blog to Rule them all – Combining the 6 Pillars of Speed

I have done a number of posts and talks at user groups on Page Speed and performance over the last few years. I have split the various topics into individual blog posts for the most part as performance is dependent on many factors. What has really been missing is a complete demo of how all the different techniques come together to give your site a really good score. So that’s what I intend to demo here is the combination of the 6 pillars of page speed in one Sitecore instance. To recap here are the 6 pillars of page speed performance in my opinion:

1) Introduce image lazy loading

2) Ensure a cache strategy is in place and verify its working. (must have adequately sized production servers)

3) Deploy image compression techniques

4) Use responsive images (must serve up smaller images sizes for mobile)

5) Introduce Critical CSS and deferred CSS files

6) Javascript is not a page speed friend. Defer Defer Defer

I have shown a subset of these previously but crucially three critical pillars to do with imaging were hard to achieve at the time. This is now possible due to being able to support Next Gen image compression (webp), which I wrote about in my previous blog. With a little more time and investigation Image Lazy Loading, responsiveness and image compression to give a more complete picture of how each pillar impacts page speed.

Here are the tools and blogs I will use to achieve each of these:

1) Image Lazy Loading – Blog post by MVP Sitecore SAM and https://github.com/thinker3197/progressively

2) SXA Cache Settings – SXA official documentation

3) Next Image (WEBP) Image Compression – https://github.com/Aceik/ImageCompression

4) SXA Responsive Images – SXA official documentation

5) Introduce Critical CSS and deferred CSS files – https://github.com/Aceik/Sitecore-Speedy

6) Javascript is not a page speed friend. Defer Defer Defer – https://github.com/Aceik/Sitecore-Speedy

Alternatives: Mark Gibbons (MVP) recently upgraded the Dianoga image library to support WEBP. Worth a look if you don’t want to use a third party API. It also supports a CDN. Also Vincent Lui (MVP) also pointed out in his recent SUGCON talk, you can achieve both image compression and image lazy loading via some of the modern CDN’s. That is a great (easy) option if you are retro fitting these techniques to a live website.

I’m not going to dive deep into exactly how to setup each of these things as I think the individual links have sufficient instructions. I will show in the Demo videos how each pillar impacts the HTML rendered. For the most part I am keen to demonstrate the impact of each of these line items and how each one will benefit your page speed score.

Before we begin its important to understand that the algorithm (Lighthouse) behind Google’s Page Speed insight doesn’t work in an exactly linear fashion. If you improve your score by ticking off one of the above, don’t expect ticking off another issue will have the same benefit. The last 20 points out of 100 (on the mobile scoring system) is that hardest to achieve based on what I have seen.

Live Demo Video Series that accompanies this blog:


Test Outline:

Google Page Speed Insights — Scores can fluctuate widely based on network latency. At time you will experience score fluctuations at different times of the day on the same site.

In general this is a guide

Here is the general outline of the VM that hosted the IIS instance for testing. I also put the VM under some basic load while running the tests.

  • All the test below used Sitecore 9.3 and the SXA habitat example site.
  • Test used the live Google Page Speed insights tool via the url: https://developers.google.com/speed/pagespeed/insights/
  • Sitecore was setup on an Azure VM with the specifications:undefined
  • The test was run 5 times, to get an average score.
  • The test page was the homepage of the Habitat site and the page was requested before running the test 5 times so that the instance could be considered warm.
  • EXM and XDB were not running on these test instances.
  • Test results are Mobile Page Speed scores only – This is the most important metric in today environment and good desktop scores are not really a challenge.
  • The default Habitat cache rendering for Navigation was left on for all tests. (without this the site fails under basic load altogether)
  • All tests were conducted under load in an attempt to replicate a production environment. For this I used a node package called loadtest.
  • SXA CSS/Javascript optimisations were turned on, but as I have mentioned before this has a minimal performance boost.

loadtest -c 10 –rps 10 http://baselinecd.dev.local/

10 requests per second with a concurrency of 10

Baseline Score

The Baseline score encompasses the habitat site installed with no modifications.

Result: 48 / 38 / 40 / 34 / 38 = 39.6/100 Average

Observation: Heavily penalised for CSS and Javscript loading times.


Image Lazy Loading

All images on the homepage were converted to be Lazily loaded. A single large blurred image was used as the placeholder for all images.

Result: 57 / 55 / 61 / 52 / 63 = 57.6/100 Average

Observation: Around the mid point of the scale, image lazy loading has around a 15 – 20 point impact.


Rendering Cache Strategy

I have blogged extensively about this in the past but setting up cache settings properly is so critical and has a major impact. Its also one of the easiest things to fix for a poorly performing Sitecore site. Also note the only way to accurately demonstrate the impact that Rendering cache has on a site is to test it under load.

This test was run with higher user per second: loadtest -c 10 –rps 30 http://baselinecd.dev.local/

With Cache Enabled:

49 / 56 / 41 / 54 / 54 = 50.8

Without Cache Enabled:

ERR_TIMED_OUT / ERR_TIMED_OUT / ERR_TIMED_OUT / ERR_TIMED_OUT / ERR_TIMED_OUT = You get the point 🙂

Observation: Rendering cache settings are critical and should be the first step in Page Load Speed refinement for a Sitecore site. 10 Point benefit observed once a site is stable under load.


Image Compression

Result: 60 / 58 / 61 / 62 / 62 = 60.6/100 Average

Observation: Around the mid point of the scale, image lazy loading has around a 20 point impact.


Critical CSS

Result: 74 / 78 / 79 / 81 / 81 = 78.6/100 Average

Observation: The combination of critical CSS in the head and Deferred styles provides a meaningful page speed boost. 25 Point observed benefit.


Deferred Javascript

Result: 92 / 94 / 93 / 94 / 94 = 93.4/100 Average

Observation: Javascript has a massive impact, reducing it drastically in the initial payload provides massive page speed improvements. 40 Point observed benefit.

You might think, hey I will just do Deferred Javascript and it will be all good. While this particular PIllar/Criteria does have the biggest impact. Every site is different and as mentioned earlier scores fluctuate. The upper part of the scoring system is the hardest to reach. So while this is a great starting point, ignore the other speed pillars at your peril.


Responsive Images

Result: 56 / 54 / 59 / 56 / 60 = 57/100 Average

Observation: Around the mid point of the scale converting images to be responsive (srcset support) has about a 10 point impact.


Results Summary

CriteriaAverage ScoreObserved Benefit
No Change (SXA Habitat Home OOTB)41.8 / 100
Image Lazy Loading57.6 / 10015 Points
Sitecore Rendering/HTML Cache Settings50.8 / 10010 Points
Image Compression (webp)60.6 / 10020 Points
Critical CSS78.6 / 10025 Points
Deferred Javascript93.4 / 10040 Points
Responsive Images57 / 10010 Points

The Pillars Combined

In isolation we can see the rough results of what each of the pillars might do to our Page Speed. The real question is what does combining all these pillars produce.

Result: 100 / 100 / 100 / 100 / 100 = 100/100 Average

Observation: Do I expect this on an actual production site realistically ? That is certainly the dream, but in reality you should be over the moon if you make it into the 90s and pat your self on the back if you get into the 80s as well. For any Sitecore site if you make it into the 90’s for mobile, your doing an amazing job.

Admittedly for the combined demo I skipped the responsive image pillar. SXA supports Responsive Images but not in combination with data attributes. It was going to be a bunch of work to write a custom SXA handler to support both lazy loading and responsiveness at the same time. That is not to say its not possible. Either way the impact was minimal.

Conclusion

Page speed is so critical to SEO and visitor conversion. A slow site instantly turns away users on mobile and tablet devices. Admittedly the final result shown above and in the video have required that all the right tools be available to the Sitecore community. Which up until recently you likely needed to bake your own solutions in order to get that over the line.

I think its now becoming possible to aim fairly high (90/100 on mobile) with our Page Speed scores, but it does require getting most if not all of the Architecture Pillars above working together. Its worth learning each of these and understanding the pitfalls and limitations if you want really great page speed. Good luck and feel free to get in touch with any questions.

Footnote

The combined pillars can produce great results but you still need to load test before going live. Checkout the video below where I search for the breaking point using the loadtest tool. Please note that this node based load test tool should just be used for a guide. Before go live I recommend using a hosted load tool solution that has multiple geographic locations. Tests done based on one network location or device will result in a network bottle neck and give you false positives.

Bonus Video: https://www.youtube.com/watch?v=96YcxyhYh0U