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.

SearchLeeds 2019 - Polly Pospelova - How to hack rankings with page speed optimisation

353 views

Published on

Google first announced that website speed would become a ranking factor way back in 2010, but yet there’s been no evidence of it clearly having an impact. So to find out if speed and performance do indeed affect rankings, Delete’s SEO R&D team ran an experiment. They wanted to know if rankings could be ‘hacked’ by improving speed and performance and if they could, what it would take to do it. In this talk Polly shares exactly what her team did and more importantly what they achieved. From migrating to HTTP2 and advanced image manipulation, to ‘hacks’ for the handling of critical resources, all the crucial tactics involved that were needed to achieve a top performance score will be covered with real examples.

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

SearchLeeds 2019 - Polly Pospelova - How to hack rankings with page speed optimisation

  1. 1. © 2019 Delete @POLLY_P #SEARCHLEEDS How To Hack 
 Rankings With 
 Page Speed Optimisation POLLY POSPELOVA // DELETE AGENCY
  2. 2. @POLLY_P #SEARCHLEEDS 1. Why page speed is important. 2. How it affects rankings and conversions. 3. How to hack rankings with page speed optimisation 
 (based on a real experiment). What We’ll Cover.
  3. 3. @POLLY_P #SEARCHLEEDS Google uses over 200 ranking factors.
  4. 4. @POLLY_P #SEARCHLEEDS • Security • Page speed • Structured data (schema) • Content quality • Quality backlinks • Local and other signals
  5. 5. @POLLY_P #SEARCHLEEDS Why is page speed important?
  6. 6. @POLLY_P #SEARCHLEEDS 1. Page speed has a significant effect on conversions.
  7. 7. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS It takes
 15 seconds to fully load a mobile landing page.
  8. 8. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS That’s far too slow. 53% of mobile site visits leave a page that takes longer than three seconds to load.
  9. 9. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS Mobile site speed vs bounce.
  10. 10. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS Every second counts. 
 Speed has a direct impact on revenue.
  11. 11. @POLLY_P #SEARCHLEEDS 2. Page speed has a significant effect on search rankings.
  12. 12. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS Back in 2010, Google said page speed was a ranking factor on desktop searches. In 2018 it extended to mobile searches.
  13. 13. @POLLY_P #SEARCHLEEDS Yet, there’s been little evidence of it clearly having an impact.
  14. 14. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS Searchmetrics tested landing pages that rank in the top 20 search results for 10,000 keywords.
  15. 15. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS Page 1 Page 2
  16. 16. @POLLY_P #SEARCHLEEDS 3. Page speed has a significant effect on landing page experience, Quality Score and CPC.
  17. 17. @POLLY_P #SEARCHLEEDS Quality Score and CPC. 10 9 8 7 6 5 4 3 2 1 decreased by 50.00% decreased by 44.20% decreased by 37.50% decreased by 28.60% increased by 16.70% Google Benchmark increased by 25.00% increased by 67.30% increased by 150.00% increased by 400.00% YOUSAVE YOULOSE Source: Click Equations
  18. 18. @POLLY_P #SEARCHLEEDS £100,000 Google Ads Budget Quality Score
 change from 4 to 7 = £50K+ savings.
  19. 19. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS “So speed is something that does matter quite a bit to us and it has a big effect on users, so that’s something that I would personally take quite seriously and I think the the nice part about speed is there are various tools that give you pretty objective measures that you can actually work on.” John Mueller, Webmaster Trends Analyst at Google
  20. 20. @POLLY_P #SEARCHLEEDS Introducing Lighthouse.
  21. 21. @POLLY_P #SEARCHLEEDS An open-source, automated tool for improving the quality of web pages.
  22. 22. @POLLY_P #SEARCHLEEDS It offers opportunities for optimisation and estimated savings.
  23. 23. @POLLY_P #SEARCHLEEDS Why do big brands score so low?
  24. 24. @POLLY_P #SEARCHLEEDS
  25. 25. @POLLY_P #SEARCHLEEDS It isn’t easy!
  26. 26. @POLLY_P #SEARCHLEEDS The criteria is changing fast.
  27. 27. @POLLY_P #SEARCHLEEDS
  28. 28. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS Same site today.
  29. 29. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS But we already did a lot, just 18 months ago!
  30. 30. @POLLY_P #SEARCHLEEDS What does it take to get the perfect score now?
  31. 31. @POLLY_P #SEARCHLEEDS Hackathon.
  32. 32. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS We challenged ourselves to get a 100% score… without changing how the site looks. R&D.
  33. 33. @POLLY_P #SEARCHLEEDS Old vs New
  34. 34. @POLLY_P #SEARCHLEEDS Requests sent by page on first load // 17 vs 36 Volume of data transferred on first time load // 0.32 vs 2.5 Mb First page load finish in // 2,39 vs 6,39 sec Critical loaded in // 0.9 vs 2.3 sec Speed Index // 1.3 vs 5.2  -53% -870% -63% -61% -75%
  35. 35. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS Significant changes Our rankings improved, in some cases by almost two SERPs.
  36. 36. @POLLY_P #SEARCHLEEDS 1. HTTP/2. 2. Image quality. 3. Critical. 4. Only load what you need. 5. Modern JS.
  37. 37. @POLLY_P #SEARCHLEEDS 1. HTTP2.0.
  38. 38. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS HTTP/1 HTTP/2
  39. 39. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS HTTP/1
  40. 40. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS HTTP/2
  41. 41. @POLLY_P #SEARCHLEEDS 2. Image quality.
  42. 42. @POLLY_P #SEARCHLEEDS Deferring offscreen images.
  43. 43. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS
  44. 44. @POLLY_P #SEARCHLEEDS Some images are not visible on tablets. WIDE MEDIUM
  45. 45. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS • We load all images. • Universal HTML, CSS and JS.
  46. 46. @POLLY_P #SEARCHLEEDS Serving images in next-gen formats.
  47. 47. @POLLY_P #SEARCHLEEDS The new WebP image format provides better compression than a PNG or a JPEG. This means faster downloads and less data.
  48. 48. @POLLY_P #SEARCHLEEDS JPEG 11kb90kb WebP @ 50%
  49. 49. @POLLY_P #SEARCHLEEDS Properly sized images.
  50. 50. @POLLY_P #SEARCHLEEDS Adaptive image sizes.
  51. 51. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS Old.
  52. 52. The adaptive images markup is generated automatically, we don’t ask our designers or UI developers to do it. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS New.
  53. 53. @POLLY_P #SEARCHLEEDS Lazy load.
  54. 54. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS The images only load when they get into the user’s viewport and not before.
  55. 55. @POLLY_P #SEARCHLEEDS 3. Critical. BRIGHTONSEO
  56. 56. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS Abrowser doesn’tstart rendering apageuntilitloads andparsesallresources.
  57. 57. @POLLY_P #SEARCHLEEDS The first load.
  58. 58. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS We only take the necessary resources (JS, CSS) for a page and then inline them into HTML markup, in a <head> tag.
  59. 59. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS After theinlinemarkuploads, wethenload allthe necessaryresourcesin thebackgroundand cachethem.
  60. 60. @POLLY_P #SEARCHLEEDS Next load.
  61. 61. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS We check if the browser already has the resources cached and we skip inlining.
  62. 62. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS The content loads instantly on the first and all subsequent loads.
  63. 63. @POLLY_P #SEARCHLEEDS 4. Only load what you need.
  64. 64. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS We broke up all the CSS and JS into small files for each logical block. This included: the form, header, footer, navigation etc.
  65. 65. HTTP/2 is ideal for loading lots of tiny resources quickly and without latency in one connection. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS
  66. 66. @POLLY_P #SEARCHLEEDS 5. Modern JS.
  67. 67. Old. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS The evaluation time of Modern JS is 300% faster and the file size is 20% less. New. The Modern JS evaluation is 41 milliseconds compared to 133 milliseconds, which is a huge
  68. 68. @POLLY_P #SEARCHLEEDS My advice.
  69. 69. @POLLY_P #SEARCHLEEDS 1. It is time for SEOs to work closely with developers.
  70. 70. @POLLY_P #SEARCHLEEDS Unless you can tackle a Lighthouse Trace on your own.
  71. 71. @POLLY_P #SEARCHLEEDS 2. Page speed optimisation is not a one-off task.
  72. 72. @POLLY_P #SEARCHLEEDS What scores 100% today, will not score the same tomorrow.
  73. 73. @POLLY_P #SEARCHLEEDS 100% is possible!
  74. 74. @POLLY_P #SEARCHLEEDS
  75. 75. @POLLY_P #SEARCHLEEDS Requests sent by page on first load // 17 vs 36 Volume of data transferred on first time load // 0.32 vs 2.5 Mb First page load finish in // 2,39 vs 6,39 sec Critical loaded in // 0.9 vs 2.3 sec Speed Index // 1.3 vs 5.2  -53% -870% -63% -61% -75%
  76. 76. @POLLY_P #SEARCHLEEDS Learn more and download the slides here: www.deleteagency.com/lighthouse
  77. 77. © Copyright 2019 Delete @POLLY_P #SEARCHLEEDS Thank you.

×