Step by step: improve the download speed of the site
Nobody likes the slow site – neither users nor search engines. With the current speed of the Internet, people are no longer ready to wait long for the page to load. This is not a dial-up connection, where waiting was inevitable. And the search engines, fighting for the quality of search results, do not want to give out bad (in this case, slow) sites to users. Therefore, other things being equal, the slower site will be lower in output than its more nimble competitors.
What is the normal download speed
The faster the better. But on average, 2-3 seconds to load the main part of the content of the page is quite normal.
What determines the download speed
Two sides are involved in loading the site – the user’s browser and the server where the site files are physically located. Data exchange takes place between these parties.
To slow down the loading site may be problems on each side and in between.
Slow server: it may be trite to miss the RAM or cores in the processor, like a normal computer.
Slow site engine (CMS): if the code was written by inexperienced programmers without taking into account its speed.
The server is far from the user: for example, the server with the site files is physically located in Moscow, and a user from Vladivostok enters the site.
Many files: to display the browser page, you need to load a lot of pictures, files, styles, scripts and fonts.
Heavy files: plus these files weigh a lot.
All steps to optimize the speed of the site are aimed at eliminating these problems.
How to check the speed of the site
Of the many online services for checking the speed of a site, the most popular is perhaps the Google PageSpeed tool. It is easy to work with him – we indicate the address of the site and click on the “Analyze” button.
After some time, the browser receives a response from the server and begins to render the page content (FCP – First Contentful Paint).
After what time the user sees the main content in the browser (DCL – DOM Content Loaded).
How optimized the site is in terms of download speed.
Specific optimization recommendations. Clicking on the links “How to fix”, we see the addresses of problem images and files with which you need to do something (mostly compress).
Checking download speed via Google PageSpeed
It is advisable to get into the green zone – both in the “Site Speed” block (Page Speed) and in the “Optimization” block.
Another good service to check the download speed, however, in English – Pingdom. A distinctive feature – such beautiful graphics (called waterfall – waterfall) show which files, in what order and how long they load:
And now to the point:
How to speed up the site
Step 1. Image optimization
Non-optimized images are the “heaviest” part of the site. Therefore, working with pictures can give a significant increase in speed.
What we are looking at:
Image size (width and height)
If you captured the product and received photos with a width of about 5000 pixels, you can safely reduce the width to 1600, in most cases this will be enough. The exception will be those sites (mostly online stores) where you can view the product with a “magnifying glass”, but even there the enlarged image does not load immediately, but only if the person decided to use this tool.
Weight of pictures (kilobytes)
Images from the camera can (and should) be compressed in volume before laying out on the site. This is done either in Photoshop (or another image editor), or through online services, such as TinyPNG or Optimizilla.
Preview to big pictures
If you have photos of goods (or completed works) and there is a page with their list, it will be wise to make small previews (thumbnails). Then the list of goods, works or photos will load faster.
For example, Sportmaster uses product images in three versions:
Picture for the list of goods (weighs 7 Kb)
Picture for a product card (weighs 18 Kb)
Picture to view the product with a “magnifying glass” (weighs 942 KB)
Imagine how long the list of products would load if Sportmaster only used original images (those that are over 900 kilobytes each).
When checking the speed of the site through Google PageSpeed you will get a ready list of images that should be optimized:
PageSpeed image optimization
Step 2. Gzip Compression
Gzip is a program for compressing files on a server (similar to zip archives on a computer). When the Gzip server is enabled, before sending the page code to the browser (as well as scripts, styles and other textual information), first archive these files. The browser will receive the archive and extract it on the user’s computer. Compressed information will be transferred faster between the browser and the server.
