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.
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:
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.