Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Google page speed report 2018

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
You can’t perform that action at this time.