The time pages take to load on your site has a direct impact on user experience and SEO.
Improving the speed of your pages has several advantages:
It reduces the bounce rate and, therefore, dissatisfaction among your visitors: A page that loads too slowly will tend to push away impatient visitors.
It increases the number of page views: A speedy site is more pleasant to visit than a slow one.
It increases Google’s crawl frequency: The lighter your pages are, the fewer resources Google has to expend.
It increases conversion rates on your site: Several studies by web giants such as Amazon have shown that a faster site significantly improves the conversion rate!
Optimize Your Images
Adapt the Size of Your Images to Their Container
A common mistake is to place images that are too big for their container and then size them down with some CSS.
Avoid using an image that is 2500 px by 3800 px in a 500 px by 500 px
<div>, and force it to be resized in CSS. The larger the image, the bigger the file, and the longer it takes for a browser to download. It's important to resize images before uploading them to your website.
You can also crop the image to remove unwanted parts and further reduce its size.
Once you have correctly resized your images, you can further optimize them by compressing them.
Compress Your Images
You can compress your images using free software like ImageOptim, PNGgauntlet, or websites like https://compressor.io/. Simply select the image you want to compress, JPEG, PNG, GIF, or SVG. These tools will then optimize the image for you. Depending on what you need it for, you can reduce the size by up to 90%.
For Mac users, ImageOptim optimizes compression rates and eliminates unwanted metadata and unnecessary color profiles.
Depending on your needs, you can choose to compress your images with loss (lossy) or without loss (lossless):
With lossless compression, the data remains intact after decompressing the file.
Lossy compression reduces a file by permanently eliminating that data, and also causes a slight loss in quality. This format is used to minimize the size of files as much as possible.
In most cases, it's difficult to notice the difference between lossy and lossless compression.
Minify and Compress Your Resources
Minifying a file means removing unnecessary characters (spaces, line breaks, comments, block separators) from the file, which drastically reduces its file size.
Your browser only cares if a file is functional (without errors).
If you use popular frameworks to code your website, there are probably ready-made libraries that perform this task.
Compress Your Resource
By compressing your web pages and CSS with gzip, you can significantly increase your site’s load speed. It's the most efficient compression method and can reduce response times by up to 70%.
Gzip compression will automatically compress the files on your website into a ZIP file. This will reduce their size and increase the load speed of your site, saving a lot of bandwidth and improving page load time.
Example of GZIP configuration for an Apache 2 Server
You must also ensure compatibility with older browsers:
BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0 no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
Unblock Your Page Downloads
<script async src = ""> </ script>. If the execution order is not important and the scripts can be executed as soon as they are available, use the asynchronous method.
<defer script src = ""> </ script>. Use this method if the order of the scripts is important and they must be executed after the HTML is fully loaded.
Faster load speed impacts your visitors and your SEO.
Avoid a common mistake by uploading images that are the appropriate size.
Compress your images to reduce their size even more.
Eliminate unnecessary resources.
Now that you know how to improve page speed, let's look at how to set up a browser cache and make your site even faster!