Forget AMP – Make Fast Sites! Jon Henshaw's Guide
•
8 j'aime•3,470 vues
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!
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (15)
Similaire à Forget AMP – Make Fast Sites! Jon Henshaw's Guide
Similaire à Forget AMP – Make Fast Sites! Jon Henshaw's Guide (20)
Dernier
Dernier (20)
Forget AMP – Make Fast Sites! Jon Henshaw's Guide
- 2. Al Gore invented the internet 1983 A brief history of the internet
- 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. 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. 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. 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
- 8. 🐴💩
- 10. Do you get traffic from sites other than Google?
- 11. ✅ Do you get traffic from sites other than Google? Do you get direct traffic and share your URL offline?
- 12. ✅ Do you get traffic from sites other than Google? ✅ Do you get direct traffic? Do you like having control of your site?
- 13. ✅ 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
- 14. AMP vs Open Web
- 16. Forbes AMP post hosted on Google
- 17. Ads
- 19. More Ads Every single screen view is interrupted with ads
- 20. MORads!!! 😱
- 22. Simple CTA to signup for email newsletter
- 23. Only one ad after the introduction
- 25. “Google’s AMP doesn’t fix bad UX, but it’s great at delivering more ads, FASTER!” @henshaw #BrightonSEO
- 26. Good UX is a conscious decision
- 27. Why fast sites?
- 28. Fast sites get more traffic and make more money
- 29. How do I make my site fast?
- 30. ☑ Refactor the code
- 31. Identify and test which JS and CSS code is actually being used
- 32. Conditionally serve code only on the pages that need it
- 33. Consolidate code that’s used on all pages into one JS and CSS file
- 34. Use inline CSS
- 35. Use inline JS (put at end of page)
- 36. ☑ Use System Fonts
- 37. Google’s fonts are great, but they can also slow down your site
- 38. Lato = 1.2MB 😲
- 39. Linked fonts should be used sparingly or not at all
- 40. 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; }
- 41. System fonts look great and are optimized for screens
- 43. Responsive images are not optimized images
- 44. Optimization is serving a different image
- 45. Do it with the SRCSET IMG attribute
- 46. SRCSET can deliver smaller and different images to improve speed and UX
- 47. Smaller versions for mobile 1024px 800px 550px 360px
- 48. Different versions for mobile
- 49. Versions optimized for UX Mobile Desktop
- 50. Regular IMG code <img src=“cat.png” alt="my cat">
- 51. 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" />
- 52. 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" />
- 53. 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" />
- 55. Reduce and compress image size
- 56. Use SVG for simple images and icons
- 57. Use PNG for screenshots and non-complex images
- 58. Use JPG for photos and complex images
- 62. ☑ Cache, Gzip & HTTP/2
- 65. Gzip via PHP
- 68. CDN and HTTP/2
- 71. HTTP/2, CDN, Security, SSL raven.link/freessl
- 72. ☑ Improve UX
- 73. A good UX is clear, focused and doesn't overwhelm the visitor
- 74. Pages overloaded with content and numerous ads disorients the visitor
- 75. Focus on the primary purpose and consider a linear presentation of content
- 76. Use Resource Hints to speed up navigation
- 77. Use prefetch to load resources in the background
- 79. Use prerender for pages you’re confident the user will visit next