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!

1. Jon Henshaw
Forget AMP – Make Fast Sites!
@henshaw
https://www.slideshare.net/jonhenshaw

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. 🐴💩

9. AMP is Google-centric

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

18. Persistent
overlay ad

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

24. Uninterrupted
reading
😍

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

42. ☑ Optimize images

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

54. SRCSET Responsive Images
raven.link/srcsetwp

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

59. Compress with ImageOptim
raven.link/imageoptim

60. Compress with FileOptim
raven.link/fileoptim

61. EWWW Image Optimizer
raven.link/imgoptwp

62. ☑ Cache, Gzip & HTTP/2

63. WP Rocket
raven.link/rocket

64. Gzip via .htaccess

65. Gzip via PHP

66. Test Gzip
raven.link/gtest

67. Gzip Resource
raven.link/gzip

68. CDN and HTTP/2

69. HTTP/1
versus
HTTP/2

70. HTTP/1
versus
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

78. <link rel=“prefetch” href=“/js/important.js“ >

79. Use prerender for pages you’re
confident the user will visit next

80. <link rel=“prerender” href=“/tutorial/4/“ >

81. Adapted from
makefastsites.com