Google PageSpeed Insights

Google PageSpeed Insights (GPI) is a free online performance tool by Google that allows you to analyze the user experience on a webpage. It evaluates the page load  metrics on PCs and mobile devices and provides suggestions on how to optimize the page performance.

Site traffic

If your site is frequently visited, then its resources are cached on the server. Flexbe stores users' sites on several servers to provide fault tolerance, and automatically decides which server suits best at the moment. Every server has its own cache that is stored separately for each individual site.

The more traffic your site gets, the more likely it is that all its resources will be cached and therefore will load  very quickly. If you have just finished editing the page (by adding some new images or changing the speed optimization settings of your site), then the cache will get outdated and it will take some time to save the  site data anew.

Total page size

If there are too many sections and elements on the page (even if they are hidden in the tabs), or there are pop-ups (even those you don't use), it all affects the Avoid an excessive DOM size metric. Our developers do their best to use as few DOM elements as possible, but any minor detail on the page creates several DOM elements.

For example:
Let's say you have a simple text element on the page. It is made of several DOM elements, such as a container to position and size the element, a container to animate the element, an element that specifies the SEO-tag, etc.

If you highlight a word in this text element with a different color, then this word gets wrapped with an additional DOM element to which the color is applied. A link in the text also counts as an additional element with extra DOM elements. Thus even a seemingly small site can contain several thousand elements.

To improve the  Avoid an excessive DOM size metric, you should create simple and visually light pages that are not overloaded with content. If your page is made of too many sections and elements, it would be better to divide it into several pages.

There are metric values that you can influence and those that you cannot affect.

Largest Contentful Paint is one of the most important metrics that strongly influences the final score. On page load, the above-the-fold content should be rendered immediately and not changed afterwards. And here arises a contradiction.

Google expects the content above the fold to load faster than any other content on the page. But, if the above-the-fold content includes any graphics (images, videos, logos, etc.) or any complex logics (for example, an image slider), then all the needed elements should be loaded before page rendering and as soon as possible.

However the block load negatively affects another, even more important metric value: Total Blocking Time. For example, if the first contentful paint has a background image, and  the lazy loading of images is enabled, then GPI will most likely consider the lazy loading of images an issue.

On the other hand, if such images are loaded first, then it may end up in the fast rendering of the above the fold content and the broken layout of the page content below the fold. The GPI score will be high but the actual users' experience will be negative.

To improve the Largest Contentful Paint metric value:
— avoid using any graphics in the first contentful paint,
— avoid  adding videos and sliders in the first section of your site,
— compress any graphics as much as possible (a common issue is using GIF for logos).

The following metrics can be affected only by the Flexbe developers:

• Reduce unused JavaScript
• Reduce JavaScript execution time
• Minimize main-thread work
  

Here is a list of recommendations you can follow:

• Do not overload the first contentful paint with graphics and content. Do not use sliders and videos for the above-the-fold section background.

• To improve the Avoid an excessive DOM size metric, create simple and visually light pages that are not overloaded with content.
  

• Use optimal image formats. Avoid using PNG and GIF images. Disable image compression only when you are sure that you have properly optimized the images before uploading them.
  

• Do not embed any third-party code snippets before the closing head tag on the page.
  

• Generally avoid using any third-party code snippets as they can often load a lot of third-party resources to the page, which slows down the page load.
  

• Use the Enable cover with play" button option for videos. In this case, videos will load only after clicking the preview.
  

• Upload your own videos directly from your PC. Avoid using videos from YouTube as, in this case, the third-party service will upload its frames to your page.
  

• Optimize your own videos for the web. We recommend using images up to 1 MB. Avoid videos in the slider.
  

• Delete unused pop-ups in the Popups tab.
  

Even if you meticulously follow all the recommendations above, you shouldn't expect 100 scores from Google PageSpeed Insights. Our tests have shown that even completely empty pages with a couple of text elements do not get full scores.