Many years ago, Google noticed the rapid growth of mobile Internet and decided to optimize its services for mobile users. Initially, two separate search mechanisms were created for desktop and mobile users. Smaller, faster and more mobile-friendly websites were created for the latter group. In 2018, there was a change in the way the Google ranking called Mobile First Indexing was built. Since then, most search results have been based on mobile versions of websites.
The best way to learn is by studying an example. For optimization, I have chosen a free Sentra template which we will try to optimize using Pulno. For testing purposes, I have created step1.test1.itsjustatest.net domain where I have placed the template and performed the PageSpeed test using the psi tool.
The result of the pagespeed score is 60. It is a rather weak result. We also get a warning that the score is below 70 points. 70 points is considered to be the threshold score. There are also a few problems that we can easily solve. Leverage browser caching - www server does not define how long the resources are to be cached, Optimize images - we can optimize the size of images. We also see a problem with rendering the page, a large amount of CSS and JS files required for rendering the page.
We use Pulno to perform the analysis. Once you have entered the website address move on to the detailed analysis of the main page by clicking on the link marked as / in the filter (scroll down on the main page of the audit)
From the analysis page, go to the Image optimization section.
The system offers to optimize individual images. It informs us that this will result in an image compression by additional 14-23 percent. Just click the Download button, download all the images and replace them on the target page. With chrome developer tools, we can check what the images size looks like after compression and whether the loading times of images have changed:
(step1 version before image optimization)
(step2 version after image modification)
You can see in the system that the size of image files has decreased, as well as the time it takes to load them into the browser.
You can also see an improved result on the psi test. The step2 version of the page with modified images received 65 points, and the size of the images dropped by about 160 kB.
The next step is to optimize the way CSS files are loaded. At the moment, by looking at the source of the page, we will see a few CSS files loaded in the header of the website. This means that the page will not start generating its view unless all files are loaded.
The system allows us to download the file that contains all the CSS code. The code is divided into the part used for rendering the page view and the one that is not used. There are several directories in the zip file.
The orig directory contains original CSS files. The uncss_page directory contains CSS files optimized only for a specific page, in this case for the homepage. The uncss_all file contains files optimized for all pages for which we performed a full analysis. Pulno_css_optimize_onfile directory contains two files used.css and unused.css which we will use for our optimization. One file contains all the CSS code, which was detected on all analyzed pages, while the unused.css file contains the CSS code, which was not used to display the page directly (it could be used later thanks to the JS or ajaxa insert).
Step3 is the next version of our website containing modifications of CSS files and font loading.
When comparing with the previous code, we can see that all CSS files have been replaced by one file used.css generated from Pulno.
At the bottom of the page, there is an entry that loads unused.css. This code is not necessary to display the page itself. Font loading has also been moved there. If we want the page to be displayed with the target fonts immediately, this piece of code should be moved from unused.css to used.css.
The subsequent psi analysis returned a score of 70 points. It also reduced the blocking of the rendering process from 32 points to 24 points.
The last problem to deal with is setting the caching of files by the browser. These settings can be controlled through the .htaccess file, which should be placed in the main directory of the website.
An example of the contents of a file may look like this:
Header set Cache-Control "max-age=2851200, public"
This means that files with the ico, jpg, gif, png, CSS and js extensions will be cached by your browser for 30 days. Due to this, it will not re-download files the next time you visit the website or the next time you visit a page.
After the last modification, we managed to score 79 points. This is a good result for only a dozen or so minutes of website modification.
Register now and speed your page up