We all know that optimizing the loading speed of a website is important for both user experience and conversions. Nobody wants to spend tens of seconds on a website that doesn’t load. Loading speed is the time in which the content on a web page is loaded by the browser.
Page speed is different from site speed, which is actually page speed on a set of pages on a website. Page speed can also be referred to as page load time, i.e. the time it takes for a web page to display all its content on mobile or desktop.
Key findings:
- A website should load as fast as possible
- Ideal loading speed for mobile should be under 3s
- 53% of mobile sites are abandoned if they load in more than 3s
- A 2 second delay in load time can lead to abandonment rates of up to 87%
- Google phone is under 0.5s at load time
- A site that loads slowly is a negative ranking factor
Sites that do well have a few things in common:
- high percentage of returning users
- low bounce rate
- more conversions
- more time spent on site
- better positions in Google
- good user experience
- lower costs at Google Ads
Some statistics about loading speed:
- 47% of consumers expect a web page to load in two seconds or less.
- 40% of consumers will wait no more than three seconds for a web page to load before abandoning the site.
- 52% of online shoppers said that fast page loading is important to their website loyalty.
- 67% of UK consumers cite slow load times as the main reason they would abandon an online purchase.
- Conversion rates drop by 7% for every second of delay.
- For an online shop with sales of 100.000 lei per day, a delay of 1s costs 2.5M lei / year.
- 79% of online shoppers will avoid an online retailer where they have encountered performance problems.
- 44% of online shoppers will share their negative experience with other users.
- User satisfaction drops 16% with a one-second delay in page load time.
- The annual revenue loss due to abandoned shopping carts from online shopping is $18 billion.
Google uses load speed as a ranking factor for landing pages in both SEO and Google Ads.
- https://developers.google.com/web/updates/2018/07/search-ads-speed
- https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
- https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html – this factor has been taken into account since 2010, but only for Desktop
Core Web Vitals:
Core Web Vitals can also be found in Google Search Console. Below is a print screen from a site that loads very quickly.
These metrics apply to all web pages and can be measured. All of them are related to UX (user experience).
- https://web.dev/vitals/
- http://prntscr.com/v3v2j3 – a report is also in Google Search Console
Metrics:
LCP (Largest Contentful Paint)
- Measures performance in terms of Load, from when the page starts loading until the largest portion of text/image(s) is displayed on the screen.
- Google recommends that the LCP be <2.5s
FID (First Input Delay)
- Measures interactivity with the page. Measures the time from when a user takes an action (click, tap, scroll, etc.) until the browser can respond to that interaction.
- Google recommends that the FID be <100ms
CLS (Cumulative Layout Shift)
- Measures and calculates a score for visual stability, i.e. that score by which users experience unexpected changes in (buttons not working, text, web elements changing position, etc.).
- Google recommends that CLS be below 0.1
Other Web Vitals:
TTFB (Time to First Byte)
- Directly related to load time. Helps LCP.
FCP (First Contentful Paint)
- Measures the time from when a page starts to load until any portion of the content is displayed on the screen.
- Directly related to load time. Helps LCP.
TBT (Total Blocking Time)
- Has a weight of 25% (the highest) in the calculation of the score.
- Measures the times between FCP and TTI.
- Relates to page interaction. Helps FID.
TTI (Time to Interactive)
- Measures the time from when a page loads until it is visually rendered.
- Relates to page interaction. Helps FID.
Page Speed Overview:
Backend Time:
- DNS Time
- TCP Connect Time
- TLS Connect Time
- Time to First Byte (TTFB) of HTML doc response
Frontend Time:
- Base Page Time
- Start Render / First Paint (When rendering starts)
- Speed Index (how fast a user sees the page load)
- Time to Visually Ready (Users start to see content)
- Load Time (Onload) (when all resources, JS, CSS, images) are downloaded
- Time to Interactive
- Fully Loaded Time (when page is 100% loaded)
Core Web Vitals Optimizations:
LCP (Largest Contentful Paint) Optimizations: https://web.dev/optimize-lcp/
- In scoring it has a weight of 25% (the highest weight)
- LCP must be below 2.5s. LCP takes into account images, video and text.
- Server Response Time Optimizations (https://web.dev/overloaded-server/Google recommends that the SRT be under 200ms. Anything over 1s is already a problem: http://prntscr.com/v424id
- HTTP Caching: use as much caching as possible, for any type of resource that should not be served from the server
CDN
- Use a CDN for resources: Images, CSS, JS
Connections to 3Rd party apps, to inform the Browser
- If there are requests to sources 3rd party used:
- link rel=”preconnect”
- link rel=”dns-prefetch”
Render Blocking JS and CSS
- JS and CSS files greatly affect FCP and LCP because before rendering the page they are all parsed.
- Defer any non-critical JS and CSS files that are not important to the page, to increase the load speed for the “main content” of the page.
Reduce CSS Blocking Time:
Reduce JS Blocking time:
-
- Serve only the minimum necessary JS to users.
- Optimize:
Below is an example from Moloso of CSS and JS files that are/are not important. Everything with red is not important to be loaded at first.
1. Green: Critical
2. Red: Non-Critical
Preload important resources:
- Examples:
- <link rel=”preload” as=”script” href=”script.js”>
- <link rel=”preload” as=”style” href=”style.css”>
- <link rel=”preload” as=”image” href=”img.png”>
- <link rel=”preload” as=”video” href=”vid.webm” type=”video/webm”>
- <link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin>
- Compress text files with gzip
- Minimize critical JS
- Use Server-side Rendering or Pre-Rendering for JS, instead of Client Side Rendering.
FID (First Input Delay) optimizations: https://web.dev/optimize-fid/
- Measures how quickly the site responds to the interactions users make with the site.
- The main cause of FID being affected is JS execution. Optimizing JS scripts, from crawling, compilation and execution, will greatly reduce FID.
- Optimize Heavy JS Execution
- Optimize scripts 3rd party. Please consider which are priority and which are not.
- For example Analytics, Tag Manager are priority and can be loaded at first.
- Live chat scripts, can be loaded at the end.
- Reduce JS execution.
CLS (Cumulative Layout Shift) optimizations: https://web.dev/optimize-cls/
- Common causes:
- Dimensionless images
- Iframes, Embeds without dimensions
- Dynamic content
- Fonts
- Add width and height attributes to images.
- Use rel=preload link for fonts.
Other Web Vitals Optimizations:
Optimizari FCP (First Contentful Paint): https://web.dev/fcp/
- Removed render blocking resources
- Minifiy CSS
- Remove unused CSS
- Use rel=preload link, for important resources (fonts, CSS, etc)
- Reduce server response time
- Use large cache times (1 year) on resources (images, font, media, script, CSS) Use Cache-Control: max-age=31536000 (365 days)
TTI (Time to Interactive) optimizations: https://web.dev/tti/, https://web.dev/interactive/
- TTI should be under 5s, on non-performing mobile devices. To get a good (Fast) score, it should be under 3.8s.
- The recommendations for improving TTI are very similar to FCP.
TBT (Total Blocking Time) optimizations
- In scoring has the highest weight: 25%
- Google recommends under 300ms
- Optimize third party code (JS in particular)
- Reduce JS execution times
- Minimize requests that are made in the page
Broad Optimizations:
TTFB (https://web.dev/time-to-first-byte/), is directly related to Server Response Time
- Minimize HTML
- Minimize HTML Requests
- Use a CDN to deliver resources
- Fully Loaded
- Most important in this case is the page size bytesTotal.
- Keep the page size as small as possible.
Third Party Scripts:
- This includes Chat, Email Marketing, Pop-ups etc. including Google Analytics (which is among the most optimized scripts)
- They usually have the biggest negative impact on loading speed.
- Recommendations:
- Use only those external scripts that are required for the proper functioning of the site.
- Investigate each individual script, each individual plugin to see which ones slow down the site and increase loading speed.
Image Optimization:
- Optimize and compress the images (testing is needed here, to see how much the images can be compressed, before they lose quality).
- Always add attributes width if height to images and video (if any).
- Or use other new formats like JPEG 2000, JPEG XR
- WebP compresses images between 25-35%.
Use Responsive Images
Use lazy-loading for images:
Image compression tools:
Tools resize images:
Resources for image optimization:
Tools for testing images:
- https://web.dev/measure/
- https://www.thinkwithgoogle.com/intl/en-cee/feature/testmysite/
- https://developers.google.com/speed/pagespeed/insights/?hl=ro
- https://developers.google.com/web/tools/lighthouse#devtools – perhaps the best of all
- https://github.com/GoogleChrome/lighthouse-ci
- https://github.com/GoogleChrome/web-vitals: The easiest way to measure all the Core Web Vitals is to use the web-vitals JavaScript library, a small, production-ready wrapper around the underlying web APIs that measures each metric in a way that accurately matches how they’re reported by all the Google tools listed above.
- https://w3c.github.io/user-timing/
- https://w3c.github.io/longtasks/
- https://wicg.github.io/element-timing/
- https://w3c.github.io/navigation-timing/
- https://w3c.github.io/resource-timing/
- https://w3c.github.io/server-timing/
- https://googlechrome.github.io/lighthouse/scorecalc/ – performance score calculator
Resources:
- https://web.dev/
- https://developers.google.com/web/tools/lighthouse
- https://developers.google.com/web/tools/chrome-user-experience-report/ -Chrome UX Report
- https://web.dev/fast/ – Techniques for improving site performance.
- https://web.dev/performance-scoring/ – how they are calculated: http://prntscr.com/v4nc0t