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
- 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
