Why is it so important to speed up a website? There are many reasons – creating a better impression on your target audience, improving user experience and comfort, more reliability, saving precious time, etc. However, the most important one in this case is also the most obvious one – we must be faster than our competitors. So check how to improve website speed.
IMPORTANT ISSUES CONNECTED TO SPEED
First, it should be noted that the quality of a website is evaluated by Google and has an impact on a number of important factors, such as the efficiency of Google Ads, the selection of the right ad for the specific website, the consent for the publication of an advertisement as well as the position in the ad ranking system. In the process of approving Google Ads as well as later on during the campaign, there is an evaluation of how well the website “conforms” with the given advertisement. The reason behind this is that Google wants users to be able to quickly find what they are looking for. How quickly a website responds is one of the key elements reflecting its quality. This is true not only for the desktop version of a site, but the mobile form as well.
Nowadays, with the popularity of smarthpones and tablets, it is imperative to provide a smooth experience on every popular platform. An increasing number of other devices, such as smart TVs, also provide access to the internet as an additional functionality and should be able to run websites without issues. Furthermore, it’s worth mentioning the two main tools used by Google when verifying an ad. These are PageSpeed Insights and Mobile-Friendly Test. The first one analyzes the content of a website and suggests ways of improving its speed. The second one verifies whether mobile device users encounter problems when visiting a website. The tools are very simple to use – the only thing the user needs to provide is the website url. In exchange, we receive a lot of data that we can use to improve the behavior of our website.
Some theoretical information
To speed up a website, it is best to begin by checking its current parameters, you can do it here.
Website speed consists of 5 main elements:
Time to Interactive (TTI) – 33.3%
Speed Index – 26.7%
First Contentful Paint – 20.0%
First CPU Idle – 13.3%
First Meaningful Paint – 6.7%
These are the five metrics that are taken into account. As you see, the first (TTI) is the most important one (33.3% value of the overall performance score).
The improvement of these metrics and the elimination of errors will cause a number of benefits, including:
faster loading – improved website speed
better SEO results
Let’s get down to work!
What strategy should we use for page / score optimization?
Time to Interactive (TTI) is the most impactful metric related to performance score. TTI is directly associated withjavascript code / plugin load time.
To have better (faster) TTI, we recommend to:
identify which javascript scripts suffer from a long loading time / are not efficient / took a long time to finish executing
optimize it / optimize its loading time / remove it entirely
How to test Performance score locally?
First, we usually apply some optimization, and we want to check performance score immediately after to verify if optimization helped. Just use Chrome /DevTool / Audits:
open your browser in incognito mode
click the ‘Audits’ tab
check the following Categories: ‘Performance’, Device ‘Mobile’ – click Generate Report
Original PageSpeed Insights use similar ‘Lighthouse Engine’ to calculate the score. Therefore, checking Chrome Audits should give you an idea whether optimizations are going in the right direction.
Which execution ofjavascriptscripts should I optimize?
again – init ‘Generate Raport’ -> Chrome / DevTool / Audits
click ‘View Trace’ (the button is located below the score numbers)
click ‘Event Log’ tab
click the ‘Start Time’ column to sort javascript execution from the most recent one
now you can scroll down to see the scripts that are executed at the very end of the page loading process. Those should be optimized to improve TTI.
What is not important or can be ignored?
PageSpeedInsights shows different “Opportunities” / Remarks that, in theory, should provide some help. Unfortunately, that’s not true. Most of the time, those remarks are difficult to implement and have 0 impact on the total score.
Therefore, such ideas like: Defer offscreen images, Remove unused CSS, add afficient cache policy, avoid excessive DOM size – have no practical sense. As such, they can be or even should be ignored. Why bother wasting time on things that don’t work?
Practical tips
GoogleTagManager – don’t load it for PageInsights Crawler
GTM is inefficient most of the time (it includes too many tags / events) and obscures the total score. We can use this snippet, but PageInsights will not load it
<script>
if(! navigator.userAgent.match(/nsights|ighth/i)){
// javascript code here
}
</script>
Identify the part of the js code with long execution time. Don’t load it initially, only on demand (for example, when the user scrolls down to a particular section, or after clicking a button).
Recommended plugin: https://github.com/stutrek/scrollmonitor
Identify elements loading at the end. Let’s say we have a popup that is loading at the very end of the page loading process. Undoubtedly, this will increase TTI time (we have to wait for the popup to be loaded and displayed)
Top comments (0)