What is PageSpeed Insights? : Explaining Measurement and Improvement Methods
contents
- 1 What is PageSpeed Insights?
- 1.1 How to Use PageSpeed Insights
- 1.2 Page Speed Improvement Examples
- 1.3 Lossless compression of images
- 1.4 Converting Images to WebP
- 1.5 Optimizing HTML
- 1.6 Minimizing css and javascript
- 1.7 Removing Unused Fonts
- 1.8 Optimizing Google Tag Manager
- 1.9 Other Page Speed Improvement Methods
- 1.10 Utilizing Browser Caching
- 1.11 Using gzip Compression
- 1.12 Switching Servers
- 1.13 GTmetrix.
- 1.14 Google Chrome.
- 2 Summary
According to overseas research data, “47% of consumers desire web pages to load in 2 seconds or less,” and “a 1-second delay results in a 7% decrease in conversions.”
Furthermore, it’s understood that page load speed affects the behavior of mobile users. To ensure that users view content until the end, it’s desirable to speed up the loading time of web pages as much as possible.
While you may wonder how to evaluate and improve page speed, Google offers a free tool called PageSpeed Insights to measure page speed. We will explain how to use PageSpeed Insights and methods for improving speed.
What is PageSpeed Insights?
PageSpeed Insights is a tool provided by Google for measuring the speed of website display.
How to Use PageSpeed Insights
Using PageSpeed Insights is very simple. Just enter the URL of the webpage in the “Enter a web page URL” section and click “Analyze.” The analysis takes about 1 minute to complete, and the results are displayed numerically.
Meaning of PageSpeed Insights Scores
- ▲ 0 to 49: Slow page speed. Improvement is desired.
- ■ 50 to 89: There is room for improvement in page speed.
- ● 90 to 100: Page speed is sufficiently fast.
Scores are presented in three levels, but it’s not necessary to achieve a perfect score of 100. As long as the speed is sufficient for users, scores above 90 should not require special attention.
Since there can be significant differences between scores on desktop and mobile, it’s strongly recommended to check and improve them at least once after creating a site.
Improvement Suggestions from PageSpeed Insights
A great feature of PageSpeed Insights is that it doesn’t just give you a score; it also suggests items that can be improved.
Even if your mobile score is as low as 19, it shows a list of what needs fixing. While you might not be able to address everything, it’s a big help in making improvements.
SEO Effects of Page Speed
Some claim that increasing page speed improves search rankings, hence has an SEO effect. However, it’s a common misconception. It’s not that faster speeds directly boost rankings, but slower speeds can lower them. So, the idea that faster is always better for rankings is incorrect.
Yet, even if there were no direct SEO benefits, enhancing user satisfaction could lead to increased conversions, longer site visits, and better navigability, which might indirectly boost rankings.
Remember, while improving page speed might help rankings if your scores are very low, for many sites, page speed and ranking aren’t directly linked.
Page Speed Algorithm
In July 2018, Google implemented what’s called the Speed Update to its algorithm. This update doesn’t raise rankings for fast pages but lowers them for slow pages, depending on the degree of slowness.
This algorithm is still in effect as of 2021, so quick improvements are desirable if your page speed is extremely slow.
However, keyword relevance is still more important than display speed. Content that’s engaging and highly relevant to search queries can achieve high rankings even if it loads slowly. Creating high-quality content remains crucial.
Page Speed Improvement Examples
Let’s look at an actual example of page speed improvement.
While not all sites may achieve a perfect score of 100 due to Initially their structure and design, this example significantly impacted the user experience.
The improvements needed to be made quickly, so we focused on tasks that didn’t require much effort. Remember, the goal isn’t necessarily to score 100 but to enhance the user experience. Therefore, we prioritized effective and low-effort improvements.
Here’s what we did
- Lossless compression of images
- Conversion of images to WebP
- Optimization of HTML
- Minimization of CSS and javascript
- Removal of unused fonts
- Optimization of Google Tag Manager
Lossless compression of images
The site in question was built around 2016, and it seems the development company didn’t prioritize load speed, resulting in many images between 2MB to 3MB.
We used lossless compression on JPG and PNG images, achieving a file size reduction of 20% to 80%.
We used a tool called tinypng for compression. It’s incredibly easy to use – just drop your images in, and it compresses them effectively, making it a great option for bulk image compression.
For WordPress sites, while the EWWW Image Optimizer plugin can compress images site-wide, its compression rate isn’t very high. tinyong may not always offer the highest compression rate, but it achieves significant reductions.
Converting Images to WebP
WebP is considered a next-generation image format, allowing for higher compression than PNG, which helps reduce file sizes significantly.
However, some browsers, like Safari, don’t support WebP, so after converting images to WebP, you might need to write HTML or set .htaccess to serve either the standard image or the WebP version depending on the browser.
For converting images to WebP, we used a tool called syncer .
What is the next-generation image format WebP?
Optimizing HTML
Although optimizing HTML might not always lead to significant compression, it can have a noticeable effect depending on the site.
For this particular site, we made adjustments from three perspectives: enhancing SEO effects, improving visibility (ease of management), and increasing load speed.
- The HTML had numerous comments.
- Image height and width attributes were missing.
- The alt attributes for images were also empty.
- The HTML was not minimized.
Much of the work involved manual code editing, but since this was a WordPress site, we used the Autoptimize plugin to minimize the HTML.
Minimizing css and javascript
CSS and JavaScript are files that, once created, rarely need to be altered. Therefore, we backed them up and then minimized them.
For this, just like with optimizing HTML, we utilized the Autoptimize plugin.
Removing Unused Fonts
A common issue with sites built using templates is that they often preload fonts “just in case.”
If a font isn’t being used, there’s no need to load it, and in some cases, removing these unused fonts can significantly affect load speed. So, we removed any unused fonts.
Optimizing Google Tag Manager
Google Tag Manager is an incredibly useful tool, but over time, codes that were once necessary might become obsolete. By reviewing and deleting any settings that are definitely unnecessary, we were able to speed up the site.
A significant issue was the Tag Manager codes embedded by the site development company. Often, development companies embed their own Tag Manager at delivery, which the recipient cannot control. This was particularly burdensome, so we obtained permission and removed them entirely.
Other Page Speed Improvement Methods
While we’ve tried the main improvement methods in the above example, there are others we didn’t get to try due to specific circumstances.
Utilizing Browser Caching
Browser caching is a feature that saves data from pages you’ve visited on your computer. When you revisit the same page, it loads the data from your computer, speeding up the process.
A common way to use browser caching is to embed the following code in your .htaccess file. This may not work depending on your server’s settings, but it works in most cases.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif “access plus 1 months”
ExpiresByType image/jpeg “access plus 1 months”
ExpiresByType image/png “access plus 1 months”
ExpiresByType image/x-icon “access plus 6 months”
ExpiresByType text/css “access plus 1 months”
ExpiresByType text/javascript “access plus 1 months”
ExpiresByType application/javascript “access plus 1 months”
</IfModule>
Using gzip Compression
gzip is a method that compresses html, css, javascript, and other components of your site to reduce data size, potentially improving performance.
You can use it by embedding the following code in your .htaccess file, but check if your server can use the deflate module first.
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI ¥.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
AddOutputFilterByType deflate text/plain
AddOutputFilterByType deflate text/html
AddOutputFilterByType deflate text/xml
AddOutputFilterByType deflate text/css
AddOutputFilterByType deflate application/xml
AddOutputFilterByType deflate application/xhtml+xml
AddOutputFilterByType deflate application/rss+xml
AddOutputFilterByType deflate application/javascript
AddOutputFilterByType deflate application/x-javascript
AddOutputFilterByType deflate application/x-httpd-php
AddOutputFilterByType deflate application/x-font-ttf
AddOutputFilterByType deflate application/x-font-woff
AddOutputFilterByType deflate application/x-font-opentype
</IfModule>
Switching Servers
In cases where the rental server itself is slow, changing servers can dramatically improve performance.
While moving from a shared server to a dedicated server is an option, dedicated servers can be complex to set up and challenging to migrate to. Therefore, switching to a cloud server or simply a faster shared server can be a viable solution.
Page Load Speed Measurement Tools
While Page Speed Insights is an excellent tool for measuring page load speed and is often sufficient, it doesn’t necessarily identify all potential issues or areas for improvement.
If you’re not seeing the expected improvement in scores, using another tool to find areas for enhancement can be effective.
GTmetrix.
GTmetrix is a free tool from abroad that’s user-friendly and intuitive, requiring only a URL to use. It evaluates page speed on different criteria than Page Speed Insights, making it easier to find new areas for improvement and highly recommended.
test my site.
test my site is another free tool offered by Google. While Page Speed Insights may be more user-friendly, test my site evaluates from a different perspective, which can provide additional insights for improvement.
Google Chrome.
Google Chrome is known as a browser, but the Developer Tools you can access by pressing F12 provide a wealth of information. While it’s more of a tool for those with advanced knowledge, mastering it allows you to identify issues not visible in Page Speed Insights.
We’ve focused on using Google’s free Page Speed Insights for improving page load speed.
Summary
It’s clear that while page speed and SEO effects don’t always directly correlate, improving page speed is undeniably crucial for increasing inquiries and is a vital area for enhancement. We’ve covered the main points of improvement, but it’s common to be unsure of your site’s specific issues or how to address them even if you do. In such cases, please consider consulting with Tokyo SEO Maker.