The following blog post was written by one of our long time members Niels Klint (known as KlintWeb on the forums). We value him as a member and greatly appreciate that he took the time to write the following post. He explains how he achieves 100% pagespeed score and 100/100 for both the mobile and desktop pagespeed tools using Shape5 templates:
"When my website https://klintwebdesign.dk
, needed a new design, I would simultaneously try how far we can go by optimizing SEO, Page Speed - and AMP, which is ongoing too. I have used templates from Shape5 for many years and was no doubt that it should be a template from them again. With Vertex they have a good framework to work with. Page Speed performance has been better than I dared hope for. And when CloudFlare comes with also, it can hardly be better. Although it will always be able to vary slightly depending on network traffic.
1. You can see the test here for GTmetrix and screenshot below https://gtmetrix.com/reports/klintwebdesign.dk/EGRnc8Cp:
2. Here is a screenshot of the results on Google Page Speed:
3. Lastly here is a picture of the results on Pingdom.com:
How to achieve these results?
The first precondition for achieving good Page Speed is a good host. My site is hosted by SiteGround - GoGeek with server location in Amstedam, Netherland, because it is the nearest location in relation to Denmark. And, of course with SSL / HTTP2 which is free with Let's Encrypt The template Big Business satisfied the second condition - the code is written so that the site can be optimized with available extensions.
I have used Akeeba Admin Tools for security and optimization of database - optimization of tables and managing database collation to utf8mb4. And last but not least a .htaccess file, which both used to improve security and to control the browser cache and ETTags and forced GZip compression of distorted Accept-Encoding headers etc.
With JCH Optimize Pro I have partly optimized all images and combined some of the background images to sprites. And partly combined and minimized Java and CSS scripts and minimized the HTML code. Missing width and height attributes to
elements can also be added with this extension.
Open Graph and Twitter Cards integration is made with template overrides. They are made so that there is one og: fallback image if a single article should be missing it.
By hosting the analytics.js file for Google Analytics at the server, it can be added to the browser cache. The file gets updated twice a day with a CRON job. And the script for the analytics tracking has been inserted at the bottom of index.php
The results show clearly that the templates and Vertex from Shape5 meets all preconditions to achieving absolute best performance for Page Speed. So I am very pleased and will certainly continue to use them in the future."
- Niels Klint
In addition to all Niel has added above a quick .htaccess edit to help page speed can be found here: https://magazine.joomla.org/issues/issue-june-2012/item/787-htaccess-File-That-FREAKIN-Works