Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX London 2018)

935 views

Published on

Page Speed can make or break your business in 2018, as it is equally important for user experience, revenue, and SEO. Mobile page speed is becoming a Goolge ranking factor in July 2018, or is it already as of May 2018? To get an idea about the current state of the industry, SEO PowerSuite conducts an experiment for 1 mln pages to find the correlation between mobile page speed in the position in mobile SERPs. In this presentation, delivered by Aleh Barysevich at SMX London, you'll find the results of the experiment, as well as the latest tools and tips on improving page speed.

Published in: Internet

Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX London 2018)

  1. 1. #SMX #SMXLondon @ab80 How mobile page speed influences your UX, revenue and SEO. Satisfying the Need for Speed
  2. 2. #SMX #SMXLondon @ab80 Satisfying the Need for Speed Aleh SEO Expert, Author, Speaker, 15 years of experience. Barysevich Founder: As seen on:
  3. 3. #SMX #SMXLondon @ab80 How mobile page speed influences your UX, revenue and SEO. Satisfying the Need for Speed
  4. 4. #SMX #SMXLondon @ab80 Speed is Important for Business User Experience Revenue SEO
  5. 5. #SMX #SMXLondon @ab80 Speed is Important for User Experience Average mobile page takes 15.3seconds to load
  6. 6. #SMX #SMXLondon @ab80 Speed is Important for User Experience of visits are abandoned if the page doesn’t load within 53% 3 seconds
  7. 7. #SMX #SMXLondon @ab80 Speed is Important for User Experience of people want a page to load In less than 50% 2 seconds More than
  8. 8. #SMX #SMXLondon @ab80 All conversion Speed is Important for Revenue in page load time can reduce mobile conversions by up to 20% 1 second delay After 1s delay After 2s After 3s After 4s
  9. 9. #SMX #SMXLondon @ab80 Speed is Important for Revenue People with negative experience are 62%less likely to buy again Will hardly buy again Will come back28% 62%
  10. 10. #SMX #SMXLondon @ab80 Speed-related Case Studies Mozilla -2.2s +60 mln downloads BBC +1s -10% users AliExpress -36% load time +10.5% orders Obama campaign -60% load time +14% donation conversion Walmart, Amazon -0.1s +1% revenue
  11. 11. #SMX #SMXLondon @ab80 Impact Calculator from improving page speed by $515k 1.1 second /year
  12. 12. #SMX #SMXLondon @ab80 Why Page Speed IS Important for SEO
  13. 13. #SMX #SMXLondon @ab80 Speed is Important for SEO Goes live: July, 2018 Page Speed Update for Mobile Search Announced: 17th,Jan, 2018
  14. 14. #SMX #SMXLondon @ab80 Speed is Important for SEO Goes live: July, 2018 Page Speed Update for Mobile Search Announced: 17th,Jan, 2018
  15. 15. #SMX #SMXLondon @ab80 Speed is Important for SEO Live Already Mobile-first indexing Mobile pages get into the Google index instead of desktop pages.
  16. 16. #SMX #SMXLondon @ab80 Speed is Important for Business User Experience Revenue SEO Speed is Google’s new focus
  17. 17. #SMX #SMXLondon @ab80 Tools and Technologies: AMP & PWA
  18. 18. #SMX #SMXLondon @ab80 Tools: PageSpeed Modules for Apache/Nginx
  19. 19. #SMX #SMXLondon @ab80 Tools: Single-page Speed Tools
  20. 20. #SMX #SMXLondon @ab80 Tools: Google Analytics and Search Console
  21. 21. #SMX #SMXLondon @ab80 Tools: Chrome Developer Tools Chrome DevTools
  22. 22. #SMX #SMXLondon @ab80 New Tools From Google Lighthouse Speed Scorecard Impact Calculator
  23. 23. #SMX #SMXLondon @ab80 New PageSpeed Insights
  24. 24. #SMX #SMXLondon @ab80 New PageSpeed Insights
  25. 25. #SMX #SMXLondon @ab80 PageSpeed Insights: Speed and Optimization
  26. 26. #SMX #SMXLondon @ab80 FCP & DCL First Contentful Paint first visual response from the page DOM Content Loaded document has been loaded and parsed
  27. 27. #SMX #SMXLondon @ab80 FCP & DCL First Paint First Contentful Paint (FCP) First Meaningful Paint (FMP) DOM Content Loaded (DCL) Time to Interactive (TTI)
  28. 28. #SMX #SMXLondon @ab80 Real User Monitoring 0.4s DCL 0.3s DCL 0.8s DCL 2.4s DCL 1.4s DCL 4.5s DCL 2.8s DCL 1.1s DCL
  29. 29. #SMX #SMXLondon @ab80 Real User Monitoring 8 s | DOMContentLoaded: 1.13 s | Lo 2.6s > 1.13s
  30. 30. #SMX #SMXLondon @ab80 Real User Monitoring Lab Data Field Data Real User Monitoring Good for debugging Deep visibility into the UX Reproducible environment No real-world bottlenecks Can’t correlate against real-world KPIs True real-world user experience Correlation to business KPIs Restricted set of metrics Limited debugging capabilities
  31. 31. #SMX #SMXLondon @ab80 Chrome User Experience Report CrUX 0.4s DCL 0.3s DCL 0.8s DCL 2.4s DCL 1.4s DCL 4.5s DCL 2.8s DCL 1.1s DCL
  32. 32. #SMX #SMXLondon @ab80 CrUX + Google BigQuery Platform CrUXReal Users
  33. 33. #SMX #SMXLondon @ab80 CrUX + Google BigQuery Platform
  34. 34. #SMX #SMXLondon @ab80 CrUX + Google BigQuery Platform
  35. 35. #SMX #SMXLondon @ab80 CrUX + Google BigQuery Platform
  36. 36. #SMX #SMXLondon @ab80 CrUX + Google BigQuery Platform
  37. 37. #SMX #SMXLondon @ab80 Chrome User Experience Report
  38. 38. #SMX #SMXLondon @ab80 2018 Best Practices For Loading Compress diligently (Gzip, Brotli) Cache effectively (HTTP, ServiceWorkers) Minify & optimize everything Preresolve DNS for critical origins Preload critical resources Respect data plans Stream HTML responses Make fewer HTTP requests Have a Front loading strategy Send less JavaScript (code-splitting) Lazy-load non-critical resources Route-based chunking Library sharding PRPL pattern Three-shaking (Webpack, RollUp) Serve modern browsers ES2015 (babel-preset-env) Scope hoisting (Webpack) Don’t ship DEV code to PROD
  39. 39. #SMX #SMXLondon @ab80 Google PageSpeed Insights Rules Improve server response time Avoid landing page redirects Enable compression Leverage browser caching Minify resources Optimize images Optimize CSS Delivery Remove render-blocking JavaScript Prioritize visible content
  40. 40. #SMX #SMXLondon @ab80 Performance Culture First Contentful Paint (FCP) ChooseThe Right Metrics DOM Content Loaded (DCL) Time to Interactive (TTI) Use Chrome User Experience Report Set Realistic Goals Be 20% faster than your fastest competitor
  41. 41. #SMX #SMXLondon @ab80 Server Response Time Response time < 200ms Required 100ms response time Best Practice Time to Interactive (TTI) < 5s on slow 3G, < 2s for repeat visits
  42. 42. #SMX #SMXLondon @ab80 Avoid Redirects 1 redirect max Required Ideally eliminate redirects entirely Best Practice Speed up delivery with faster dns-lookup, preconnect, prefetch and preload
  43. 43. #SMX #SMXLondon @ab80 Enable Compression Gzip all compressible content Required Enable Brotli compression on the server (and CDN) Best Practice Pre-compress static assets with Brotli+Gzip (max level) Compress dynamic HTML on the fly with Brotli (level 1–4) If HTTP/2 is available, enable HPACK compression
  44. 44. #SMX #SMXLondon @ab80 Leverage Browser Caching Include HTTP caching headers • Cache-Control • ETag Required Cache resources indefinitely if they are static (won’t be changed) Best Practice Use Cache-Control:immutable to avoid revalidation Have your Cache-Control policy
  45. 45. #SMX #SMXLondon @ab80 Minify Resources (HTML, CSS, and JavaScript) No redundant data Required HTMLMinifier (https://github.com/kangax/html-minifier) Best Practice CSSNano (https://github.com/ben-eb/cssnano) + csso (https://github.com/css/csso) UglifyJS (https://github.com/mishoo/UglifyJS2)
  46. 46. #SMX #SMXLondon @ab80 Optimize Images Use vector formats Minify/compress SVG assets Pick best raster formats Experiment with optimal quality settings Remove metadata Resize on the server & serve scaled images Automate, automate, automate!
  47. 47. #SMX #SMXLondon @ab80 Prioritize visible content Load main content first Required Reduce the size of the above-the-fold content < 14kB (compressed) Avoid render-blocking CSS and JavaScript (inline bare minimum, defer the rest) Make JavaScript asynchronous
  48. 48. #SMX #SMXLondon @ab80 Recap: PageSpeed Insights
  49. 49. #SMX #SMXLondon @ab80 Recap: Focus on Mobile Tab
  50. 50. #SMX #SMXLondon @ab80 Recap: Good is Enough
  51. 51. #SMX #SMXLondon @ab80 Recap: New Ranking Factor Goes live: July, 2018 Page Speed Update for Mobile Search Announced: 17th,Jan, 2018
  52. 52. #SMX #SMXLondon @ab80 Mobile Page Speed Experiment positions for 33,000 Top 30 keywords 1,000,000 analyzed pages Optimization Score First Contentful Paint (FCP) DOM Content Loaded (DCP)
  53. 53. #SMX #SMXLondon @ab80 b/w Average Optimization Score and Position 0.97Correlation Mobile Page Speed Experiment
  54. 54. #SMX #SMXLondon @ab80 Mobile Page Speed Experiment b/w Median FCP/DCL and Position Nocorrelation as of April, 2018
  55. 55. #SMX #SMXLondon @ab80 Mobile Page Speed Experiment Mobile Page Speed Experiment Data https://seopwr.st/2KwfVTn Professional software for full-cycle SEO campaigns by:
  56. 56. #SMX #SMXLondon @ab80 Thank you! Aleh Barysevich @ab80 www.link-assistant.com aleh@link-assistant.com

×