How do you react when you open a website and it takes so long to load? Of course you will feel annoyed and immediately close the website. You are not alone. Because, according to Google, 53 percent of Indonesian internet users will leave a website that loads more than 3 seconds.
The bad experience of dealing with a long loading website like the one above should certainly be your consideration when creating a website. To provide the best user experience for website visitors, you must provide a website with high loading speed.
Why Google PageSpeed Insights?
There are various tools that can help you check website speed. Some of the website speed checking tools that you can use are Pingdom, Geek Flare, GTMetrix, WebPageTest, and Google PageSpeed Insight.
Google PageSpeed Insight (PSI) is a free SEO tool that provides the most accurate reports compared to other tools. In addition, Google PageSpeed Insight is a tool officially released by Google, so the assessment indicators used are in accordance with Google's standards.
Since November 2018, Google PSI officially uses Lighthouse technology. Previously, Lighthouse was a separate tool used to check website performance in the form of an extension on Google Chrome.
By making Lighthouse the main analysis engine, Google PSI can provide a more complete and accurate analysis. In addition, you don't need to download the extension separately to check website performance in depth. Simply open the Google PageSpeed Insight website page, you can easily check website performance.
How to Use Google PageSpeed Insights
The following explains how to use Google PageSpeed Insights step by step:
1. Go to Google's PageSpeed Website
2. Type in your Website Address
3. Get Analysis
Google will assess the loading speed of your website using a percent scale. A value of 0 to 49 percent indicates your website is slow. A value of 50 to 89 percent indicates your website speed has reached average. Lastly, a score of 90 to 100 percent means your website is fast.
4. How to Read Google's PageSpeed Analysis
In addition to analyzing website speed in general, Google's PageSpeed also describes its analysis into six parts. The six analyzes are Field Data, Origin Summary, Lab Data, Opportunities, Diagnostics, and Passed Audits. Here is the explanation:
- Field Data and Origin Summary
Field Data and Origin Summary are speed values based on First Contentful Paint and First Input Delay. First Contentful Paint is the time that the first image or text appears. Meanwhile, First Input Delay is the time interval between the visitor's first interaction (clicking on a link) and the browser's first response to that interaction.
Your website is considered fast if both FCP and FID values are high. If either FCP or FID scores low, then your website is slow.
- Data Labs
1. First Contentful Paint is the time at which the first image or text appears
2. Speed Index shows how quickly the contents of the page are clearly visible. The lower the value the better.
3. Time to Interactive is the first time that shows a page is considered fully interactive
4. First Meaningful Paint measures when the main content of a page appears
5. First CPU Idle indicates the first time a page visitor can input
6. Estimated Input Latency shows how long it takes for a website to respond to input entered by the user
- Opportunities
Opportunities shows what optimization steps you can take to increase website speed.
- Diagnostics
Diagnostics contains details of your website performance that have not been mentioned in previous analyses.
- Passed Audits
Passed Audits contains reports on what optimization steps you have successfully carried out.
4 Tips to Get a High Score on Google PageSpeed Insights
Google PageSpeed Insights will assess your website's performance on a scale of 0 to 100. A high score on Google PageSpeed Insights shows that your website is running according to the standards set by Google.
Of course getting a score of 90 to 100 on Google PageSpeed Insight is the goal of all website owners. In order to achieve this score, you need to solve the problems from the Google PageSpeed Insights diagnosis.
Each website certainly produces a different diagnosis because the content, themes, and configurations that are applied are also different. However, there are some of the most common problems encountered after checking Google PageSpeed Insights.
From the image size being too large, not enabling caching, to the performance of the mobile version of the website that is not optimal. Below I will explain how to overcome the four most common problems to get a high Google PageSpeed Insights score:
1. Image Optimization
Adding images to website/blog content is a great way to keep visitors from getting bored with the text and to help visitors understand your content.
Even so, images can also be the cause of slowness of your website. Images that are too large will drastically reduce website speed. Therefore, you need to compress the images that will be uploaded on the website.
There are various image compressor services that you can use to reduce the image size without compromising its quality. You can compress it before uploading it on WordPress using image compression services such as TinyPNG, ILoveIMG, Trimage, Kraken, and OptiPNG.
Apart from that, you can also do the compression process in WordPress by using a plugin. WordPress provides various plugins to help you solve your image optimization problems. Some of the plugins that you can use are Imagify Image Optimizer, ShortPixel Image Optimizer, WP Smush, and Optimus Image Optimizer.
2. Use Browser Caching
Cache is the process of temporarily storing data or HTML pages and images of a website to reduce bandwidth usage and server loading. In simple terms, cache is a technology that helps display web pages faster.
When visitors open your website for the first time, the browser caching system will store data on the pages that visitors open, from logos, images, to content.
That way, when a visitor opens your website for the second time and so on, the visitor's browser doesn't need to make a request to the server to display the same data. Because browser caching already stores this data on the visitor's computer so that it can display website pages faster.
To enable browser caching is quite easy. You can do this using the help of a plugin. There are many caching plugins on WordPress that you can choose from.
3. Minify HTML, CSS, and JavaScript
It's not just images that require compression. HTML, CSS and JavaScript code also needs to be compressed to optimize website speed through the minify process.
Minify is the process of reducing redundant or unnecessary data in HTML, CSS, and JavaScript without reducing the quality displayed in the browser. That way the browser will read the data on your website pages faster.
So shorter, right?
Look no further for the minify plugin as you can find it in LiteSpeed Cache. LiteSpeed Cache provides complete minify features, from HTML, CSS, to JavaScript.
4. Optimization of the Mobile Version of the Website
Keep in mind that smartphones have become the main device for accessing the internet. Statista data shows, in 2018 mobile devices have dominated website traffic by 52.2 percent and are expected to continue to increase.
In India alone, 94 percent of internet users admit to using mobile devices to access the internet. Of course this number is not a number that can be ignored.
As a website owner, you are required to provide a website that is fast and responsive on both desktop and mobile devices. Creating fast and responsive websites on desktop devices is probably what most people are used to.
In contrast to making websites fast and responsive on mobile devices. People's interest in this issue still tends to be low. In fact, according to a survey, in 2017 only 21 percent of online business websites have been optimized for mobile devices.
Maybe your website is one of the 79 percent of websites that are still not mobile-friendly. It doesn't matter because it's never too late to optimize your website for mobile devices.
How to optimize a website on a mobile device is also quite easy. You can use the WordPress mobile plugin to create a fast and responsive mobile version of your website....