Build Multilingual Websites with Gridbox

Build Multilingual Websites With Joomla Website Builder Gridbox

How To Increase Site Performance Score Up To 97/100 On Google PageSpeed Insights?

How To Increase Site Performance Score Up On Google PageSpeed Insights?

This is not a 6 - 8 simple steps article on how to increase performance score on Google PageSpeed Insights. And if you want to find a simple solution or standard formula about how to achieve high results by enabling few options, you won’t find an answer here. But if you are ready to work and study, welcome!

Introducing

Since Google announced that Site Performance it's important for SEO, we got tons of questions regarding Gridbox Performance Optimization and how to increase score on Google PageSpeed Insights.

To close this question, we have released Gridbox 2.8.6 with performance improvements. In Gridbox 2.8.6 we have added additional tools for the Gridbox Performance App with which we achieved high results on Google PageSpeed Insights. 97 for Mobile Devices and 100 for Desktop! Take a look at the results below.

Gridbox Demo on Google PageSpeed Insights

What has been done with our Demo site?

1. Enabled Gzip Compression in the Joomla Global configurations.

2. Enabled all Gridbox performance tools:

  • HTML, CSS and JavaScript minification;
  • Deferred Loading;
  • Lazy Load and Automatic Image compression for Desktop and Mobile devices;
  • Caching.

3. Google Fonts were replaced by Web Safe Fonts.


"Hey, I already enabled all Gridbox Performance Tools, but I can't achieve the same results, what I need to Improve?"

You don't have good results on Google PageSpeed Insights, because you are not enough care about the performance of your site! Each detail is important! It's all about the details!

You need to understand one simple thing - is not enough just to enable a few checkboxes of Gridbox Performance Tools and think that your site will get high results on Google PageSpeed Insights. Optimizing your site’s performance requires time and attention to each detail.

So, this article about details!

Cheap Hosting Vs. High Performance Score

What is the problem with a cheap (slow) hosting? You will not pass the “Server response time”.

Server response time is the amount of time it takes for a web server to respond to a request from a browser. The server response time should be no more than 200ms. or Google PageSpeed Insights will show you notice “Reduce server response times”.

Don't save on hosting! The fast server response is the base step to High Performance Score.

Simplicity is Your Key to High Performance Site

Gridbox allows you to embed one plugin inside another. That's amazing feature, absolute freedom of creativity.

But unfortunately, you very often abuse by this feature! Stop creating heavy structures! Tons of overlay sections with unlimited embedding cannot achieve high performance.

Stop creating heavy structures! Simple site structure - is Your Key to High Performance. The loaded truck will never run faster than a sports car. Just think about it!

High Performance Score Vs. High Resolution Photos

Non-optimized pictures are one of the most common issues. Absolutely each picture on the site should be optimized. Rules are simple! If your block width is 400px, the original size of the picture should be not more than 400px.

What's about the size of full screen pictures on the background? Let’s visit w3schools.com Browser Display Statistics. As you can see the most popular screen size is 1366x768. So, we recommend to use no more than 1400px, it will be enough! Don’t forget, that the background picture is a background picture. No reason to use high resolution photos since the picture will be placed under the content with overlay.

How to optimize pictures? Directly inside Gridbox, using Gridbox Photo Editor App, you can optimize (reduce) picture size and quality. Quality should be no more than 60-80%.

Yes, Gridbox Performance App includes “Automatic Image Compression”, but to get the best results, we recommend optimize each picture manually finding a compromise between size and quality!

Regarding pictures on mobile devices. Thanks to Gridbox Performance App, you can optimize all pictures automatically and it works perfectly. The max-width of the picture will be resized to breakpoint values. This means that the width of the image will be equal to the width of the device screen. The quality should be the same as on the desktop, no more than 60-80%.

Absolutely each image on the site should be optimized. Find a compromise between picture size and quality.

Google PageSpeed Insights Vs. Your Favorite 3rd Party Tools

Google reCaptcha, Google Maps, YouTube videos, 3rd party CallBack forms… Awesome! But do you know how these tools down-score your site on Google PageSpeed Insights?!

All these 3rd party tools have 1 big disadvantage - external sources CSS and JavaScript files which seriously can slow down your page.

Let's do an experiment! One by one we will add some of them to our Demo Site and check how each 3rd party tool down-score our Demo site on Google PageSpeed Insights.

Scores before the experiment: Mobile 97 and Desktop 100.


Google Maps

Google Maps and Google PageSpeed Insights


YouTube Video

YouTube Video and Google PageSpeed Insights


Font Awesome Icons

Font Awesome Icons and Google PageSpeed Insights


The optimization score for mobile devices is seriously going down.

But, what's to do? Find alternatives! Google Maps can be replaced by a screen of the map with a direct link to the Google Maps website. Gridbox plugin video allows you to enable “Lazy load” for YouTube videos. Font Awesome Icons can be replaced with built-in Material Icons. If don’t like material icons, upload custom icons. For everything, you can find an alternative solution!

Built-In Gridbox CSS Animations

Now, it’s time to test our own libraries - CSS Animations and Parallax. Let’s take a look on results below.


Animations

Animations and Google PageSpeed Insights


Parallax

Parallax and Google PageSpeed Insights


As you can see Gridbox animations and parallax don't score down results on Google PageSpeed Insights. You can use animations on your site. But don't forget about usability. Jumping sections and columns looks very strange in 2019. Visitors come to your site to get information, service or product. Crazy jumping items only waste visitor time.

Conclusion. Performance Optimization Starts With a First Added Section and Never Ends

Performance optimization is not just a part that should be done after site releasing. About performance optimization, you should think when you add your first section in Gridbox or draw site mockup in your notebook. It's all about the details! And we showed you how small things like an icon can seriously score down results on Google PageSpeed Insights.

Gridbox is a highly optimized website builder and our results on Google PageSpeed ​​Insights show this fact. It all depends on how you building websites! If you start thinks about performance optimization from the first added section, success will be on your side! Site performance optimization never ends!