Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Forget AMP – Make Fast Sites!

2.515 visualizaciones

Publicado el

AMP is a knee jerk reaction to how we’ve ruined the web experience for visitors. Learn how to take back control of your site from Google and make your site fast again!

Publicado en: Marketing
  • Real Money Streams ~ Create multiple streams of wealth from your home! ▲▲▲ http://ishbv.com/ezpayjobs/pdf
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Forget AMP – Make Fast Sites!

  1. 1. Jon Henshaw Forget AMP – Make Fast Sites! @henshaw https://www.slideshare.net/jonhenshaw
  2. 2. Al Gore invented the internet 1983 A brief history of the internet
  3. 3. Al Gore invented the internet 1983 1999 goatse.cx launched and made us question everything we knew A brief history of the internet
  4. 4. Al Gore invented the internet 1983 2003ish Fast internet! 1999 goatse.cx launched and made us question everything we knew A brief history of the internet
  5. 5. Al Gore invented the internet 1983 2003ish Fast internet! 1999 goatse.cx launched and made us question everything we knew 2010ish
 give or take 5 years…I’m not good with dates Marketers and advertisers began their campaign to ruin the internet A brief history of the internet
  6. 6. Al Gore invented the internet 1983 2003ish Fast internet! The ruining of the internet is almost complete Nowish 1999 goatse.cx launched and made us question everything we knew 2010ish
 give or take 5 years…I’m not good with dates Marketers and advertisers began their campaign to ruin the internet A brief history of the internet
  7. 7. 🐴💩
  8. 8. AMP is Google-centric
  9. 9. Do you get traffic from sites other than Google?
  10. 10. ✅ Do you get traffic from sites other than Google? Do you get direct traffic and share your URL offline?
  11. 11. ✅ Do you get traffic from sites other than Google? ✅ Do you get direct traffic? Do you like having control of your site?
  12. 12. ✅ Do you get traffic from sites other than Google? ✅ Do you get direct traffic? ✅ Do you like having control of your site? You need a fast site, not AMP
  13. 13. AMP vs Open Web
  14. 14. Forbes AMP post hosted on Google
  15. 15. Ads
  16. 16. Persistent overlay ad
  17. 17. More Ads Every single screen view is interrupted with ads
  18. 18. MORads!!! 😱
  19. 19. Simple CTA to signup for email newsletter
  20. 20. Only one ad after the introduction
  21. 21. Uninterrupted reading 😍
  22. 22. “Google’s AMP doesn’t fix bad UX, but it’s great at delivering more ads, FASTER!” @henshaw #BrightonSEO
  23. 23. Good UX is a conscious decision
  24. 24. Why fast sites?
  25. 25. Fast sites get more traffic and make more money
  26. 26. How do I make my site fast?
  27. 27. ☑ Refactor the code
  28. 28. Identify and test which JS and CSS code is actually being used
  29. 29. Conditionally serve code only on the pages that need it
  30. 30. Consolidate code that’s used on all pages into one JS and CSS file
  31. 31. Use inline CSS
  32. 32. Use inline JS (put at end of page)
  33. 33. ☑ Use System Fonts
  34. 34. Google’s fonts are great, but they can also slow down your site
  35. 35. Lato = 1.2MB 😲
  36. 36. Linked fonts should be used sparingly or not at all
  37. 37. Use system fonts instead with this CSS code body { font-family:-apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif; }
  38. 38. System fonts look great and are optimized for screens
  39. 39. ☑ Optimize images
  40. 40. Responsive images are not optimized images
  41. 41. Optimization is serving a different image
  42. 42. Do it with the SRCSET IMG attribute
  43. 43. SRCSET can deliver smaller and different images to improve speed and UX
  44. 44. Smaller versions for mobile 1024px 800px 550px 360px
  45. 45. Different versions for mobile
  46. 46. Versions optimized for UX Mobile Desktop
  47. 47. Regular IMG code <img src=“cat.png” alt="my cat">
  48. 48. SRCSET is an IMG attribute <img src="cat.png"alt="my cat" srcset="cat-hd.png 2x, cat-sm.png 320w, cat-sm-hd.png 320w 2x, cat-med.png 768w, cat-med-hd.png 768w 2x" />
  49. 49. Specify device width <img src="cat.png"alt="my cat" srcset="cat-hd.png 2x, cat-sm.png 320w, cat-sm-hd.png 320w 2x, cat-med.png 768w, cat-med-hd.png 768w 2x" />
  50. 50. Specify High DPI <img src="cat.png"alt="my cat" srcset="cat-hd.png 2x, cat-sm.png 320w, cat-sm-hd.png 320w 2x, cat-med.png 768w, cat-med-hd.png 768w 2x" />
  51. 51. SRCSET Responsive Images raven.link/srcsetwp
  52. 52. Reduce and compress image size
  53. 53. Use SVG for simple images and icons
  54. 54. Use PNG for screenshots and non-complex images
  55. 55. Use JPG for photos and complex images
  56. 56. Compress with ImageOptim raven.link/imageoptim
  57. 57. Compress with FileOptim raven.link/fileoptim
  58. 58. EWWW Image Optimizer raven.link/imgoptwp
  59. 59. ☑ Cache, Gzip & HTTP/2
  60. 60. WP Rocket raven.link/rocket
  61. 61. Gzip via .htaccess
  62. 62. Gzip via PHP
  63. 63. Test Gzip raven.link/gtest
  64. 64. Gzip Resource raven.link/gzip
  65. 65. CDN and HTTP/2
  66. 66. HTTP/1 versus HTTP/2
  67. 67. HTTP/1 versus HTTP/2
  68. 68. HTTP/2, CDN, Security, SSL raven.link/freessl
  69. 69. ☑ Improve UX
  70. 70. A good UX is clear, focused and doesn't overwhelm the visitor
  71. 71. Pages overloaded with content and numerous ads disorients the visitor
  72. 72. Focus on the primary purpose and consider a linear presentation of content
  73. 73. Use Resource Hints to speed up navigation
  74. 74. Use prefetch to load resources in the background
  75. 75. <link rel=“prefetch” href=“/js/important.js“ >
  76. 76. Use prerender for pages you’re confident the user will visit next
  77. 77. <link rel=“prerender” href=“/tutorial/4/“ >
  78. 78. Adapted from makefastsites.com

×