How to gain a score of 100 points?

How to gain a score of 100/100 points in Google Page Speed Insights tool?

 It is very easy. It requires to fulfill at least two of the elements:

1. Optimization of your website – to do that we are going to use a few extensions to help us with that.
2. Very good hosting server – to achieve the shortest server response time.

The aim is clear. We put on a simple website based on Joomla!. We optimize it in the shortest time possible to get a 100/100 score after the Google Page Speed Insights analysis.

General information

What does the Google Page Speed test give us?
For the website itself, it gives us the general information about the loading speed of the website and its usability (mobile) for the users. The website speed affects primarily the experience of the users browsing the website content. The longer the website is being loaded, the higher possibility of user’s resignation from further browsing other subpages and as a result, there is less chance of selling our products. Unofficially, it is also said that the high score of this test has a real impact on the position of your site in Google search. But yet, no one can truly say how big and how true this is. However, we can clearly state (Google itself officially reported this) that the negative impact on the position is lack of responsive page – not adapted to mobile devices.

The test results in Google Page Speed Insights are influenced by different page elements, for example:

• Website picture optimization
• Website cache
• Server response time
• CSS, JS and HTML code compactness
• Render-blocking JavaScript and CSS from the visible part of the screen

All the elements above (and not only) have a real impact on the test results. It is said that 85/100 score is already a good one that positively influences the site positioning.

The latest version of Joomla! CMS in 3.7.3 version (the latest stable version for 5th July 2017) has been installed on our website. The standard template “Prostar” has been used and adjusted- styled according to own appreciation. Additionally, a few extensions has been installed to help us in good website optimization:

• JHCOptimize free version – there is a possibility to use the paid version (JCHOptimize PRO) that let us make some things faster and automatically
• Easy jQuery

The 1st step – Hosting choice and istallation

One of the most common errors after the Google PageSpeed test is a long server response time. The effect on this parameter is usually when choosing a host or by changing the parameters of the same hosting server.

Smarthost.eu has been chosen to be a hosting provider in our test and we have purchased the base-www hosting package for 29 € net annually.

The standard settings for such a server are PHP5.6 and the disabled memcacheD module which is available in PHP7.1. In such an environment, a clean installed Joomla achieves a Google PageSpeed score of 86/100 points for computers and 76/100 points for mobile devices.

As for the above result, it is quite good for computers, but it is not sufficient for this test. And the test for mobile devices leaves little to be desired …

So let's start with the proper configuration of the server. As you may have guessed, you need to set up PHP7.1, which is definitely more efficient than older versions of PHP, not to mention that it is just a lot safer. In addition, you should enable the PHP module called memcacheD, which is recommended by smarthost.eu for caching cache. As a result, it significantly speeds up the server’s work, on which the website is located. After this procedure, the test result should be a little better.

The 2nd step – Initial optimization

Joomla! itself has a cache support. If the components or modules have been properly written by the developers, no additional code modifications or enhancements are needed. Most of this process can be simply configured in the backend of the administrator.

Let's start by renaming the htaccess.txt file to .htaccess in the main Joomla! catalogue. Renaming a file allows you to run simple URLs on your site and let us to enable compression. For this standard file, you should add a few lines to resolve issues with Google PageSpeed associated with browser cache with no compression enabled. Write the following lines of code at the very top of .htaccess:

The first part of the code is responsible for enabling GZip compression and the second part for the browser's cache. In order to fully benefit from the .htaccess in Joomla! configuration, you need to enable "Search Engine Friendly URLs" and you can use URL rewriting right away.

Then you have to go in the backend of the page to "Global Configuration" -> "Server" -> "Server Settings" and turn on "Gzip Page Compression". When we open the "Global Configuration" -> "System" -> "Cache Settings" tab, we can configure the use of cache. We have a file cache support and a MemcacheD PHP module - it is important to point out that this is an experimental option.

When configuring cache settings, regardless of whether the support will be based on files or memcached, set the "yes" option to "Cache platform" and choose a setting for "Cache". This latter option can be enabled in two modes of "conservative" and "progressive" depending on needs. In our case, the setting "On - progressive level" has been chosen.

Also, remember to enable the cache plugin, which is disabled in Joomla! by default. In the Administrator's back, go to "Extensions" -> "Plugins". Look for the "System - Page Cache" plugin on the list, and turn it on firstly, and then, set the "Use Browser Caching" setting to "Yes".

 The 3rd step – Additional plugings

This step can be done entirely manually, by looking at the code of template files and strings, by passing JS and CSS declarations from the <head> section to the <body> section just before the </ body> tag. Such operation requires a good knowledge of the entire CMS Joomla! One thing is certain, without the programmer it will be a very hrd thing to do... but it is possible to use the plugins mentioned above. By installing add-ons we are able to practically curl most of the settings we need. JCHOptimize is an add-on that is able to do a lot. In its free version we can speed up the caching, enable the minification of HTML files, improve the compression of CSS and JS files. Pro version also allows to enable CDN support or optimize images.

Easy jQuery allows to resolve conflicts in JS scripts. Where do they come from? When installing various additional elements on your site, you may find that a particular module and component use different versions of jQuery. They will not use the jQuery.noConflict () rule, etc. This situation most commonly leads to console errors in the browser and page loading errors.

 

 

 

 

Both plugins need to be enabled and configured appropriately. For Easy jQuery this is pretty trivial, because you just need to select the jQuery version and possibly include an extra jQuery UI library. The plugin itself will suggest choosing the latest versions of these libraries. In case of JCHOptimize, the configuration requires the user to have a slight interest in the topic. The appropriate setting for JCHOptimize will depend on the number of elements we use on the page, the template framework used, and the additional extensions. Each of these elements must be written by the developer properly so that JCHOptimize can handle the application of the settings we require.

Above, you can read the most important optimization settings. Linking CSS and JS to individual files affects the number of requests that are made to the server. Google PageSpeed will not let us know about the need for "CSS and JS Compact." Enabling this option in the plug-in is trivial, there are additional settings below that allow you to minify HTML itself or use "Try-catch" for possible JS script errors.

There are some suggested settings above the screen; according to the site you need to remember a few additional elements:

1. Each site requires pre-optimization analysis.
2. If you use a free version of JCHOptimize and there are no effects in the optimization, it may be caused by badly written extensions that you use. You may want to try JCHOptimize Pro, but it is the safest to change the wrong extension.
3. You need to pay attention to what template you use, using popular template frameworks make it easier to control the minification of CSS files that are compiled by the framework from the LESS files.

 

 The 4th step – Customizing images

One of the most common mistakes made is not optimizing the images on your site. Google PageSpeed test takes into account the high resolution images displayed on your mobile device. Fortunately, with the help of HTML5 standard, we can use the <img /> tag with the appropriate attributes so we can adjust the graphics to RWD. How do you do that? When adding pictures in the article, you should keep the HTML syntax appropriate. For example:

 

 The 5th step – Conclusion

Once we have done all the above steps correctly in the installed Joomla!, we achieved a 100/100 score on the Google PageSpeed test.

 

The test above is an example of how to properly optimize your website based on CMS Joomla!. However, each site requires an individual approach and analysis.

Check out the test results for this site based on CMS Joomla!

 

 

Optimization procedure was developed by Noras.

Translated by Rafał & Monika