Google page speed report 2018

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