In this post, we summarize different measures that can be taken to improve the loading time of a website. We analyze the different factors that affect website speed and how we meet the requirements for Google's Core Web Vitals measurement.
A faster website leads to higher conversion rates, fewer short visits (bounce rate) to the website and improves the user experience for the visitor. Site speed also affects organic results as it is one of several ranking factors.
More information in the post
-
About charging times
-
Briefly on mobile-friendliness
-
About Core Web Vitals
-
Components, charging time analysis
About charging times
Why are charging times important?
Actively optimizing a website to reach load times of less than 2 seconds is not only good from an SEO perspective. It also has a positive effect on other channels and the user experience as a whole.
Load times are one of several ranking factors under Core Web Vitals - a metric launched by Google to measure the most important technical aspects of a website. A website with high load times or that does not achieve other CWV values risks dropping in position in the organic search results.
UX, bounce rate and traffic
The user experience (UX) is the most important metric to work on improving. Every second increases the risk that the visitor will choose to leave the website. This leads to a higher bounce rate, especially for mobile users.
Paid search hits and Quality Score
Loading times also affect the results of the paid search hits, as they are also ranked according to the user experience of the landing page. Higher load times result in a lower Quality Score.
Mobile-friendliness
Loading times and the experience on mobile devices are a top priority. Being technically functional on a mobile phone is not the same as being optimized for the device.
If the website is not optimized for mobile users, there is a high risk that the user will go back to the search results and look for another website.
Do you need a new website? Or does your website need an overhaul?
Get started today - contact us
About Core Web Vitals
Core Web Vitals consists of a total of six different measurement points.
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
- First Contentful Paint (FCP)
- Interaction to Next Paint (INP)
- Time to First Byte (TTFB)
Of the six metrics, three are considered primary key web metrics: LCP, FID and CLS.
Google has announced that websites that meet the Core Web Vitals requirements will be rewarded with a ranking boost.
LCP
Largest Contentful Paint
LCP is about how long it takes for the first visible image or text block within the viewport to load and is strongly related to load times.
Several different elements are involved such as headings, paragraphs, forms, CSS elements and images and videos.
Activities to improve the LCP
- Optimizing CSS and JavaScript
- Reduce unused CSS and JavaScript
- Minify CSS, JavaScript and HTML files
- Enable lazy load for image content
- Using image formats adapted for the web (WebP)
- Fast server for web hosting
CLS
Cumulative Layout Shift
CLS is about how often website visitors experience unexpected changes in layout while the page is loading. It can be caused by elements loading out of sync or overlapping, elements lacking height and width attributes, or dynamic third-party resources resizing.
Activities to improve CLS
- Set height and width attributes on all images, videos, ads or other iframes etc.
- Do not load fonts that are larger or smaller in size than their fallback.
Other guidelines
- Avoid dynamically injected content
- Use for important fonts
- Reserve space for elements that are important
IDF
First Input Delay
FID is about how long it takes to respond to the visitor's initial reaction. That is, how long it takes from when the visitor interacts with the page (clicks, scrolls, etc.) until the browser can start processing the response to the interaction.
Activities to improve FID
- Minify and compress JavaScript
- Cached code with PRPL pattern
- Activate lazy loading
Other guidelines
-
Reduce the amount of JavaScript
-
Split code that takes a long time to load
-
Loading third-party code in an efficient way
-
Move non-interface activities to background thread
Image management
Components, charging time analysis
Image format
The image format used on the website is crucial to the speed of the page.
JPEG - the most common format
PNG - adapted for transparent images
GIF - moving images
WebP - modern format with higher compression capabilities
Image compression
High quality images are important to make the website feel more alive. Uploading full-size images should be avoided as this leads to much slower websites.
Compressing the images reduces the file size, which in turn reduces loading times on the website.
Height and width
In order to improve the CLS value of the website, all image elements should have a specified width and height.
Right-sized images
Avoid setting the size of images only via CSS and HTML. Publish images at the right size, as search engines need to retrieve the full size of the image when retrieving the website.
Lazy loading
Lazy loading means that the images are loaded only when they are to be displayed on the screen. The page feels faster because not all of the page's content needs to be loaded immediately.
Data management
Components, charging time analysis
Minify JavaScript, CSS & HTML
For example, remove unnecessary spaces and line breaks that are read into the files.
Reduce JavaScript
Reduce the JavaScript that is not used. Postpone the loading of all scripts until they are needed so that less data is transmitted.
Reduce CSS
Reduce stylesheets and rules that are not needed and defer stylesheets that can be retrieved only when the content is displayed.
Reduce execution time for JavaScript
Reduce the time it takes to load and run JavaScript code.
Avoid running older JavaScript
Some features allow modern JavaScript to run in older browsers, but for modern browsers the features are not needed to run scripts. Apply a modern approach to JavaScript implementation to reduce the amount of data that needs to be transferred.
Resources that block
Suspend or block the execution of CSS and JavaScript that blocks the rendering of the website.
Storage and compression
Components, charging time analysis
Compression with Gzip
Text resources and other elements can be sent compressed using Gzip to reduce the amount of data transferred to the website.
Caching
Avoid visitors having to download content every time they visit the website by enabling caching. Caching means that the files are loaded locally from the browser using, for example, cookies, instead of being transferred from the server on each visit.
Server response time
All content is loaded onto the website only after contact has been established with the server. Themes, plugins and the server's own performance affect the response time.
CDN
Enabling CDN (Content Delivery Network) shortens the loading time of the website by having the website download static content such as images, JavaScript and CSS on so-called nodes instead of on the main server.
Avoid large DOM trees
DOM trees are computed from HTML tags on the website. A large DOM tree leads to increased memory consumption, the calculation of the flow takes longer and the layout is produced more slowly.
Workload
Reduce the time it takes to interpret, compile and run JavaScript.
Network load
Reduce the total amount of resources downloaded to the website. High network load affects the user's data transfer costs and is directly linked to slow page speed.
Reduce the amount of resources in chaining
The amount of resources loaded with high priority should be avoided to be made too high.
Visible text
Fonts are large and take time to load. Browsers often hide the text before the font is loaded, causing flash of invisible text. The font-display function in the CSS code makes the text visible while the font is loading.
Reducing the impact of third party code
Limit the number of third-party providers and delay loading until after the main content of the page is loaded.
