Performance Fact Sheet

Google Lighthouse information, performance talking pointers & related scenarios.

Basic Info | Pointers | Practices | Scenarios

Basic Information

What is Website Performance? Why is it Important?

Web performance is all about making web sites fast, including making slow processes seem fast.
The importance of performance
- Performance is about retaining users - Performance plays a major role in the success of any online venture. High-performing sites engage and retain users better than low-performing ones.
- Performance is about improving conversions - Retaining users is crucial to improving conversions. Slow sites have a negative impact on revenue, and fast sites are shown to increase conversion rates.
- Performance is about user experience - When it comes to user experience, speed matters. A consumer study shows that the stress response to delays in mobile speed are similar to that of watching a horror movie or solving a mathematical problem, and greater than waiting in a checkout line at a retail store.
- Performance is about people - Poorly performing sites and applications can also pose real costs for the people who use them.

Source Link(s): https://web.dev/why-speed-matters/

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most, the Core Web Vitals.

Largest Contentful Paint (LCP): measures loading performance.
- The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading. Source: https://web.dev/lcp/
- To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
First Input Delay (FID): measures interactivity.
- FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction. Source: https://web.dev/fid/
- To provide a good user experience, pages should have a FID of 100 milliseconds or less.
Cumulative Layout Shift (CLS): measures visual stability.
- A layout shift occurs any time a visible element changes its position from one rendered frame to the next. Source: https://web.dev/cls/
- To provide a good user experience, pages should maintain a CLS of 0.1. or less.

The viewport is the visual area of a webpage as it is displayed on a device (smartphone or tablet) screen or monitor.
A viewport is the portion of the website visible to you on your device's screen.

A good experience in Google Search depends on Page Experience Signals:

Page experience signals -- The following signals are important for delivering a good page experience in Google Search:
- Core Web Vitals - The page provides a good user experience, focusing on the aspects of loading, interactivity, and visual stability
- Mobile-friendly - The page is mobile-friendly. Check if your page is mobile-friendly with the https://search.google.com/test/mobile-friendly
- Safe-browsing - The page doesn't contain malicious (for example, malware) or deceptive (for example, social engineering) content.
- HTTPS - The page is served over HTTPS.
- No intrusive interstitials (Accessibility) - The content on the page is easily accessible to the user.

Source Link(s): https://developers.google.com/search/docs/guides/page-experience

What is Google Updating?

Measuring performance with Google Lighthouse:

Lighthouse is a tool that helps you measure and find ways to improve a page's performance.

Here's the general workflow for how you use Lighthouse:

You tell Lighthouse what page to audit.
Lighthouse loads that page and records how long the page takes to hit various performance milestones. These milestones are called metrics.
Lighthouse gives you a report on how the page did. The report provides a score for each metric and a list of opportunities which, if you implement them, should make the page load faster.

Lighthouse is built into GD Core under the Site Audit Tab. This measures performance, accessibility, SEO, and best practices.
Its our goal to make websites have a performance rating of 75% or higher.

Source Links(s): https://web.dev/discover-performance-opportunities-with-lighthouse/

Performance Pointers

Designing a Performant Website

We want to create a site that performs fast and provides content when the user expects it to appear. In order to ensure this, discuss the different ways we can/should display the content on a site to best impact performance i.e. using clean modules, distributing content on a page without overloading it, etc.

Desktop and Mobile

Desktop and mobile can have very different experiences. Generally when on mobile, viewers wish to have items load very fast and for them to find the content they are looking for right away. This excludes any fancy animated modules or videos. Such items cause the site to slow down on mobile. To ensure that the mobile continues to be performant, these items should be excluded on both the desktop view and mobile views.

Using Your Resources

demo https://demo.wdsgallery.com/ and features https://features.wdsgallery.com/

Always make sure to check your resources when consulting with a customer
Make sure to check the performance bar above each feature and module on both sites - this bar tells you the impact the feature has on performance with a 1 meaning its scripty and heavy, and a 5 meaning its lightweight and clean. Make sure to recommend the modules and features with a high performance rating and talk customers out of features and modules with a low performance rating using the pointers on why its important.
Make sure you double check that a feature or module exists before telling a customer we can do it. This is because we have removed the worst offending modules and features from items we offer on our builds.

Homepage Best Practices

Builders have been briefed on the following practices. When consulting with a customer, tell them the importance of performance and let them know what the homepage best practices are, if they ask for certain features.

Hero Best Practices

Desktop and Mobile

Stay with a static or parallax image only - Why:

Video: will cause performance issues
- Move videos to internal pages
- Never autoplay videos with important content
- Include an introduction to the video with a fallback image on the homepage and a link to the full video on an internal page or hosted elsewhere
- For homepage hero videos, replace them with fallback images on mobile view
Slider: null conversion rate and causes performance issues

Features to avoid on the Homepage

The following features are known to cause performance issues. If using any of the module types mentioned below, make sure they don't contain any important information on desktop view and then hide them on mobile view.

Mobile and Desktop

Module animation - keep animations on modules and columns to a minimum, especially on mobile devices
Videos - keep videos specific to desktop views, replacing them with a link to the video somewhere else in mobile views if the video is that important
Slider modules - testimonial sliders, image carousels, logo carousels, content sliders, etc.
Photo galleries
Modal popup modules
Hover modules - such as ihovers and interactive banners
Google Map modules and embeds
Interactive Callout modules - such as flipboxes, slideboxes, info circles
Social feeds - the only suitable social feeds are Instagram feeds, Facebook and twitter feeds are highly unnecessary especially on mobile - hide Instagram feed rows from mobile view if they are being used.
Particle backgrounds - keep rows with particle backgrounds specific to desktop view only
iframes/PayPal/script embeds - If this is needed the rest of content should be simply/elegant vs dynamic/flashy
Nested modules - saved rows or templates inside of modules like tabs or accordions
Chat plugin
Any module with moving parts and high JavaScript content

What to do in the following Scenarios?

The following are examples of what to do when a customer asks for certain features that aren't performance-friendly.

A customer wants chat

Explain the importance of performance and the overall experience of their visitors
Use your resources to look up the approved chat plugin on features and its performance rating
Discuss the negative impact chat has on performance
Make sure the customer wants chat so bad that they are willing to overlook its impact on performance and understand that the site will be slower than it would without the chat feature, before moving forward.

Customer has live website with 10 pages and are looking to condense them to 4 pages

Explain the importance of performance and the overall experience of their visitors
Discuss how piling too much content and images onto a page will negatively impact site performance
Explain how distributing content properly between multiple pages will help visitors with navigation and will positively impact site performance. Keep homepage especially lightweight and to-the-point. Don’t use tabs or accordions with saved rows especially on the homepage to conceal extra content. Think about how the customer will expand on the site and that things will get very complicated when trying to add items in the future unless content is properly set up in the beginning.
Convince customer to either upgrade plan or purchase additional pages OR to pick 4 main pages they would like to see done in the new build while getting the remaining content added in CARE.

Customer wants their website to “Pop” with several videos

Explain the importance of performance and the overall experience of their visitors
Discuss the impact of videos on performance and on site load speeds
Try using the importance of performance to talk a customer out of having videos on their site
Consider including the videos on internal pages of the site rather than the homepage
IF the customer must have the video on the homepage, compromise with the customer saying they can have the video if they really want it, but be prepared to have a fallback photo in its place on mobile.

Customer wants a mixed bag: animation, videos

Explain the importance of performance and the overall experience of their visitors
Discuss the impact of videos and animations or scripty modules on performance and on site load speeds
Try using the importance of performance to talk a customer out of having videos, animations or interactive modules on their site's homepage, on desktop and mobile
Consider a compromise where you include a video on an interior page with a call to action
Tell the customer that any animated items they must have will only be visible to them on desktop view as they will be replaced with static items in mobile view