How to speed up your website: a selection of working methods
How to increase website loading speed, reduce weight and prepare it for Google Core Vitals. We will deal with image optimization and new parameters.
Collected the most important and detailed articles on how to speed up website loading. This is both about working with code and about optimizing images.
How to reduce the weight of website pages and speed up loading
In 2021, Google will consider a new metric to measure user experience and page quality – Google Core Vitals. It includes three main elements:
- the time it takes for the browser to render the largest visible object in the viewport – Largest Contentful Paint, LCP;
- estimating layout shifts during page load – Cumulative Layout Shift, CLS;
- the time between the first interaction of the user with the page and the response of the browser – First Input Delay, FID.
These metrics can be optimized so that the site is of higher quality and gets a better score from the search engine.
How to optimize your LCP score – speed up content loading
We should strive to ensure that the rendering of the largest element on the page does not take more than 2.5 seconds from the start of the page load. This is considered the optimal indicator of a site that is comfortable to work on.
LCP is influenced by four factors:
- server response time;
- resource loading time;
- client side rendering.
In this article, we have discussed how to optimize each item to arrive at a good LCP score.
How to Optimize CLS: Page Layout Shifts That Disrupt Users
The content on the page can move if some elements are loaded asynchronously: this happens if the webmaster has not allocated enough space for the loaded banner at the top of the page. In this case, loading it will move all content down.
CLS stands for Cumulative Layout Shift and helps you gauge how often users encounter unexpected shifts. The optimal CLS score is no more than 0.1 for 75% of sessions.
In the article, we analyze how to measure the indicator, which shifts are considered normal and how to optimize the indicator.
What affects website loading speed [Research 5.2 Million Pages]
The Backlinko blog team, led by Brian Dean, did some research on Google SERPs to see which acceleration methods are used by the fastest pages. The sample had 5.2 million pages from desktop and mobile, so the result is worth seeing.
Learn more about the findings with graphs and charts in the full blog article. A couple of interesting points:
- The average download speed of the first byte (TTFB) is 1.286 seconds on a desktop and 2.594 seconds on a smartphone. Average time to full page load is 10.3 seconds on desktop and 27.3 seconds on mobile.
- Oddly enough, the best options are to either compress files as little as possible before sending them from the server, or as much as possible. These pages have better performance than average compression.
- For downloads on desktop, the speed is more influenced by the use of CDN, on mobile – by the number of HTML requests.
More interesting information in the full article.
How to reduce website weight and speed up page loading using gzip, brotli, minification and more
Pictures, videos and various interactive elements weigh a lot and slow down the site. You can compress heavy items and speed up loading.
There are compression algorithms for this, the most popular now are gzip and brotli. Brotli compresses harder than gzip and has more compression levels. But at higher levels, its speed is slower.
These compression methods stress the server due to archiving operations, but in general they are faster – they reduce the size of the downloaded data and speed up the loading of the site.
There are also ways to speed up the site: minify, that is, reduce CSS, HTML and JS, set up caching, optimize images – this is all covered in this article.
How to speed up loading: optimizing the code at the top of the page
There is another way to make loading faster – to optimize the code of the upper part of the page, which the user sees first of all when they visit the site. If the top of the page is optimized, the user will see the loading content as early as possible. And the rest can be loaded later.
There are several methods to optimize the code at the top of the page:
- remove unnecessary symbols and scripts from the top of the code;
- set up asynchronous loading with jQuery;
- speed up receiving first bytes (TTFB)
- configure loading from the cache on the user side;
- use CDN.
All this in the article.
How to optimize images for fast loading
Great SEO Guide for Images
A great detailed article on everything important to do with image optimization. It’s not only about compression and weight reduction, but also about requirements for size, quality, uniqueness and relevant tips for filling in meta tags.
Much of the advice is based on a webinar by Demi Murych, a technical SEO and reverse engineering specialist.
Requirements for pictures:
- is the number of pictures on the page important;
- how quality affects SEO and what should be the minimum image sizes on the site;
- how uniqueness is important for search engines and how to use other people’s images legally;
- how the search engine analyzes the subject of images;
- How image placement on the page affects SEO.
- what image format to choose;
- how to set up the choice of a picture by the browser: correctly, not how everyone does it;
- how to set up responsive images;
- how to set up lazy loading
- the best compression methods.
Filling meta tags:
- which meta tags must be filled in, and which ones are optional;
- how to fill in title and alt;
- is the file name important to the search engine.
How to set up lazy loading of images – lazy loading of images
A separate material with a detailed description of setting up lazy loading of images, also called lazy loading. With this implementation, the user does not have to wait until all the content is loaded, because the images will be loaded as they view the page.
There are several configuration options:
- While the user scrolls: when he reaches the place where the picture should be, it will be loaded.
- When the user clicks on the element: the picture will be loaded if he follows the link or clicks on the preview.
- In the background: Content will load gradually, such as when the user opens a document and leaves it. Usually used for large drawings and diagrams.
Pictures are loaded as they are viewed:
The choice of option depends on the behavior of users on the site. In the article, we will analyze whether lazy loading is really necessary, and how to configure it correctly.
WebP format: should I use it for optimization
WebP is a graphics format developed by Google in 2010. The result is an alternative to PNG and JPEG, but with a smaller size and the same image quality. However, in WebP, you can preserve background transparency or animation.
The format is more advantageous in terms of speeding up website loading, but not all browsers support it.
In this article, we have collected all the most important about the WebP format: studies of quality and weight, advantages and disadvantages of the format, browser support, conversion methods, and other topics.