More Related Content

Slideshows for you(20)

Similar to Page Speed Insights: The Ballad of Improving Performance(20)


Page Speed Insights: The Ballad of Improving Performance

  2. @jamesmcnulty
  3. @jamesmcnulty
  4. @jamesmcnulty
  5. @jamesmcnulty 2000 2007 2010 2G 3G 4G 2019 (kinda) 5G
  6. @jamesmcnulty MEASURING SPEED_
  7. @jamesmcnulty 2012 PageSpeed Insights
  8. @jamesmcnulty 2019 PageSpeed Insights
  9. @jamesmcnulty@jamesmcnulty
  10. @jamesmcnulty “In the past we've recommended performance metrics like First Meaningful Paint (FMP) and Speed Index (SI) to help capture more of the loading experience after the initial paint,” “but these metrics are complex, hard to explain, and often wrong — meaning they still do not identify when the main content of the page has loaded.” Source - Phil Walton (Engineer at Google) August, 2019
  11. @jamesmcnulty Largest Contentful Paint Example Source Render time of the largest contentful element visible in the viewport
  12. @jamesmcnulty
  13. @jamesmcnulty
  14. @jamesmcnulty Cumulative Layout Shift (CLS) Measures the unexpected movement of page content which usually happens because resources are loaded asynchronously or DOM elements get dynamically added to the page above existing content. Source
  15. @jamesmcnulty Measure Cumulative Layout Shift (CLS) 1. Go to 2. Advanced Settings > Chromium 3. Enable layoutShift API, by adding the following to the Command-Line field: --enable-blink- features=LayoutInstabilityAPI
  16. @jamesmcnulty Measuring Cumulative Layout Shift (CLS) [CumulativeLayoutShift] return new Promise(resolve => { var CLS = 0; new PerformanceObserver(list => { list.getEntries().forEach(entry => { if (entry.hadRecentInput) return; CLS += entry.value; }); resolve(CLS); }).observe({type: "layout-shift", buffered: true}); }); 4. Advanced Settings > Custom 5. Add this script to Custom Metrics:
  17. @jamesmcnulty Measuring Cumulative Layout Shift (CLS)
  18. @jamesmcnulty Measuring Cumulative Layout Shift (CLS) Distance X Impact = CLS Score
  19. @jamesmcnulty Calculating Cumulative Layout Shift (CLS) 50% 25% 75% Impact Fraction Distance Fraction Ad
  20. @jamesmcnulty Cumulative Layout Shift (CLS) Scoring 0.25 X 0.75 = 0.1875 Distance fraction X Impact fraction = CLS Score
  21. @jamesmcnulty Fixing Layout Shift for Images tl;dr — Add HTML width & height attributes ● Launching in Firefox 71 (December 2019) ● Launching in Chrome shortly after Source - Jen Simmons Designer Advocate at Mozilla <img src="" alt="smiling black dog" width="750" height="500"/> img { display: block; width: 100%; height: auto; }
  22. @jamesmcnulty@jamesmcnulty
  23. @jamesmcnulty
  24. @jamesmcnulty Google decides the crawl priority of pages based on site popularity, content freshness, and server resources. Source - Kazushi Nagayama Former Google Search Quality Analyst Crawling “Google needs to make good predictions on how much load the host can tolerate, and decide how fast it crawls the site”
  25. @jamesmcnulty ● Just like crawl budget, Google uses signals to compute priorities for rendering. In this case, the most important ones are the popularity of the site, and the number of URLs that need rendering. ● If you have a page that runs lots of JavaScript, it may eventually be considered unrenderable. ● Excessive CPU consumption negatively impacts indexing Source - Kazushi Nagayama Former Google Search Quality Analyst Rendering
  26. @jamesmcnulty Page Speed is a mobile ranking factor Source
  27. @jamesmcnulty Is it?
  28. @jamesmcnultySource - Rand Fishkin (CEO, Co-Founder at Sparktoro)
  29. @jamesmcnultySource
  30. @jamesmcnulty “best laptops for students” 1. 2. 3.
  31. @jamesmcnultySource
  32. @jamesmcnulty
  33. @jamesmcnultySource - Billy Hoffman (Founder and CTO at Zoompf) “Our data shows there is no correlation between "page load time" (either document complete or fully rendered) and ranking on Google's search results page.” Does Website Speed Actually Impact Rankings?
  34. @jamesmcnulty “Of all the data we captured, the TTFB metric had the strongest correlation effect, implying a high likelihood of some level of influence on search ranking.” Source - Billy Hoffman (Founder and CTO at Zoompf)
  35. @jamesmcnulty Improving page speed doesn’t change the content. It changes the user experience.
  36. @jamesmcnulty Prepare for where Google is going.
  37. @jamesmcnultySource – Elizabeth Sweeny (Developer Insights Product Manager for Chrome) “Performance at the end of the day is about solving business problems”
  38. @jamesmcnulty For Google it speeds up the engine
  39. @jamesmcnulty Performance Optimization is important Server Response Time is important for Search Visibility Page Speed is important for User Experience
  40. @jamesmcnulty Performance Optimization is important Server Response Time Is important for Search Visibility Page Speed Is important for User Experience
  41. @jamesmcnulty Both are important for your bottom line
  42. @jamesmcnulty Test My Site (Think with Google) Estimate the value a faster site could have on your revenue. Source
  43. @jamesmcnulty Generate Visual Comparisons Enter multiple URLs to compare them against each other visually.
  44. @jamesmcnulty@jamesmcnulty
  45. @jamesmcnulty Google Performance Tools ● ● Lighthouse ● PageSpeed Insights ● Test My Site (Think with Google) ● Mobile-Friendly Test
  46. @jamesmcnulty Google Search Console Speed Report (Experimental) @jamesmcnulty
  47. @jamesmcnulty Run Lighthouse Reports for Multiple Pages @jamesmcnulty
  48. @jamesmcnulty How it works 1. Download Google Chrome 2. Install Lighthouse Chrome Extension 3. Install node.js 4. Install Lighthouse Batch Reporter 5. Open Terminal (or Command Prompt) – Enter URLs to run in Lighthouse 6. Upload the downloaded JSON reports to an online server 7. In a new Google Sheet, open the Script Editor and add the code 8. Add the URLs for each JSON report to the Google Sheet 9. Use formulas in the Google Sheet to find data within each JSON report
  49. @jamesmcnulty How to Automate Pagespeed Insights For Multiple URLs using Google Sheets @jamesmcnulty
  50. @jamesmcnulty How it works 1. Make a copy of this Google Sheet 2. Create a free API Key from Google 3. Make sure the PageSpeed Insights API is enabled. 4. Add a list of URLs to the Google Sheet 5. Click “Run Report”
  51. @jamesmcnulty [Updated Template] Automated Pagespeed Insights For Multiple URLs using Google Sheets @jamesmcnulty
  52. @jamesmcnulty Just buy Screaming Frog @jamesmcnulty
  53. @jamesmcnulty How to Automate PageSpeed Insights for Multiple URLs using Azure Logic Apps or Microsoft Flow @jamesmcnulty By Matt Collinge
  54. @jamesmcnulty Where To Start 1. Focus on the Critical Rendering Path. Make fewer requests for smaller resources. ○ Optimize the delivery of render-blocking CSS and JavaScript resources ○ Prioritize visible content 2. Reduce your server response time (improve TTFB) ○ Use a CDN (e.g. Cloudflare) ○ Enable Gzip / compression (Check your site) ○ Leverage browser caching ○ Enable Keep-alive ○ Is My Host Fast Yet? by Rick Viscomi 3. Find and resolve redundant internal redirects and redirect chains
  55. @jamesmcnulty Resolve Redundant Redirects ● Each redirect adds latency to the overall page load time. ● Google will follow up to five redirect hops, then stop and treat the original URL as a 404 error. 1. 2. 3. 4. 5. Source
  56. @jamesmcnulty Lighthouse shows third-party resources, their size and the time it takes to load them Review Your Third-Party Resources
  57. @jamesmcnulty JavaScript Loading Priorities in Chrome Source by Addy Osmani (Engineering Manager - Google Chrome)
  58. @jamesmcnulty JavaScript Loading Priorities in Chrome Source by Addy Osmani (Engineering Manager - Google Chrome)
  59. @jamesmcnulty Image Optimization 1. Essential Image Optimization by Addy Osmani (Engineering Manager working on Google Chrome) 2. Creating a Cloudflare Worker to Lazy Load Images by Simon Cox 3. Piio / - [Paid] Optimization & delivery services (Image Speed Test) (WordPress Plugin) (Resize Images Tool)
  60. @jamesmcnulty CSS and JavaScript Optimization 1. Find and remove unused CSS and JavaScript with Google Chrome. a. Automatically remove unused CSS using Grunt (grunt-uncss package) b. Unused CSS Tool / Service 2. Avoid importing CSS files from inside another CSS file (i.e. avoid @import url("style.css") - Check your site: CSS Delivery Tool by Patrick Sexton a. Use fewer external CSS files b. Serve critical CSS from one domain 3. Call CSS first, save time by reducing network calls and delays from JavaScript a. In-line small CSS and JavaScript
  61. @jamesmcnulty WordPress Optimization 1. Ultimate Guide to WordPress Speed Optimization by MyThemeShop 2. How to Make Your WordPress Site Load Faster (Without Breaking It or Going Crazy) by Gill Andrews 3. 5 Ways to Make Your WordPress Website Blazing Fast by Kyle Faber
  62. @jamesmcnulty Site Kit - Google’s official WordPress plugin ● Search Console ● Google Analytics ● Pagespeed Insights ● AdSense @jamesmcnulty
  63. @jamesmcnulty How To Build Speed Dashboards in Google Data Studio By Sam Marsden @jamesmcnulty
  64. @jamesmcnulty Historical CrUX Performance Analysis By Edgemesh @jamesmcnulty
  65. @jamesmcnulty Compare Your Site To Industry Benchmarks (using CrUX data) By Akamai @jamesmcnulty
  66. @jamesmcnulty Publisher Ads Audit (Beta) A tool to help improve ad speed and overall quality through a series of automated Lighthouse audits. At the moment, this is primarily targeted at sites using Google Ad Manager with the Google Publisher Tag (GPT) tag. @jamesmcnulty
  67. @jamesmcnulty @jamesmcnultyThank you!

Editor's Notes

  1. How browsers schedule and execute scripts can impact the performance of web pages. While techniques like <script defer>, <link rel=preload> (and others) influence script loading, knowing how browsers interpret them can also be helpful.