Google PageSpeed Tools

Google PageSpeed is a family of tools by Google Inc,[1] designed to help a website's performance optimizations.[2] It was introduced at Developer Conference in 2010.[3][4] There are four main components of PageSpeed family tools: PageSpeed Module, consisting of mod PageSpeed[5] for the Apache HTTP Server and ngx PageSpeed[6] for the Nginx,[7] PageSpeed Insights, PageSpeed Service, and 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, and automate the optimization process.

PageSpeed Modules

The PageSpeed Modules are the open-source Apache HTTP Server or Nginx webservers modules, which automatically apply chosen filters to pages and associated assets, such as 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, presenting 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, hosting providers, or CDNs.[9]

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

Ports

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

Filters

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

Stylesheets optimizations

These filters change CSS files to optimized versions through making them smaller, combining several into one or extending cache lifetime:

Filter NameDescription
Combine CSSIf a page requires several stylesheets, this filter combines them into one stylesheet, decreasing the number of requests to a web server
Extend Cache for StylesheetsIncreases the time that cached CSS files are to be kept in local storage, preventing extra requests and data loading upon a user's return to the same webpage
Flatten CSS ImportsReplaces all “@import” rules with the contents of imported files, if the size of the affected 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 LinkTransforms “@import” rules into corresponding “<link>” tags. Mostly is used for proper work of later applied filters
Inline CSSInserts small external stylesheet files’ content directly into HTML document, therefore reducing number of requests. This filter is applied only to stylesheets that are smaller than a size set by sub-filter “CssInlineMaxBytes”
Inline Google Fonts API CSSInserts any stylesheets, used by Google Font API, if they are smaller than a value, which is set by sub-filter “CssInlineMaxBytes”
Move CSS Above ScriptsRearranges the order of loading stylesheets and javascript files, assuring that scripts are not blocking CSS resources. Improves rendering of a webpage, leading to shorter loading times[12]
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[13]
Outline CSSExperimental 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 CSSReplaces 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
Rewrite CSSAllows other stylesheet and image related filters to be applied to local stylesheets. Additionally, this filter minifies all CSS. Has impact on payload size
Rewrite Style AttributesImplements the same optimization as “Rewrite CSS” filter to all rules, declared under “<style>” attributes

Javascript files optimizations

These filters are applied to Javascript files, re-referring them to optimized files:

Filter NameDescription
Canonicalize Javascript librariesReplaces 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 JavascriptCombines multiple javascript files into one, therefore decreasing total number of requests by a browser
Defer JavascriptPostpones loading and executing javascript files until a page is loaded. This ensures that the loading of visible content is not interrupted
Extend Cache for JavascriptIncreases 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
Include Javascript Source MapsCreates the “map” between minified and original javascript files for improved readability during the debugging process
Inline JavascriptInserts 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”
Minify External Javascript, Minify Internal JavascriptRemoves all comments, whitespaces, redundant and obsolete rules, which reduces the total number of bytes loaded
Outline JavascriptExperimental 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”

Images optimizations

Image optimization filters are built to reduce the size of loading graphics:

Filter NameDescription
Deduplicate Inlined ImagesEliminates repetitive data loading of the same inlined images, improving the number of requests and transfer size
Extend Cache for ImagesIncreases the time that cached images are to be kept in local storage, preventing extra requests and data loading upon user return to the same webpage
Inline Preview ImagesGenerates 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 ImagesPostpones loading of images, which are not in a user's initial viewport, decreasing the number of browser's requests
Inline ImagesProvides 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 PNGLoselessly converts non-animated gifs into pngs, decreasing data size
Convert JPEGs to Progressive JPEGsTransforms automatically generated larger non-progressive JPEG images into smaller progressive type
Recompress JPEGsRecompresses automatically generated JPEG images if their original compression quality was higher than value, set by sub-filters “ImageRecompressionQuality” or “JpegRecompressionQuality”. This allows a decrease in payload
Recompress PNGsLosslessly converts png images into images with higher compression
Recompress WEBPsReplaces WebP images with smaller re-compressed versions in browsers which support webp format
Strip Image Color ProfileRemoves all images’ color profile information, since it is not supported by most of the browsers
Strip Image Meta DataRemoves EXIF meta data from all image files of a webpage
Reduce JPEG SubsamplingReduces 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 JPEGsSubstitutes png images without transparency channel with smaller JPEG equivalents
Resize ImagesReplaces any image with dimensions larger than certain “width” and “height” attributes with a smaller one
Convert JPEGs to WEBPsConverts JPEG images into much smaller WebP format if supported by browser
Convert JPEGs to WEBPs LosslessConverts JPEG images into much smaller WebP format if supported by browser and if image is insensitive to compression noise
Insert Image DimensionsAutomatically adds “width” and “height” attributes for “<img>” tags if they were absent
Resize Images To Rendered DimensionsAttempts to resize any image to its rendered dimensions, ignoring any “width” or “height” attributes
Sprite ImagesCombines all background images from stylesheet rules into one large image to reduce the number of requests by the browser

HTML optimizations

This group of filters rewrites the contents of HTML files to reduce their size and assure latest best web practices compliance.

Filter NameDescription
Add HeadAdds 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 WhitespaceDeletes extra and unnecessary whitespaces between operators in html code
Combine HeadsGroups the content of several <head> tags into one if there multiple tags, preventing incorrect browser workflow
Convert Meta TagsAdds matching present meta tags response header, avoiding reparsing delays due to some browsers “http-equiv” attribute requirements
Elide AttributesRemoves html tags’ attributes with values equal to default values, which reduces the total amount of data transferred
Local Storage CacheSaves inlined resources into 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
PedanticForces Pagespeed Module optimizations to be more HTML4 compliant
Remove CommentsDeletes HTML comments, created by developers for easier readability and navigation through HTML code
Remove QuotesDeletes quotation marks from HTML attributes, reducing the size of html files
Trim URLsSubstitutes absolute URLs with relative ones to the base URL of the page

Tracking activity filters

Short list of filters below aim at optimizations of Google Analytics tracking communications with a website

Filter NameDescription
Add InstrumentationAllows measurement of the time in which a client loads and renders the page, for analytical and tracking purposes
Async Google Analytics snippetForces the Google Analytics tracking code to load asynchronously, therefore allowing critical resources not to be blocked during loading
Insert Google AnalyticsAdds tracking asynchronous snippet code to track any activities on website with Google Analytics

Other available filters
  • Rewrite Domains
  • Run Experiment Module
  • Pre-Resolved DNS
  • Extend PDFs Cache

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.[14][15] As of February 2015, Google has begun testing “Slow” labels on mobile devices[16] for websites that exceed a certain amount of loading time, prompting developers to examine ways to increase a page's load speed.

PageSpeed Insights

PageSpeed Insights[17] 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.[18] 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 (score > 80, indicating most best practices have been implemented and there is little headroom for improvement), medium (between 60 and 79- indicating that the page is missing some common optimizations there is some headroom for optimization), and low priorities( Score below 60, indicating a non-optimized page)-About PageSpeed Insights[19]

Currently, the Page Speed Insight score is calculated on the basis of five factors:[20][21]

  1. First Contentful Paint (FCP)- 10%
  2. Speed Index (SI)- 10%
  3. Largest Contentful Paint (LCP)- 25%
  4. Total Blocking Time (TBT)- 30%
  5. Cumulative Layout Shift (CLS)- 25%

Recent versions of PageSpeed Insights added support[22] for measuring real-world user experience using the Chrome User Experience Report.[23] Google Chrome's Elizabeth Sweeny and Addy Osmani lead PageSpeed Insights and announced its support for Core Web Vitals in 2020.[24]

PageSpeed Chrome Extension

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[25] and Google recommends the online version be used instead.

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.[26] Google announced the deprecation of PageSpeed service on 5 May 2015[27] and turned it off on 3 August 2015.[28]

See also

References
  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. Liversidge, Chris (July 2014). "Breaking Down Page Speed Events For SEO Gain". searchengineland.com/. Search Engine Land. Retrieved 23 March 2015.
  13. Andersen, Anders; Jarlund, Tobias (2013-09-16). "Addressing The Responsive Images Performance Problem: A Case Study". smashingmagazine.com/. Smashing Magazine. Retrieved 23 March 2015.
  14. Enge, Eric (2011-03-06). "Case Study: Impact of Code Cleanup on Site Traffic". searchenginewatch.com/. Search Engine Watch. Retrieved 23 March 2015.
  15. 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.
  16. Barry, Shwartz (2015-02-25). "Google Testing A Red "Slow" Label In The Search Results For Slower Sites". searchengineland.com/. Retrieved 17 March 2015.
  17. "PageSpeed Insights". PageSpeed Insights. Google Inc.
  18. Wagner, Janet (2015-01-15). "GOOGLE RELEASES PAGESPEED INSIGHTS API V2". programmableweb.com/. Programmable Web. Retrieved 23 March 2015.
  19. Burton, Clark (2016-11-08). "A Technical Guide to Google's PageSpeed Insights Reports". Retrieved 12 July 2018.
  20. "About PageSpeed Insights". Google for Developers. Retrieved 2023-08-29.
  21. "Lighthouse Scoring calculator". googlechrome.github.io. Retrieved 2023-08-29.
  22. "Real-world user experience data". PageSpeed Insights. Google Inc.
  23. "Chrome UX Report". Chrome User Experience Report. Google Inc.
  24. "Tools to measure Core Web Vitals". Web Vitals Tools. Google Inc.
  25. "PageSpeed Insights | PageSpeed Insights | Google Developers". Google Developers. Retrieved 2016-09-08.
  26. Lardinois, Frederic (3 August 2012). "Google Updates PageSpeed Service, Promises To "Turbocharge Your Website"". techcrunch.com. The Tech Crunch. Retrieved 23 March 2015.
  27. "Google Groups". groups.google.com. Retrieved 7 February 2019.
  28. "Turndown information for PageSpeed Service - PageSpeed Service". Google Developers. Retrieved 7 February 2019.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.