Skip to content

Instantly share code, notes, and snippets.

@sobstel

sobstel/page-speed-report.md

Last active May 7, 2020 11:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sobstel/610af92a102fca1706dab95161d4aa45 to your computer and use it in GitHub Desktop.
Save sobstel/610af92a102fca1706dab95161d4aa45 to your computer and use it in GitHub Desktop.
Download ZIP
Google page speed report 2018
Raw
page-speed-report.md

Google page speed report 2018

  • Time spent on mobile vs desktop 
    • 2015 -> Google started getting more search queries from mobile than desktop
    • 2018 -> Time spent on mobile 2-3x bigger than on desktop (and growing...)
  • Users reaction
    • 46% dislike waiting for slow pages to load 
    • 53% abandon a site that loads in more than 3 seconds
  • As of July 2018, page speed will become an important ranking factor for mobile searches 
    • Page speed will also influence ad rank and the CPC that you pay 
  • The average web page weight has now reached 3MB
    • Best practice: 1MB
  • Why should you measure on 3G Fast...
    • 70% of cellular network connections globally will occur at 3G or slower speeds through 2020
  • Make speed a KPI 
    • Load time on 3G: <5s
    • Load time on 4G: <2s
    • Speed Index: <3000 
    • Page weight: <1MB
  • [Webpagetest.org]
    • Enter url
    • Test location: Choose a location that is closest to the market for your site.
    • Choose connection: 3G Fast for Northern Europe and US, 3G Regular for Southern Europe.
    • Number of tests to run: 3
    • Choose "First view only"
    • Click on the tab Chrome, and click in “Emulate mobile browser” and choose “Motorola G (gen 4)”
  • How to read WebPageTest.org – basic 
    • Load time should be below 5s
    • Speed Index should be below 3000
    • Requests should be below 40, if you’re not really good at optimizing code
    • Bytes In should be below 1,000 Kb, if you’re not really good at optimizing code
    • The grades go from A to F – how many A's do you have?
  • Help your developers optimize speed 
    • Compress images
    • Shorten pages
    • Remove all the images you don’t need
    • A/B test if you really get a better conversion rate with video
    • Cut all the tools (scripts) you don’t need
  • Which tools should you use?
    • PageSpeed Insights
    • WebPageTest
    • Lighthouse
    • Chrome Dev Tools
  • Which metrics are most important ? 
    • Speed Index
    • Load Time
    • First Byte
    • Start Render
    • Fully Loaded
  • On average the majority of the loading size of web pages is coming from images
    • Image display: none 
    • Download & shrink: srcset 
    • Compress your images 
    • Lazy load / load on demand
  • An image slider on mobile will guarantee a bad user experience!
    • Poor performance
    • The first screen captures the majority of clicks
    • Distracts the user by adding movement
    • Moves when you read
    • Looks like a public transport ad
    • Needs multiple images and js to run
  • Prioritize ATF (above-the-fold) content 
    • Optimizing the critical rendering path 
    • When optimizing the critical path the main idea is to prioritize the loading of the contents above the fold 
  • Optimize the loading of JS 
    • Put your JavaScript in the footer
    • Utilize defer and async
    • Defer: if the execution order of the script is important
    • Async: if the script is independent
  • Optimize the loading of CSS 
    • Inline critical CSS 
    • Load the rest of the css 
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment