How to optimize your website?

Do you know modern optimization methods? Do you compress your files with Brotli? Do you have a good web host that allows you to automatically optimize your website? There are many ways to optimize a site, I present several points that could help you improve your site, or create a brand new website optimized and up-to-date. Many of these points do not require too much effort if your site is already made with recent technologies and once set up, will not cost you anything more. Even you could save your host's bandwidth with all these optimizations!

Your server

Choosing a good web host that will allow you a successful website is the first step. It is important to look at which host best meets your needs. Some with free plans will slow down your traffic to encourage you to choose a paid plan. Others offer very useful features versus the competition. This is the case with Netlify! This web host is very fast, and offers a free plan perfect for small and medium businesses! And if you need a lot of visitors, their paid plan is still very attractive. The advantage of such a host is the possibility of doing a lot of optimization for your site, and this, quickly. Netlify can manage your cache, minify your files, and even optimize your images! All are compressed in Brotli, which is Google's latest compression format, to further reduce your website loading times! Netlify also has several advantages on the SEO side, development, functionality, form submissions, and more. All for free! So in addition to being a host that will help your business reach more customers through a faster site, you can offer even more functionality to your users!

Gzip compression vs brotli

Does your current site use compression to greatly reduce your files? You can test your site on a site like this: https://www.giftofspeed.com/gzip-test/ and you'll know right away if your site uses Gzip, Brotli, or neither. If I run the check on my homepage, I can see that it goes from 250.23kb to 39.2kb thanks to Brotli, which is 84% compression! This is going to have the biggest impact on the size of your files, so it's important to make sure your site returns files in a compressed fashion! What is the difference between Gzip and Brotli? Both greatly reduce the size of your website, but Brotli is about 15% more efficient. Developed by Google, this one is more recent and is not yet supported by all browsers, but a large part accepts it without a problem. Gzip is still a good choice for other browsers. By using a host such as Netlify, you won't have to do anything more, Netlify will compress your site with Brotli or Gzip depending on what is supported. This is an interesting optimization since such savings in file sizes will allow you to have an even faster site while using less bandwidth from your host. What advantages!

Image optimization

Image optimization is very important to make your website faster since poorly optimized images can quickly make your website slow. I recommend using a site like Cloudinary to manage your images since it will allow you to return images optimized for the web. It will return the best image format, as well as the required size. A mobile image will therefore be smaller than one on a computer, and a well-made website will know the difference and ask Cloudinary for the required format. This will allow your mobile website to load your images quickly since it will not have to load a very large image but will require an image optimized for mobile. The more images you have on your page, the more important it is to manage them correctly because each image adds up! For example, the image used for this page was originally 200kb, which was good enough to start with, but once optimized it becomes only 15kb! Which is more than 13 times smaller! If your pages contain several images, especially of larger format, the impact will be even more important!

Code splitting

Code splitting has several advantages and can make your website faster! This allows better compilation of your files to maximize their size and the number of calls required to load a page of your website. This technique avoids having to load each part of your site separately, which can take up valuable time since each call can quickly slow down your site. Conversely, if everything is put together in a single file, your visitors will load a large file, no matter what page they visit, which is again a problem when the goal is to have a fast website! Code splitting solves this problem by gathering the files in groups, which minimizes the number of files for the user while avoiding a large slow file loading. If your home page has a lot of content it could load 2 files, while your contact page has only one for example. Several compilers offer this basic option, Nuxt for example does it automatically when you generate your static website! That's why code splitting is a quick and inexpensive way to optimize your website!

The browser cache

Do you know about your browser's cache? You use it every day! When you visit a website, several files, content, and images are cached, which means that if you return to see the same page in the future, the content may load directly from this cache without having to be requested again by the server! When a customer returns to your site, his browser checks to see if the cached files are still valid. Depending on your site, the files may be valid for a few hours, days, or indefinitely. Caching your files is therefore a means that can have a great positive impact on your site if used well! For files that are used regularly and don't change often, it might be good to give them a longer expiration date, which will allow your daily site visitors to enjoy faster browsing! If the content is likely to change quickly, however, you have to keep the deadline shorter so that your customers still have up-to-date content! This is where you have to find the right balance because if it takes time for your entire site, the cache loses its value and will not optimize your site. The sites I develop, like this one using Nuxt, have an advantage since when it is generated, the compiler gives generated names with random numbers and letters. This allows me to tell your browser that all files from my site will never change. Once cached they will never be invalidated! And the beauty of this is that when I regenerate a new version of my site, the names will change and the new files will load the next time and then remain cached again! Nothing to do on your side, and no fear of serving an old version of your site to your customers, thanks to Nuxt which generates different filenames for each compilation! Having a well-managed cache will help your customers enjoy faster browsing, but also helps your site since the server that sends files to visitors will be less busy! This is a great way to optimize your website while saving money!

A static site

A static website has several advantages versus sites generated on demand by a server. As your site is already generated, it is one less step for the servers, which can simply return the files generated during compilation to your clients! A static site will therefore be more optimized than a site that must make requests to a database to load a page! With a server such as Netlify, as soon as a modification is made in your CMS, for example, the server knows it and launches a compilation of your website without stopping to serve your website, so once the compilation is done, the server will automatically change to new files without any downtime for your customers! The sites that I develop are all with this technology and I would be happy to allow you to benefit from this for your website too!

Modern JavaScript

JavaScript is the language that makes your site more interactive, without it your sites would be much less dynamic. The problem with JavaScript is that each browser has its JavaScript interpreter, whether on desktop, mobile, Explorer, Chrome, Safari, etc. Some features that work on Chrome may not work on an old version of Internet Explorer for example. To prevent having a site that could break in a browser, the compilers will add the missing functionality directly to your website, so whether or not your browser works with the desired functionality, it will still be on your site by precaution. It's good for having a stable website on all browsers, but if you're using an up-to-date browser that already contains the features, it becomes duplicate code. When we want to optimize our website, it's not very practical! This is why when compiling with Nuxt, for example, there is a way to ask it to generate 2 types of files, one which will continue to contain all the necessary functions and another considered modern, which will not double the functionality of the Navigator. When the browser requests your website files, if it is considered modern, it will load the files without duplicates, which will allow your pages to load faster for your customers with more up-to-date browsers! Modern JavaScript allows you to provide your visitors with smaller files, which means faster loading times! If a client visits with a browser that is not considered modern, they will be served the files as normal, with duplicates, to ensure your site does not encounter an error! With Nuxt, it's so easy to add this optimization since it's just a matter of enabling the feature and the rest is done by your visitors' browser. It is therefore a quick optimization to implement in a new site, without any inconvenience!encontre pas d'erreur! Avec Nuxt, c'est tellement facile d'ajouter cette optimisation puisque ça n'est qu'une question d'activer la fonctionnalité et le reste est fait par le navigateur de vos visiteurs. C'est donc une optimisation rapide à mettre en place dans un nouveau site, sans inconvénient!

Minify your files

Minification Another possible optimization for your website! The goal is to minify your files as much as possible when compiling. How? By removing spaces, line breaks, and comments, some even go so far as to change the variable names by letters, so instead of having a variable named 'myVariable' it will be replaced by 'aa' everywhere, this which makes your files a bit smaller by saving a few letters each place your variables are used! It's not uncommon to see a file minified on a single line, it's less readable for a human, but it doesn't make any difference for your browser! Again, this is an optimization that is inexpensive and allows gains!

Purging CSS

The CSS (Cascading stylesheet) represents the style of your website! Sometimes, especially when using style utilities, for example, you end up with unused styles. Purging the CSS is a simple step performed when compiling your site, which will erase unused styles from your files, so it is a step that will be done automatically and will allow you to optimize your website to make it a bit faster since this one won't have to return unused styles to your visitors!

Image preload

It often happens that a website must display an image at the top of your site, for example, a banner. To do this, your page must load completely before your browser sees that it needs to load an image. It is only then that he will fetch the image. There is now a new way to handle this case, which is very useful for the images that will be displayed to your visitors as soon as they arrive on your site. It is possible to preload the image in question by adding a link to the image at the very beginning of the page. This will tell your browser that the image in question should be loaded immediately since it will be used soon. The rest of your page will load normally, and as soon as the page renders to display the image, as it was preloaded, it can display without delay! It's a simple optimization that makes sure your page is displayed as quickly as possible! With a well-developed site thereafter, for example, this site, everything is done automatically for each page without having to indicate the necessary image. This is the kind of optimization that can make the difference for your current website or a brand new one at the cutting edge of technology! This is the kind of optimization that can make the difference for your current website or a brand new one at the cutting edge of technology!

To conclude, each point discussed will help to have a more optimal site, but it is by adding the optimizations that you will see the biggest difference on your website! If your current site does not take into account all these ways of doing things, you could lose potential customers. It is therefore important to do as much optimization as possible on your website! If this is something that interests you, for a new site, or to see if it is possible to improve your existing site, do not hesitate to contact me! It will be my pleasure to help you achieve your digital goals!