InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

Site Performance tutorials

  • Chrome PageSpeed insights
  • Google custom search with lazy loading
  • Install and monitor memcache for php on Ubuntu
  • Internal vs external css
  • Javascript in header vs footer
  • PHP apc - setup and performance benchmarks
  • Php apc vs memcache
  • Using inline image for site performance
 
  • Home
  • > Tutorials
  • > Web Development
  • > Site Performance

How to install and run Chrome PageSpeed insights for measuring site performance

By admin on Jul 9, 2013

Page speed insight is a browser extension (Chrome and Firefox) which can be used to measure a website performance. It is an indispensable tool if you are managing a web site. This article is a quick start guide to install and use PageSpeed insight plugin with Chrome browser.

Install PageSpeed insight as Chrome plugin

PageSpeed insight runs in Chrome developers tools. To install it follow these quick steps:

  1. Visit page speed insight extension page in Google Chrome browser and click on install chrome extension as shown below:
    install-page-speed-chrome-extension-link
  2. Click add to chrome on extension page as shown below:
    pagespeed-insights-chrome-plugin-page
  3. Click add on the confirmation dialog box.
  4. Here is how the toolbar icon appear once the plugin is installed:
    pagespeed-insighs-extension-toolbar-icon

Using PageSpeed insight as Chrome plugin

These are the quick steps to run PageSpeed insights on a page.

  1. Visit the site in Chrome browser for which you want to run pagespeed insights.
  2. Open chrome developers tools by clicking on “customize and control Google Chrome” icon on top right corner of browser -> Tools > Developer Tools.
    pagespeed-open-chrome-developer-tools
  3. Select the page speed tab and click analyze as shown below:
    pagespeed-tab-chrome-developer-tools
  4. PageSpeed plugin will reload the current page in browser and create the performance report. Here is how the report looks like:
    pagespeed-run-report-overview-chrome-developer-toolsThe report is pretty detailed and has many section. It may take sometime to get a hang of various items in the report.

Quick fix items from PageSpeed report

Ideally you should fix as many items as possible from Pagespeed report. But often there are two many items on a site when pagespeed is run first time. Here are few things which can be fixed with little effort:

  1. Leverage browser caching by appropriate headers. For apache look at mode_expires module.
  2. Enable compression. For apache, this is handled by installing module mod_deflate.
  3. Inline small javascripts and css.
  4. Move javascript to the end of the page whenever possible.

Additional notes

  1. Page speed can also be run online. That way you don’t have to install anything.
  2. Page speed insight can also be used as firefox extension.

 

Suggested posts:

  1. Tips on improving the performance of your WordPress blog or site
  2. Chrome – view javascript errors
  3. Edit and debug css in Chrome
  4. How to detach Chrome developer tools window
  5. view event handlers in Chrome
  6. How to clear Chrome HTTP 301 redirect cache
  7. how to debug javascript in Chrome
  8. Chrome – how to add custom http request headers
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged Chrome developer tools, Site Performance, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2022 InfoHeap.

Powered by WordPress