Website optimization for GooglePage Speed ​​(all features are taken into account after its update) Part 1

This article will be interesting, who faced all sorts of problems after updating Google PageSpeed ​​and claims from customers or the boss, why a ball fell or there were so many comments. As well as those who optimize sites.
First of all, it is worth mentioning that in this article , in my opinion, everything is very competently and reasonably written.

I will add more practical advice from myself, and it will also be interesting to listen to your point of view and see your achievements.

I will list what I will talk about in this article:

1. CSS and JS
   
   • file connection
   • library loading
   • tricks
   
   
2. Fonts
   
   • font connection
   • display fonts during page loading
   
   
3. Images
   
   • different formats (jpg, png, webp, base64)
   • sprite

And if you have stayed on this article up to this point, then you are most likely interested (or you have the back button on it). Below is more detailed about each item.

CSS and JS

Js

1. Mandatory will be the async property for connected scripts (except jQuery). This will relieve you from GPSpeed ​​comments on asynchronous script downloads.
2. The advice is banal, but it is very sensible - try to use complex and massive libraries to a minimum.
3. Your js library settings (slick, fancybox) or small code snippets that perform different tasks are best uploaded to the server with one file. In my case, and a script for sending mail, and a mask for input and animation, and everything is all in the same build.js file (which I also specify async .
4. This advice is situational, that is, under the situation, see. If you have a script running right after opening the page on its first screen, then it will be more correct to connect it separately and not give it async

CSS

1. It's a little more complicated here. You will need to add this property to the link tag.
   
   

   <link media="none" onload="if(media!="all") media="all"" rel="stylesheet" type="text/css", href= main.css> 

   
   In this form, your css files will be connected only after the DOM tree. Roughly speaking, this is the same async only for .css
2. Very important and effective advice! It adds 5 to 10 points guaranteed. You need to split your main.css into two files . In the first there will be only those styles that are loaded for the content that is visible immediately after opening the page. This is the top bar, header, first picture, first form, and so on. In general, what you put on the "face" of your site. In the second, everything else.

Fonts

I discovered a new css property for fonts

 font-display 

Specifically, its swap parameter, which, without waiting for your beautiful and heavy font to load, shows the text in the browser using the font built into the same browser (for example, sans-serif). This immediately removes one of the errors in GPSpeed.

It will look like this

  @font-face { font-family: 'FontName'; src: local('FontName'), url('FontName.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } 

There is also such a script (for its work you need to connect fontfaceobserver.js):

 <script> var html = document.documentElement; if (sessionStorage.fontsLoaded) { html.classList.add("fonts-loaded"); } else { var script = document.createElement("script"); script.src = "../js/fontfaceobserver.js"; script.async = true; script.onload = function() { var regular = new FontFaceObserver("FontName"); var bold = new FontFaceObserver("FontName", { weight: "bold" }); var light = new FontFaceObserver("FontName", { weight: "300" }); Promise.all([ regular.load(), bold.load(), light.load() ]).then(function() { html.classList.add("fonts-loaded"); sessionStorage.fontsLoaded = true; }); }; document.head.appendChild(script); } </script> 

Personally, I did not really help, but you try it, maybe you can better manage it. After all, I found it in the open spaces, and people said that it really helps.

Connection fonts

1. There are basically two types of connection - using a link (for example, google fonts, or locally, on a server. So, regarding the second method, it can also be divided into 2: a separate css file (using link we connect fonts.css ) and directly through the code (via your style.css).
   And since now we are talking about optimizing the site for GPSpeed, I was convinced that it is better to connect the fonts through your main css file.
2. And one more tip that helps - put the font files (woff, ttf, etc.) next to your css file that requests it. Previously, I had a separate folder on the server for fonts, but then I moved their font loading speed increased by 2 times. (according to GPSpeed, the connection of the Muller font used to take 180ms, now 70-90ms)

Images, pictures, etc.

Over the next 2 councils I vouch, they helped not only me, but the entire office and even friends working remotely.

1. Download absolutely all <img > images using lazyloading. It will look like this

 <img class="yourClass lazy" data-src="../images/image.jpg" alt="Описание"/> 

And do not forget to connect lazyload.min.js

2. If you have a lot of sv g elements on the page, then it is better to add them with clean code , without unnecessary reference to the img tag. In addition, svg must be squeezed, for example, using this site jakearchibald.imtqy.com/svgomg (not advertising).

3. Trite, but do not forget to squeeze ALL the pictures on the site. Even those that weigh 5kb. Although these 3 KB which you win will not affect the download speed in any way, you will get rid of the error on GPSpeed, and add yourself up to 10 points.

! Now the problem point - image formats. Namely, we care about webp, jpeg 2000, jpeg xr . After all, this is now one of the recommended GPSpeed ​​fonts. As you know, they are still not supported by some browsers, among which is quite popular Mozila Firefox. Even though they announced that in March there will be full support for this format, we still have to wait another year until all the users of this browser are updated to the latest version ... I rummaged through a bunch of websites, a bunch of scripts, but found nothing sensible. So now it's my time to ask you: do you use webp format or any other new image formats? And how do you do it?