Jump to content

Google PageSpeed Tools: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous edit
Content deleted Content added
VisualWikitext
m →External links: replaced: External Links → External links
Added additional information
 
(36 intermediate revisions by 32 users not shown)
Line 4: Line 4:
{{Advert|date=March 2022}}
{{Advert|date=March 2022}}
}}
}}
'''Google PageSpeed''' is a family of tools by [[Google|Google Inc]],<ref>{{Cite web |title=About PageSpeed Insights |url=https://developers.google.com/speed/docs/insights/v5/about |access-date=2022-08-13 |website=Google Developers |language=en}}</ref> designed to help a [[Web performance optimization|website's performance optimizations]].<ref>{{cite web|last1=Ivanovs|first1=Alex|title=PageSpeed Module: Improving Your Websites' Performance|url=https://huffingtonpost.com/alex-ivanovs/pagespeed-module-improvin_b_5130698.html|website=huffingtonpost.com/|date=16 April 2014|publisher=The Huffington Post|access-date=23 March 2015}}</ref> It was introduced at [[Google I/O|Developer Conference]] in 2010.<ref>{{cite web|last1=Kerner|first1=Sean Michael|title=Google Speeds Up the Web with Apache Web Server Module|url=http://www.serverwatch.com/news/article.php/3911511/Google-Speeds-Up-the-Web-with-Apache-Web-Server-Module.htm|website=serverwatch.com/news/|date=4 November 2010|access-date=23 March 2015}}</ref><ref>{{cite web|last1=Ram|first1=Ramani|title=Page Speed Service: Web performance, delivered|url=http://googlecode.blogspot.com/2011/07/page-speed-service-web-performance.html|website=googlecode.blogspot.com/|access-date=17 March 2015|date=2011-07-29}}</ref> There are four main components of PageSpeed family tools: [[#PageSpeed Module|PageSpeed Module]], consisting of mod PageSpeed<ref>{{cite web|title=Github|url=https://github.com/apache/incubator-pagespeed-mod|url-status=live|access-date=6 August 2020|website=github.com|publisher=Google Inc}}</ref> for the [[Apache HTTP Server]] and ngx PageSpeed<ref>{{cite web|title=Github|url=https://github.com/apache/incubator-pagespeed-ngx|url-status=live|access-date=6 August 2020|website=github.com|publisher=Google Inc}}</ref> for the [[Nginx]],<ref>{{cite web|title=Apache Incubator|url=https://www.modpagespeed.com/|website=modpagespeed.com/|publisher=Google Inc|access-date=6 August 2020}}</ref> [[#PageSpeed Insights|PageSpeed Insights]], [[#PageSpeed Service|PageSpeed Service]], and [[#PageSpeed Chrome Extension|PageSpeed Chrome DevTools]] extension. All of these components are built to identify the faults in a website's compliance with Google's Web Performance Best Practices, as well as automate the adjustment process.
'''Google PageSpeed''' is a family of tools by [[Google|Google, Inc.]]<ref>{{Cite web |title=About PageSpeed Insights |url=https://developers.google.com/speed/docs/insights/v5/about |access-date=2022-08-13 |website=Google Developers |language=en}}</ref> designed to help [[Web performance|optimize website performance]].<ref>{{cite web|last1=Ivanovs|first1=Alex|title=PageSpeed Module: Improving Your Websites' Performance|url=https://huffingtonpost.com/alex-ivanovs/pagespeed-module-improvin_b_5130698.html|website=huffingtonpost.com/|date=16 April 2014|publisher=The Huffington Post|access-date=23 March 2015}}</ref> It was introduced at a [[Google I/O|Developer Conference]] in 2010.<ref>{{cite web|last1=Kerner|first1=Sean Michael|title=Google Speeds Up the Web with Apache Web Server Module|url=http://www.serverwatch.com/news/article.php/3911511/Google-Speeds-Up-the-Web-with-Apache-Web-Server-Module.htm|website=serverwatch.com/news/|date=4 November 2010|access-date=23 March 2015}}</ref><ref>{{cite web|last1=Ram|first1=Ramani|title=Page Speed Service: Web performance, delivered|url=http://googlecode.blogspot.com/2011/07/page-speed-service-web-performance.html|website=googlecode.blogspot.com/|access-date=17 March 2015|date=2011-07-29}}</ref>
There are four main components of PageSpeed family tools:
* [[#PageSpeed Modules|PageSpeed Module]] (consisting of mod PageSpeed<ref>{{cite web |title=Github |url=https://github.com/apache/incubator-pagespeed-mod |access-date=6 August 2020 |website=github.com |publisher=Google Inc}}</ref> for the [[Apache HTTP Server]] and NGX PageSpeed<ref>{{cite web |title=Github |url=https://github.com/apache/incubator-pagespeed-ngx |access-date=6 August 2020 |website=github.com |publisher=Google Inc}}</ref> for the [[Nginx]])<ref>{{cite web |title=Apache Incubator |url=https://www.modpagespeed.com/ |access-date=6 August 2020 |website=modpagespeed.com/ |publisher=Google Inc}}</ref>
* [[#PageSpeed Insights|PageSpeed Insights]]
* [[#PageSpeed Service|PageSpeed Service]]
* [[#PageSpeed Chrome Extension|PageSpeed Chrome DevTools]] extension. These components aim to identify and automatically correct deviations from Google's Web Performance Best Practices.


==PageSpeed Modules==
==PageSpeed Modules==
The PageSpeed Modules are the [[Open Source|open-source]] [[Apache HTTP Server]] or [[Nginx]] webservers modules, which automatically apply chosen filters to pages and associated assets, such as [[Cascading Style Sheets|stylesheets]], [[JavaScript]], and [[HTML]] files, as well as to images and [[Web cache|website cache]] requirements. These modules do not require modifications to existing content or workflow,<ref>{{cite web|last1=Edwards|first1=Ben|date=2014-07-28|title=Authoring critical above-the-fold CSS|url=https://benedfit.com/2014/07/authoring-critical-above-the-fold-css/|url-status=live|access-date=23 March 2015|website=benedfit.com}}</ref> meaning that all internal optimizations and changes to files are made on the server side, presenting modified files directly to the user. Each of the 40+ filters corresponds to one of Google's web performance best practices rules.
The [[Google PageSpeed Tools#PageSpeed Modules|PageSpeed Modules]] are the [[open-source]] [[Apache HTTP Server]] or [[Nginx]] web server modules, which automatically apply chosen filters to pages, associated assets (like [[Cascading Style Sheets|stylesheets]], [[JavaScript]], and [[HTML]] files), as well as to images and [[Web cache|website cache]] requirements. These modules do not require modifications to existing content or workflow,<ref>{{cite web|last1=Edwards|first1=Ben|date=2014-07-28|title=Authoring critical above-the-fold CSS|url=https://benedfit.com/2014/07/authoring-critical-above-the-fold-css/|access-date=23 March 2015|website=benedfit.com}}</ref> meaning that all internal optimizations and changes to files are made on the server side, and present modified files directly to the user. Each of the 40+ filters corresponds to one of Google's web performance best practices rules.


Since PageSpeed module is an [[open source]] library, it is frequently updated by numerous developers from all over the world and can be deployed by any individual sites, [[Internet hosting service|hosting providers]], or [[Content delivery network|CDNs]].<ref>{{cite web|title=PageSpeed Insights SDK|url=https://code.google.com/p/page-speed/|url-status=live|access-date=23 March 2015|website=code.google.com|publisher=Google Inc}}</ref>
Since the PageSpeed module is an [[open-source]] library, it is frequently updated by numerous developers worldwide. It can be deployed by any individual site, [[Internet hosting service|hosting providers]], or [[Content delivery network|CDNs]].<ref>{{cite web|title=PageSpeed Insights SDK|url=https://code.google.com/p/page-speed/|access-date=23 March 2015|website=code.google.com|publisher=Google Inc}}</ref>


The installation can be done in two ways: from packages or build from source on the following supported platforms:
The installation can be done in two ways: from packages or built from source on the following supported platforms:
*[[Fedora Linux|Fedora]]/[[Rocky Linux|Rocky]], both 32-bit and 64-bit
*[[Fedora Linux|Fedora]]/[[Rocky Linux|Rocky]], both 32-bit and 64-bit
*[[Debian]]/[[Ubuntu (operating system)|Ubuntu]], both 32-bit and 64-bit
*[[Debian]]/[[Ubuntu (operating system)|Ubuntu]], both 32-bit and 64-bit
Line 17: Line 22:
===Ports===
===Ports===
Other servers that offer a PageSpeed optimization module based on Google's Page Speed SDK:
Other servers that offer a PageSpeed optimization module based on Google's Page Speed SDK:
*[[Apache Traffic Server]] - ats page speed <ref>{{cite web|title=ats_pagespeed|url=https://www.iispeed.com/products/ats-pagespeed|website=iispeed.com/|publisher=IISpeed B.V.|access-date=2015-05-25|archive-url=https://web.archive.org/web/20150525224139/https://www.iispeed.com/products/ats-pagespeed|archive-date=2015-05-25|url-status=dead}}</ref>
*[[Apache Traffic Server]] - ATS page speed<ref>{{cite web|title=ats_pagespeed|url=https://www.iispeed.com/products/ats-pagespeed|website=iispeed.com/|publisher=IISpeed B.V.|access-date=2015-05-25|archive-url=https://web.archive.org/web/20150525224139/https://www.iispeed.com/products/ats-pagespeed|archive-date=2015-05-25|url-status=dead}}</ref>
*[[Microsoft Internet Information Services]] - IIS WebSpeed<ref>{{cite web|title=IIS WebSpeed|url=https://www.iiswebspeed.com/products|website=iiswebspeed.com/|publisher=IISpeed B.V.}}</ref>
*[[Microsoft Internet Information Services]] - IIS WebSpeed<ref>{{cite web|title=IIS WebSpeed|url=https://www.iiswebspeed.com/products|website=iiswebspeed.com/|publisher=IISpeed B.V.}}</ref>


==Filters==
==Filters==
Pagespeed module filters are settings, based on which a webpage optimization rule is applied. They can be divided into five main categories:
PageSpeed module filters are settings, based on which a web page optimization rule is applied. They can be divided into five main categories:
*[[#Stylesheets optimizations|Stylesheets optimizations]];
*[[#Stylesheets optimizations|Stylesheets optimizations]]
*[[#Javascript files optimizations|Javascript files optimizations]];
*[[#Javascript files optimizations|Javascript files optimizations]]
*[[#Images optimizations|Images optimizations]];
*[[#Images optimizations|Images optimizations]]
*[[#HTML optimizations|HTML optimizations]];
*[[#HTML optimizations|HTML optimizations]]
*[[#Tracking activity filters|Tracking activity filters]].
*[[#Tracking activity filters|Tracking activity filters]]


==Speed impact==
===Stylesheets optimizations===
The PageSpeed Module showed the most significant impact on decreasing web page loading times, payload size, and number of requests compared to other industry options. According to several researchers, '[https://www.modpagespeed.com/ mod_pagespeed]' can reduce loading times by up to 80%, the number of bytes on a wire can be decreased by 30%, and the number of total requests can drop by over 20%. Since many search engines, including Google, employ a ranking algorithm that is affected by a page's loading speed, these optimizations can impact a website's placement in search results.<ref>{{cite web|last1=Enge|first1=Eric|title=Case Study: Impact of Code Cleanup on Site Traffic|url=http://searchenginewatch.com/sew/study/2064113/case-study-impact-code-cleanup-site-traffic|website=searchenginewatch.com/|publisher=Search Engine Watch|access-date=23 March 2015|date=2011-03-06}}</ref><ref>{{cite web|last1=Kuchler|first1=Margaret|title=The Growing Need For Speed: How Site Performance Increasingly Influences Search Rankings|url=http://www.retailtouchpoints.com/cross-channel-strategies/885-the-growing-need-for-speed-how-site-performance-increasingly-influences-search-rankings|website=retailtouchpoints.com/|date=19 May 2011|publisher=Retail Touch Points|access-date=23 March 2015}}</ref> As of February 2015, Google has begun testing “Slow” labels on mobile devices<ref>{{cite web|last1=Barry|first1=Shwartz|title=Google Testing A Red "Slow" Label In The Search Results For Slower Sites|url=http://searchengineland.com/google-testing-red-slow-label-search-results-slower-sites-215483|website=searchengineland.com/|access-date=17 March 2015|date=2015-02-25}}</ref> for websites that exceed a certain amount of loading time, prompting developers to examine ways to increase a page's load speed.
These filters change [[CSS]] files to optimized versions through making them smaller, combining several into one or extending cache lifetime:
{| style="border:1px solid black;"
|- style="background:#dbe7ff;"
! Filter Name !! Description
|- style="background:#e6eeff;"
| '''Combine CSS''' || If a page requires several [[Cascading Style Sheets|stylesheets]], this filter combines them into one stylesheet, decreasing the number of requests to a [[web server]]
|-
| '''Extend Cache for Stylesheets''' || Increases the time that cached [[CSS]] files are to be kept in [[Web storage#Local and session storage|local storage]], preventing extra requests and data loading upon a user's return to the same webpage
|- style="background:#e6eeff;"
| '''Flatten CSS Imports''' || Replaces all “@import” rules with the contents of imported files, if the size of the affected [[Cascading Style Sheets|stylesheet files]] is less than the number of pre-determined bytes set by the sub-filter “CssFlattenMaxBytes”. This optimization is designed for reducing the number of requests by the [[web browser]]
|-
| '''Inline @import To Link''' || Transforms “@import” rules into corresponding “<link>” [[HTML element|tags]]. Mostly is used for proper work of later applied filters
|- style="background:#e6eeff;"
| '''Inline CSS''' || Inserts small external stylesheet files’ content directly into [[HTML|HTML document]], therefore reducing number of requests. This filter is applied only to [[Cascading Style Sheets|stylesheets]] that are smaller than a size set by sub-filter “CssInlineMaxBytes”
|-
| '''Inline Google Fonts API CSS''' || Inserts any [[Cascading Style Sheets|stylesheets]], used by [[Google Fonts|Google Font API]], if they are smaller than a value, which is set by sub-filter “CssInlineMaxBytes”
|- style="background:#e6eeff;"
| '''Move CSS Above Scripts''' || Rearranges the order of loading [[Cascading Style Sheets|stylesheets]] and [[JavaScript|javascript files]], assuring that scripts are not blocking CSS resources. Improves rendering of a webpage, leading to shorter loading times<ref>{{cite web|last1=Liversidge|first1=Chris|title=Breaking Down Page Speed Events For SEO Gain|url=http://searchengineland.com/breaking-page-speed-events-seo-gain-195369|website=searchengineland.com/|publisher=Search Engine Land|access-date=23 March 2015|date=July 2014}}</ref>
|-
| '''Move CSS to Head ''' || Places stylesheets inclusion before any <body> elements are introduced, which decreases the loading time by eliminating re-flows of a webpage<ref>{{cite web|last1=Andersen|first1=Anders|last2=Jarlund|first2=Tobias|title=Addressing The Responsive Images Performance Problem: A Case Study|url=http://www.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/|website=smashingmagazine.com/|publisher=Smashing Magazine|access-date=23 March 2015|date=2013-09-16}}</ref>
|- style="background:#e6eeff;"
| '''Outline CSS''' || Experimental filter which puts inlined CSS rules on an external resource. The idea behind it is to create parallel connections to different servers rather than consecutive ones to the same host. This filter will try to outline only stylesheets bigger than set by sub-filter “CssOutlineMinBytes”
|-
| '''Prioritize Critical CSS''' || Replaces [[Cascading Style Sheets|stylesheets]] with inlined [[CSS]] rules, containing only necessary rules for initial [[viewport]], and defers the rest of [[CSS]] rules to be loaded after the page is fully loaded
|- style="background:#e6eeff;"
| '''Rewrite CSS''' || Allows other [[Cascading Style Sheets|stylesheet]] and image related filters to be applied to local stylesheets. Additionally, this filter [[Minification (programming)#Web development|minifies]] all CSS. Has impact on [[Payload (computing)|payload size]]
|-
| '''Rewrite Style Attributes''' || Implements the same optimization as “Rewrite CSS” filter to all rules, declared under “<style>” attributes
|}


Google estimates that for every delay in mobile page load time, the conversion rate drops by 20%.<ref>{{Cite web |title=Mobile Page Load Delay Causes Conversion Loss |url=https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-conversion-data/ |access-date=2024-05-23 |website=Think with Google |language=en}}</ref>
===Javascript files optimizations===
These filters are applied to Javascript files, re-referring them to optimized files:
{| style="border:1px solid black;"
|- style="background:#fff7db;"
! Filter Name !! Description
|- style="background:#fffcf1;"
| '''Canonicalize Javascript libraries''' || Replaces popular javascript libraries with remote latest free versions, from Google Hosted Libraries by default. This potentially decreases the number of requests to servers in the future, since these libraries might be in user's browser cache from any other websites
|-
| '''Combine Javascript''' || Combines multiple javascript files into one, therefore decreasing total number of requests by a browser
|- style="background:#fffcf1;"
| '''Defer Javascript''' || Postpones loading and executing javascript files until a page is loaded. This ensures that the loading of visible content is not interrupted
|-
| '''Extend Cache for Javascript''' || Increases the period of time in which cached javascript files are to be kept in local storage, preventing extra requests and data loading upon user return to the same webpage
|- style="background:#fffcf1;"
| '''Include Javascript Source Maps''' || Creates the “map” between minified and original javascript files for improved readability during the [[Debugging|debugging process]]
|-
| '''Inline Javascript''' || Inserts small external javascript files’ content directly into HTML document, therefore reducing the number of requests. This filter is applied only to javascript files smaller than the size set by sub-filter “JsInlineMaxBytes”
|- style="background:#fffcf1;"
| '''Minify External Javascript, Minify Internal Javascript''' || Removes all comments, whitespaces, [[Duplicate code|redundant]] and obsolete rules, which reduces the total number of bytes loaded
|-
| '''Outline Javascript''' || Experimental filter which puts inlined javascript on an external resource. The idea behind it is to create parallel connections to different servers rather than consecutive ones to the same host. This filter will only try to outline scripts bigger than a size set by sub-filter “JsOutlineMinBytes”
|}


==PageSpeed Insights (PSI)==
===Images optimizations===
'''[https://pagespeed.web.dev/ PageSpeed Insights (PSI)]''' is a free tool from Google that analyzes the performance of a web page on both mobile and desktop devices. It provides suggestions on how to improve the page's speed and overall user experience.
Image optimization filters are built to reduce the size of loading graphics:
{| style="border:1px solid black;"
|- style="background:#ffdbdb;"
! Filter Name !! Description
|- style="background:#fff4f4;"
| '''Deduplicate Inlined Images''' || Eliminates repetitive data loading of the same [[Data URI scheme|inlined images]], improving the number of requests and transfer size
|-
| '''Extend Cache for Images''' || Increases the time that cached images are to be kept in [[Web storage#Local and session storage|local storage]], preventing extra requests and data loading upon user return to the same webpage
|- style="background:#fff4f4;"
| '''Inline Preview Images''' || Generates low quality versions of a number of inlined images set by sub-filter “MaxInlinedPreviewImagesIndex”, unless the size of the images is higher than the value set by sub-filter “MinImageSizeLowResolutionBytes”, improving user experience. After the page is fully loaded, images are switched to higher quality
|-
| '''Lazyload Images''' || [[Lazy loading|Postpones loading of images]], which are not in a user's initial [[viewport]], decreasing the number of browser's requests
|- style="background:#fff4f4;"
| '''Inline Images''' || Provides a way to include image data into actual webpage code as if an image was an external resource, eliminating extra connections to retrieve image data
|-
| '''Convert GIFs to PNG''' || [[Lossless compression|Loselessly]] converts non-animated [[GIF|gifs]] into [[Portable Network Graphics|pngs]], decreasing data size
|- style="background:#fff4f4;"
| '''Convert JPEGs to Progressive JPEGs''' || Transforms automatically generated larger non-progressive [[JPEG]] images into smaller [[JPEG#JPEG compression|progressive type]]
|-
| '''Recompress JPEGs''' || Recompresses automatically generated [[JPEG]] images if their original [[Image compression|compression quality]] was higher than value, set by sub-filters “ImageRecompressionQuality” or “JpegRecompressionQuality”. This allows a decrease in [[Payload (computing)|payload]]
|- style="background:#fff4f4;"
| '''Recompress PNGs''' || [[Lossless compression|Losslessly]] converts [[Portable Network Graphics|png images]] into images with higher compression
|-
| '''Recompress WEBPs''' || Replaces [[WebP]] images with smaller re-compressed versions in [[WebP#Support|browsers which support webp format]]
|- style="background:#fff4f4;"
| '''Strip Image Color Profile''' || Removes all images’ [[ICC profile|color profile]] information, since it is not supported by most of the browsers
|-
| '''Strip Image Meta Data''' || Removes [[Exchangeable image file format|EXIF meta data]] from all image files of a webpage
|- style="background:#fff4f4;"
| '''Reduce JPEG Subsampling''' || Reduces [[Chroma subsampling|color sampling]] rate to 4:2:0 due to human vision sensitivity to changes in brightness, but not in hue or saturation. This allows to significantly reduce image size
|-
| '''Convert PNGs to JPEGs''' || Substitutes [[Portable Network Graphics|png images]] without [[Transparency (graphic)|transparency channel]] with smaller [[JPEG]] equivalents
|- style="background:#fff4f4;"
| '''Resize Images''' || Replaces any image with dimensions larger than certain “width” and “height” attributes with a smaller one
|-
| '''Convert JPEGs to WEBPs''' || Converts JPEG images into much smaller [[WebP]] format if [[WebP#Support|supported by browser]]
|- style="background:#fff4f4;"
| '''Convert JPEGs to WEBPs Lossless''' || Converts JPEG images into much smaller [[WebP]] format if supported by browser and if image is insensitive to [[Peak signal-to-noise ratio|compression noise]]
|-
| '''Insert Image Dimensions''' || Automatically adds “width” and “height” attributes for “<img>” tags if they were absent
|- style="background:#fff4f4;"
| '''Resize Images To Rendered Dimensions''' || Attempts to resize any image to its rendered dimensions, ignoring any “width” or “height” attributes
|-
| '''[[Sprite (computer graphics)|Sprite Images]]''' || Combines all background images from [[Cascading Style Sheets|stylesheet]] rules into one large image to reduce the number of requests by the browser
|}


'''Data and Metrics'''
===HTML optimizations===
This group of filters rewrites the contents of HTML files to reduce their size and assure latest best web practices compliance.
{| style="border:1px solid black;"
|- style="background:#dbfff4;"
! Filter Name !! Description
|- style="background:#f3fffb;"
| '''Add Head''' || Adds a <head> html tag if it is not found before <body> html tag, needed mainly for other filters to work properly, since a number of them add or modify data in the area marked with the <head> tag
|-
| '''Collapse Whitespace''' || Deletes extra and unnecessary whitespaces between [[HTML element|operators in html code]]
|- style="background:#f3fffb;"
| '''Combine Heads''' || Groups the content of several <head> [[HTML element|tags]] into one if there multiple tags, preventing incorrect browser workflow
|-
| '''Convert Meta Tags''' || Adds matching present meta tags response header, avoiding re[[parsing]] delays due to some browsers “http-equiv” attribute requirements
|- style="background:#f3fffb;"
| '''Elide Attributes''' || Removes html tags’ attributes with values equal to default values, which reduces the total amount of data transferred
|-
| '''Local Storage Cache''' || Saves [[Data URI scheme|inlined resources]] into [[Web storage#Local and session storage|browser's local storage]] on the first view of a page, and loads them from local storage on subsequent views rather than inlining them again. This reduces the number of requests
|- style="background:#f3fffb;"
| '''Pedantic''' || Forces Pagespeed Module optimizations to be more [[HTML#Version history of the standard|HTML4]] compliant
|-
| '''Remove Comments''' || Deletes HTML comments, created by developers for easier readability and navigation through HTML code
|- style="background:#f3fffb;"
| '''Remove Quotes''' || Deletes quotation marks from HTML attributes, reducing the size of html files
|-
| '''Trim URLs''' || Substitutes [[Uniform resource locator#Absolute and relative URLs|absolute URLs]] with [[Uniform resource locator#Absolute and relative URLs|relative]] ones to the base [[URL]] of the page
|}


PSI utilizes [https://web.dev/articles/speed-tools two main types of data]:
===Tracking activity filters===
Short list of filters below aim at optimizations of Google Analytics tracking communications with a website
{| style="border:1px solid black;"
|- style="background:#ffdcf1;"
! Filter Name !! Description
|- style="background:#fff4fa;"
| '''Add Instrumentation''' || Allows measurement of the time in which a client loads and renders the page, for analytical and tracking purposes
|-
| '''Async Google Analytics snippet''' || Forces the Google Analytics tracking code to load asynchronously, therefore allowing critical resources not to be blocked during loading
|- style="background:#fff4fa;"
| '''Insert Google Analytics''' || Adds tracking asynchronous snippet code to track any activities on website with Google Analytics
|}


* '''Lab Data:''' Collected in a controlled environment using Lighthouse to simulate user experience. Useful for debugging performance issues.
====Other available filters====
* '''Field Data:''' Real-world user experience data gathered from the [https://developer.chrome.com/docs/crux Chrome User Experience Report (CrUX) dataset]. This data includes metrics like First Contentful Paint (FCP), Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).
*Rewrite Domains
*Run Experiment Module
*Pre-Resolved DNS
*Extend PDFs Cache


'''Real-User Experience Data'''
==Speed impact==
The PageSpeed Module showed the most significant impact on decreasing webpage loading times, payload size, and number of requests when compared to other options in the industry. According to several researchers, mod_pagespeed can reduce loading times by up to 80%, amount of bytes on a wire can be decreased by 30% and the number of total requests can drop by over 20%. Since many search engines, including Google, employ a ranking algorithm which is affected by a page's loading speed, these optimizations can impact a website's placement in search results.<ref>{{cite web|last1=Enge|first1=Eric|title=Case Study: Impact of Code Cleanup on Site Traffic|url=http://searchenginewatch.com/sew/study/2064113/case-study-impact-code-cleanup-site-traffic|website=searchenginewatch.com/|publisher=Search Engine Watch|access-date=23 March 2015|date=2011-03-06}}</ref><ref>{{cite web|last1=Kuchler|first1=Margaret|title=The Growing Need For Speed: How Site Performance Increasingly Influences Search Rankings|url=http://www.retailtouchpoints.com/cross-channel-strategies/885-the-growing-need-for-speed-how-site-performance-increasingly-influences-search-rankings|website=retailtouchpoints.com/|date=19 May 2011|publisher=Retail Touch Points|access-date=23 March 2015}}</ref> As of February 2015, Google has begun testing “Slow” labels on mobile devices<ref>{{cite web|last1=Barry|first1=Shwartz|title=Google Testing A Red "Slow" Label In The Search Results For Slower Sites|url=http://searchengineland.com/google-testing-red-slow-label-search-results-slower-sites-215483|website=searchengineland.com/|access-date=17 March 2015|date=2015-02-25}}</ref> for websites that exceed a certain amount of loading time, prompting developers to examine ways to increase a page's load speed.


PSI leverages CrUX data to provide insights into real user experiences. It reports on various metrics over a 28-day period, including:
==PageSpeed Insights==
PageSpeed Insights<ref>{{cite web|title=PageSpeed Insights|url=https://developers.google.com/speed/pagespeed/insights/|url-status=live|website=PageSpeed Insights|publisher=Google Inc.}}</ref> is an online synthetic benchmark tool which helps in identifying performance best practices on any single URL, provides suggestions on a webpage's optimizations, and suggests overall ideas of how to make a website faster.<ref>{{cite web|last1=Wagner|first1=Janet|title=GOOGLE RELEASES PAGESPEED INSIGHTS API V2|url=http://www.programmableweb.com/news/google-releases-pagespeed-insights-api-v2/brief/2015/01/15|website=programmableweb.com/|publisher=Programmable Web|access-date=23 March 2015|date=2015-01-15}}</ref> This tool can be accessed directly in any browser. Per URL request, it grades webpage performance on a scale from 1 to 100 and provides a report on suggested optimizations, divided into categories of high, medium, and low priorities.<ref>{{cite web|last1=Burton|first1=Clark|title=A Technical Guide to Google's PageSpeed Insights Reports|url=https://iamattila.com/seo/google-pagespeed-insights.php|access-date=12 July 2018|date=2016-11-08}}</ref>


* '''First Contentful Paint (FCP):''' Time taken for the first content to render on the page.
Recent versions of PageSpeed Insights added support<ref>{{cite web|title=Real-world user experience data|url=https://developers.google.com/speed/docs/insights/v5/about#crux|url-status=live|website=PageSpeed Insights|publisher=Google Inc.}}</ref> for measuring real-world user experience using the Chrome User Experience Report.<ref>{{cite web|url=https://developers.google.com/web/tools/chrome-user-experience-report|url-status=live|website=Chrome User Experience Report|publisher=Google Inc.|title=Chrome UX Report }}</ref> Google Chrome's Elizabeth Sweeny and Addy Osmani lead PageSpeed Insights and announced its support for Core Web Vitals in 2020.<ref>{{cite web|url=https://web.dev/vitals-tools-2020/|url-status=live|website=Web Vitals Tools|publisher=Google Inc.|title=Tools to measure Core Web Vitals }}</ref>
* '''Largest Contentful Paint (LCP):''' Time taken for the main content of the page to render.
* '''Interaction to Next Paint (INP):''' Time taken for the page to become interactive after the user interacts with it.
* '''Cumulative Layout Shift (CLS):''' Measures the amount of unexpected layout shift a user experiences during page load.
* '''Time to First Byte (TTFB) (Experimental):''' Time taken for the browser to receive the first byte of response from the server.
* '''First Input Delay (FID) (Deprecated):''' Measures the time it takes for a user interaction to be reflected on the page (no longer recommended by Google).

PSI classifies these metrics into three categories based on Web Vitals thresholds: Good, Needs Improvement, and Poor.

'''Core Web Vitals'''

A subset of the field data metrics, '''[https://web.dev/explore/learn-core-web-vitals Core Web Vitals]''', are critical for a good user experience. These include LCP, INP, and CLS. PSI analyzes these metrics to determine if a page meets the Core Web Vitals assessment criteria. These are also used as a [https://developers.google.com/search/blog/2023/04/page-experience-in-search#are-core-web-vitals-still-important SEO ranking signal].

'''Lab Diagnostics'''

PSI uses [[Google Lighthouse|Lighthouse]] to analyze a web page in a simulated environment. It provides scores and recommendations for various categories like Performance, Accessibility, Best Practices, and SEO. The Performance category includes metrics like FCP, LCP, CLS, and Time to Interactive, each with scores and improvement suggestions.

'''Overall, PSI is a valuable tool for website owners and developers to identify performance bottlenecks and improve the user experience of their web pages.'''


==PageSpeed Chrome Extension==
==PageSpeed Chrome Extension==
Line 187: Line 75:


==PageSpeed Service==
==PageSpeed Service==
PageSpeed service was a commercial product, provided by Google Inc. The service was offered free of charge, since it was still officially in beta version. Service included all Pagespeed Module optimizations and use of Google servers’ infrastructure.<ref>{{cite web|last1=Lardinois|first1=Frederic|title=Google Updates PageSpeed Service, Promises To "Turbocharge Your Website"|url=https://techcrunch.com/2012/08/03/google-updates-pagespeed-service-promises-to-turbocharge-your-website/|url-status=live|access-date=23 March 2015|website=techcrunch.com|date=3 August 2012 |publisher=The Tech Crunch}}</ref> Google announced the deprecation of PageSpeed service on 5 May 2015<ref>{{cite web|url=https://groups.google.com/forum/#!topic/page-speed-service-discuss/h4jyUpv6Bc8|title=Google Groups|website=groups.google.com|access-date=7 February 2019}}</ref> and turned it off on 3 August 2015.<ref>{{cite web|url=https://developers.google.com/speed/pagespeed/service/Deprecation|title=Turndown information for PageSpeed Service - PageSpeed Service|website=Google Developers|access-date=7 February 2019}}</ref><ref>{{Cite web | url=https://cantydigital.com.au/wordpress-page-speed/ |title = Page Speed Guide}}</ref>
PageSpeed service was a commercial product, provided by Google Inc. The service was offered free of charge since it was still officially in beta version. Service included all Pagespeed Module optimizations and use of Google servers’ infrastructure.<ref>{{cite web|last1=Lardinois|first1=Frederic|title=Google Updates PageSpeed Service, Promises To "Turbocharge Your Website"|url=https://techcrunch.com/2012/08/03/google-updates-pagespeed-service-promises-to-turbocharge-your-website/|access-date=23 March 2015|website=techcrunch.com|date=3 August 2012 |publisher=The Tech Crunch}}</ref> Google announced the deprecation of PageSpeed service on 5 May 2015<ref>{{cite web|url=https://groups.google.com/forum/#!topic/page-speed-service-discuss/h4jyUpv6Bc8|title=Google Groups|website=groups.google.com|access-date=7 February 2019}}</ref> and turned it off on 3 August 2015.<ref>{{cite web|url=https://developers.google.com/speed/pagespeed/service/Deprecation|title=Turndown information for PageSpeed Service - PageSpeed Service|website=Google Developers|access-date=7 February 2019}}</ref>

PageSpeed is now a critical tool for businesses looking to rank their website on search engines organically, given that 47% of users abandon websites that take longer than 2 seconds to load. <ref>{{Cite web |last=Dentten |first=Will |date=Dec 6, 2024 |title=Google Pagespeed Insights: Why Is It Important |url=https://www.testvalleydigital.com/blog/google-pagespeed-insights-why-is-it-important/ |website=Test Valley Digital}}</ref>


==See also==
==See also==
*[[Google Optimize]]
*[[Google Optimize]]
*[[Web testing]]


==References==
==References==

Latest revision as of 12:45, 10 December 2024

Google PageSpeed is a family of tools by Google, Inc.[1] designed to help optimize website performance.[2] It was introduced at a Developer Conference in 2010.[3][4] There are four main components of PageSpeed family tools:

PageSpeed Modules

[edit]

The PageSpeed Modules are the open-source Apache HTTP Server or Nginx web server modules, which automatically apply chosen filters to pages, associated assets (like stylesheets, JavaScript, and HTML files), as well as to images and website cache requirements. These modules do not require modifications to existing content or workflow,[8] meaning that all internal optimizations and changes to files are made on the server side, and present modified files directly to the user. Each of the 40+ filters corresponds to one of Google's web performance best practices rules.

Since the PageSpeed module is an open-source library, it is frequently updated by numerous developers worldwide. It can be deployed by any individual site, hosting providers, or CDNs.[9]

The installation can be done in two ways: from packages or built from source on the following supported platforms:

Ports

[edit]

Other servers that offer a PageSpeed optimization module based on Google's Page Speed SDK:

Filters

[edit]

PageSpeed module filters are settings, based on which a web page optimization rule is applied. They can be divided into five main categories:

Speed impact

[edit]

The PageSpeed Module showed the most significant impact on decreasing web page loading times, payload size, and number of requests compared to other industry options. According to several researchers, 'mod_pagespeed' can reduce loading times by up to 80%, the number of bytes on a wire can be decreased by 30%, and the number of total requests can drop by over 20%. Since many search engines, including Google, employ a ranking algorithm that is affected by a page's loading speed, these optimizations can impact a website's placement in search results.[12][13] As of February 2015, Google has begun testing “Slow” labels on mobile devices[14] for websites that exceed a certain amount of loading time, prompting developers to examine ways to increase a page's load speed.

Google estimates that for every delay in mobile page load time, the conversion rate drops by 20%.[15]

PageSpeed Insights (PSI)

[edit]

PageSpeed Insights (PSI) is a free tool from Google that analyzes the performance of a web page on both mobile and desktop devices. It provides suggestions on how to improve the page's speed and overall user experience.

Data and Metrics

PSI utilizes two main types of data:

  • Lab Data: Collected in a controlled environment using Lighthouse to simulate user experience. Useful for debugging performance issues.
  • Field Data: Real-world user experience data gathered from the Chrome User Experience Report (CrUX) dataset. This data includes metrics like First Contentful Paint (FCP), Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

Real-User Experience Data

PSI leverages CrUX data to provide insights into real user experiences. It reports on various metrics over a 28-day period, including:

  • First Contentful Paint (FCP): Time taken for the first content to render on the page.
  • Largest Contentful Paint (LCP): Time taken for the main content of the page to render.
  • Interaction to Next Paint (INP): Time taken for the page to become interactive after the user interacts with it.
  • Cumulative Layout Shift (CLS): Measures the amount of unexpected layout shift a user experiences during page load.
  • Time to First Byte (TTFB) (Experimental): Time taken for the browser to receive the first byte of response from the server.
  • First Input Delay (FID) (Deprecated): Measures the time it takes for a user interaction to be reflected on the page (no longer recommended by Google).

PSI classifies these metrics into three categories based on Web Vitals thresholds: Good, Needs Improvement, and Poor.

Core Web Vitals

A subset of the field data metrics, Core Web Vitals, are critical for a good user experience. These include LCP, INP, and CLS. PSI analyzes these metrics to determine if a page meets the Core Web Vitals assessment criteria. These are also used as a SEO ranking signal.

Lab Diagnostics

PSI uses Lighthouse to analyze a web page in a simulated environment. It provides scores and recommendations for various categories like Performance, Accessibility, Best Practices, and SEO. The Performance category includes metrics like FCP, LCP, CLS, and Time to Interactive, each with scores and improvement suggestions.

Overall, PSI is a valuable tool for website owners and developers to identify performance bottlenecks and improve the user experience of their web pages.

PageSpeed Chrome Extension

[edit]

Pagespeed extension is an extension of Chrome Browser and is a part of Google Chrome Developer Tools. Visitors who use PageSpeed regularly can view all given metrics by PageSpeed Insights directly in a browser and download webpage resources, optimized according to web performance best practices. It has now been deprecated[16] and Google recommends the online version be used instead.

PageSpeed Service

[edit]

PageSpeed service was a commercial product, provided by Google Inc. The service was offered free of charge since it was still officially in beta version. Service included all Pagespeed Module optimizations and use of Google servers’ infrastructure.[17] Google announced the deprecation of PageSpeed service on 5 May 2015[18] and turned it off on 3 August 2015.[19]

PageSpeed is now a critical tool for businesses looking to rank their website on search engines organically, given that 47% of users abandon websites that take longer than 2 seconds to load. [20]

See also

[edit]

References

[edit]
  1. ^ "About PageSpeed Insights". Google Developers. Retrieved 2022-08-13.
  2. ^ Ivanovs, Alex (16 April 2014). "PageSpeed Module: Improving Your Websites' Performance". huffingtonpost.com/. The Huffington Post. Retrieved 23 March 2015.
  3. ^ Kerner, Sean Michael (4 November 2010). "Google Speeds Up the Web with Apache Web Server Module". serverwatch.com/news/. Retrieved 23 March 2015.
  4. ^ Ram, Ramani (2011-07-29). "Page Speed Service: Web performance, delivered". googlecode.blogspot.com/. Retrieved 17 March 2015.
  5. ^ "Github". github.com. Google Inc. Retrieved 6 August 2020.
  6. ^ "Github". github.com. Google Inc. Retrieved 6 August 2020.
  7. ^ "Apache Incubator". modpagespeed.com/. Google Inc. Retrieved 6 August 2020.
  8. ^ Edwards, Ben (2014-07-28). "Authoring critical above-the-fold CSS". benedfit.com. Retrieved 23 March 2015.
  9. ^ "PageSpeed Insights SDK". code.google.com. Google Inc. Retrieved 23 March 2015.
  10. ^ "ats_pagespeed". iispeed.com/. IISpeed B.V. Archived from the original on 2015-05-25. Retrieved 2015-05-25.
  11. ^ "IIS WebSpeed". iiswebspeed.com/. IISpeed B.V.
  12. ^ Enge, Eric (2011-03-06). "Case Study: Impact of Code Cleanup on Site Traffic". searchenginewatch.com/. Search Engine Watch. Retrieved 23 March 2015.
  13. ^ Kuchler, Margaret (19 May 2011). "The Growing Need For Speed: How Site Performance Increasingly Influences Search Rankings". retailtouchpoints.com/. Retail Touch Points. Retrieved 23 March 2015.
  14. ^ Barry, Shwartz (2015-02-25). "Google Testing A Red "Slow" Label In The Search Results For Slower Sites". searchengineland.com/. Retrieved 17 March 2015.
  15. ^ "Mobile Page Load Delay Causes Conversion Loss". Think with Google. Retrieved 2024-05-23.
  16. ^ "PageSpeed Insights | PageSpeed Insights | Google Developers". Google Developers. Retrieved 2016-09-08.
  17. ^ Lardinois, Frederic (3 August 2012). "Google Updates PageSpeed Service, Promises To "Turbocharge Your Website"". techcrunch.com. The Tech Crunch. Retrieved 23 March 2015.
  18. ^ "Google Groups". groups.google.com. Retrieved 7 February 2019.
  19. ^ "Turndown information for PageSpeed Service - PageSpeed Service". Google Developers. Retrieved 7 February 2019.
  20. ^ Dentten, Will (Dec 6, 2024). "Google Pagespeed Insights: Why Is It Important". Test Valley Digital.
[edit]
Retrieved from "https://en.wikipedia.org/enwiki/w/index.php?title=Google_PageSpeed_Tools&oldid=1262252369"