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
Minify Your CSS and JavaScript Files
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).
You can do this by using web applications such as https://www.minifier.org/ or http://compressmycode.com.
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
Just add the following code to your .htaccess file if you want to compress text, JavaScript, HTML, CSS, or XML:
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascriptYou must also ensure compatibility with older browsers:
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/htmlUnblock Your Page Downloads
If you don't set the call to your JavaScript files correctly, they will prevent the page from being displayed before it's fully loaded. You have two scenarios:
Scenario # 1: You use JavaScript to enliven your page or modify the HTML once it is loaded, for example, using jQuery. In this case, there's no need to block the page from being displayed. It's better to display it quickly, so visitors don't have to wait. Add async or defer in your script tags:
Asynchronous execution
<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.Deferred execution
<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.
Scenario # 2: You display your content with JavaScript, like JS frameworks. We will offer some solutions for this in the third part of the course!
Let's Recap!
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.
Minify and compress your CSS and JavaScript.
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!
