The site loading speed directly affects your users’ behavior - they do not like to wait long. Based on search engine analytics, if the site loading time is more than 4 seconds, only half of the potential visitors will remain on the site, more than 8 seconds - only a quarter of them do not abandon the site. Moreover, the website speed impacts search ranking. This shows that a faster site, more people visit it and use your service such as leaving a request, purchasing products, etc. Thus, site loading speed directly affects conversions.
It is worth noting that there is a very good service called Lighthouse from Google which allows you to evaluate the loading speed of your site for computers and mobile devices and it also gives you various tips. You can use Lighthouse on Page Speed Insights or through the Google Chrome browser in the Audits tab. If you have ever tried this service, you may have noticed that images have one of the big impacts on site loading speed. You can trust this service.
Many developers ignore the importance and need to improve site loading speed, throw it into a black box and never open it again. Because there is no certainty that it can bring any positive result. Today I will tell you about a few things to improve productivity that can be implemented right now by any developer.
Well, what is the first and the most important point? It is images. Image size might have the greatest impact on your site’s loading speed. On some websites, images may take up to several megabytes if they are not properly optimized for a web page. Even if you see that the images weigh only 200-300 kilobytes, try to optimize it. Just imagine that image size can be reduced up to 50 kilobytes or even less.
First, when you save an image from Photoshop (if you use it), choose “save for web”. Do not save images blindly, always check its size. You do not have to choose 100% quality every time, you can choose from 60% to 80%, the difference in quality won’t be very noticeable but the image size will change noticeably. As practice shows, in most cases 60% quality is enough, and often the image input size can be so large that even if you select 10%, you get a pretty high-quality picture. Here you will need to experiment. Furthermore, you can use various services to further optimize images, that can reduce their size more.
Secondly, the format which the image has been saved in, cannot always be optimal in terms of its size. There are two popular formats of images – JPG and PNG. How to find out which format is better to use for a particular picture? One of the main advantages of PNG is its support for transparency. But the downside is that the compressed PNG image weights much more comparing to compressed JPG image. It can be difficult to believe but the optimized JPG image can weigh 10 times less in size than the same image in PNG format. And according to that, a simple rule comes up: if an image does not need transparency support, it is better to use JPG (at least for Web). But GIFs, PNGs, and JPGs are not the only image formats that you can use on web pages.
There is one more image format – WebP. WebP is a modern image format that provides superior image compression for images on the Internet. Images in WebP weigh significantly less than the same images in PNG and JPG without losing quality. Then you may ask why is not WebP used in every image on the internet? The problem is that unfortunately WebP as a modern image format is not supported by some, even the most modern browsers (mainly browsers by Apple). So, when a user visits your site, the image should be shown in a format that the user’s browser supports. Approximately 70% of visitors of your site can see images in modern format, accordingly, it makes sense. You can conveniently detect WebP support on browsers by JavaScript library Modernizr.
It also makes sense to reduce the size/quality of images in certain pages of your site where a high-quality image is not very important. Imagine an online store and images of products. Just imagine how many variants of this image you should save:
The thumbnail on the page showing all the products and on the images listing of one product on the page of this product in quite low quality.
The main image in a quite good quality
An image in original quality if the product page has a function for enlarging the image
If you want more than half of your users could receive the image in WebP format, it is advised to store the images in two formats. It means one image is stored in 6 variants. Now imagine for mobile device users image size should be as small as possible to support good image loading speed on mobile phones.
How to automate image processing?
You might want to automate all this routine of image processing and you will need to think in order to make or use the script for image processing after loading – compressing, optimization, reformatting, etc. It will be especially problematic if your site is not on your own server, but in a virtual host where you cannot install additional software, including the ones to work with images.
You can use not instruments but services that can do all this job such as transforming, optimizing images for you (at that moment you request). Check it -it is very convenient. On your server, only one variant of images is stored (original), you just need to tell how you want to transform your image.
Here is the incomplete list of such services:
Imgix
ImageBoss
LibPixel
Further, not all the images that you have on the page need to be loaded immediately, because this does not very well affect the page loading speed. Think, until all the images are loaded, even those that are at the very bottom of the page, and which the user may never see, the site will not be fully loaded. Therefore, it is better to download only those images that are in the viewport of the screen at the time the page loads, and do not load the rest at all or substitute image placeholder of very low quality (10-20 pixels wide) with a blur effect. And then, upload images as needed when they are in the viewport of the screen. This approach is called lazy loading. Previously, determining the visibility of an element was quite a challenge and there were unreliable solutions but today you can use the Intersection Observer API in JavaScript. There are already ready-made implementations of image lazy loading based on it, such as Lozad. The combination of only image optimization and lazy loading can give your site a significant increase in loading speed.
The second step after the images is to optimize your CSS and JavaScript files. Remember to always minimize these files. By default, CSS are resources that block the rendering of a page in a browser. This means that the browser will stop rendering HTML elements until it loads and reads all your CSS. Therefore, always minimize CSS, and also remove unused styles. This is especially important if you use any CSS framework (you are unlikely to use all the framework styles). PurgeCSS can help you automate the process of removing unused styles. If it’s possible to you, try to load only critical CSS when loading the page, and delay loading the rest of the CSS until the page is fully loaded. Critical CSS is the one, which is necessary for styling only the part of the page that is in the viewport of the screen when the page loads.
Try to reduce the size of JavaScript files as much as you possibly can and remember that a JavaScript file is not an image, the browser, in addition to downloading JS files, also needs to process them, which takes some time and resources. It is the size of JavaScript and the speed of its execution that determines such a very important indicator as the time to interactive. That is, it may be that the page seems to be fully loaded, but the user still cannot interact with it, or the page responds to actions with a long delay. This means that the browser has not yet processed all the JavaScript code. Also try to delay the large JS code (file) loading, which is not used on all pages. For example, you may have a component weighing 100-200 kilobytes, which is used on only one page and is loaded on all pages. Try to split your JavaScript into several chunks and load each of them only where it is needed. This can easily be achieved with the help of builders such as Webpack.
And remember, HTML page rendering goes from top to bottom, and if the browser encounters JS on the way to rendering the page, it will "pause" page rendering until it downloads (if necessary) and executes it. Therefore, try to include your main JS file below the entire main HTML, preferably before the closing body tag, so as not to delay rendering the necessary HTML. If you don't include the JS file at the bottom of the page, then use the defer attribute when including the script, which will indicate to the browser that this script should be processed only after the entire page is completely rendered.
There is another one of the most important points for improving the page loading speed. This is reducing the response time from the server or the time to first byte (TTFB-Time to first byte). TTFB is the time that is necessary to send a request from a client (browser) and receive the first byte of the data from the webserver.
This point is perhaps the most difficult to optimize, because it affects quite a lot of aspects, many of which are specific to the tools used, implementation approaches, frameworks, or CMS. And so, there are no universal solutions. But there are a few tips to pay attention to:
Use a server with good performance, because the faster your server reads or writes data and processes various processes faster, the faster your site will return a response to the user.
Try to use the latest versions of languages, frameworks, libraries, CMS, webservers, or anything else that runs on your server to take full advantage of any performance updates that may have been released. For example, PHP 7.0 gives a performance increase of 180% compared to the previous version 5.6
Optimize Database queries. See if you have encountered an N+1 problem or missed the necessary indexes.
Use caching. Each time a user makes a request, the server query the database( DB), generates HTML from the data and returns it to the client. Imagine if you have a site where you update content once a week. But still, every time your site opens, a query to the database will occur, even if the information was not updated. Therefore, when a user makes a request for certain data for the first time, you can get it from the database, show it to the user, and cache (save locally) this data for a week (for example). And after that, within a week, everyone who opens this page will no longer make a request to the database every time, but they will be shown a saved copy of this data, which will reduce the page loading time and the server load. In some cases, you can cache entire pages instead of just data from the database.
Optimize the speed of establishing a secure SSL connection (if you use it), since establishing a secure connection takes longer time than an unsecured one. You can do this yourself or use tools that can help you do this, such as Cloudflare. Cloudflare will act as an intermediary between users and your site, and all requests will pass through it. Cloudflare can also handle DDoS attacks that your site may be exposed to. If you don't pay attention to this your site may load more slowly after installing SSL.
These include JS, CSS, files, fonts, and images. When a user visits your site, you can let the browser choose where to get resources from, and this can have a significant impact on the site’s loading time. You can save static resources in a browser when a user visits your site for the first time. This is caching. You can safely cache static resources for a long time: for 6 months or even for a year. Cloudflare can also cache all static resources on your site. But what if during this time you changed the content of these files, but did not change the name, for example, added a couple of lines to your JS file? Change a filename! But you cannot constantly change the name, but you can add some hash as a query string when you request a file. For example, "/js/app.js?v-123456." You will request the same file, but technically for the browser it will be another file that has not yet been cached. You can do this manually or, again, automate this process with the help of builders. This is called versioning or cache-busting.
Use a content delivery network (CDN) for static resources. When a user requests an image (for example) from your site, he must send a request to your server, regardless of where the user and your server are located. CDN can help minimize the distance from the client to the resource. CDN is a group of servers scattered around the world that work together to provide content to the user from the server that is as close to him as possible. DNS with one of the largest number of servers worldwide is Cloudflare. As you can see, there are several advantages to start using Cloudflare. For most sites, a free tariff will be more than sufficient. (They do not pay me:))
Try to apply these simple tips to optimize the loading speed of your site, and I'm sure its loading time will be significantly reduced. See you soon!
You will get free consultation on your project development.