My Pubcon presentation about the need to make fast sites and how to do it.

1. @henshaw #pubcon
Make Fast Sites
Presented by: Jon Henshaw

2. @henshaw #pubcon
Why do I need to make a fast site?

3. @henshaw #pubcon
Fast sites get more traffic

4. @henshaw #pubcon
Fast sites make more money

5. @henshaw #pubcon
“Cool! I’ll use AMP for that.”

6. @henshaw #pubcon
WAIT! 😱

7. @henshaw #pubcon
AMP is about Google, not you

8. @henshaw #pubcon
Do you get traffic from
sites other than Google?

9. @henshaw #pubcon
Do you get direct traffic
and share your URL offline?

10. @henshaw #pubcon
Do you like having
control of your site?

11. @henshaw #pubcon
Did you know there was already a
standard for web pages called HTML?
It makes AMP markup
redundant and unnecessary

12. @henshaw #pubcon
You need a fast site, not AMP

13. @henshaw #pubcon
AMP is made for serving ads, faster

14. @henshaw #pubcon
Good UX is a conscious decision

15. @henshaw #pubcon
☑ Optimize code

16. @henshaw #pubcon
Identify and test which JS and
CSS code is actually being used

17. @henshaw #pubcon
Conditionally serve code

18. @henshaw #pubcon
Consolidate JS and CSS code

19. @henshaw #pubcon
Use inline CSS and JS

20. @henshaw #pubcon
☑ Optimize fonts

21. @henshaw #pubcon
Google Fonts are great, but they
can also slow down your site

22. @henshaw #pubcon
1.6 MB 😲

23. @henshaw #pubcon
Linked fonts should be used sparingly

24. @henshaw #pubcon
Consider using system fonts instead
body { font-family:-apple-system,
BlinkMacSystemFont,"Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell","Fira Sans",
"Droid Sans", "Helvetica Neue",sans-serif; }

25. @henshaw #pubcon
System fonts look great and are optimized for screens

26. @henshaw #pubcon
☑ Optimize Images

27. @henshaw #pubcon
Responsive images are not optimized images

28. @henshaw #pubcon
Optimization is serving a different image

29. @henshaw #pubcon
Do it with the SRCSET IMG attribute

30. @henshaw #pubcon
SRCSET can deliver smaller and different
images to improve speed and UX

31. @henshaw #pubcon
Smaller versions for mobile
1024px
800px
550px
360px

32. @henshaw #pubcon
Different versions for mobile

33. @henshaw #pubcon
Versions optimized for UX
Mobile Desktop

34. @henshaw #pubcon
Regular IMG code
<img src=“cat.png” alt=“my cat”>

35. @henshaw #pubcon
SRCSET is an IMG attribute
<img src=“cat.png” alt=“my cat” srcset=“cat-
hd.png 2x, cat-sm.png 320w, cat-sm-had.png 320w
2x, cat-med.png 768w, cat-med-hd.png 768 2x”>

36. @henshaw #pubcon
Specify device width
<img src=“cat.png” alt=“my cat” srcset=“cat-
hd.png 2x, cat-sm.png 320w, cat-sm-had.png 320w
2x, cat-med.png 768w, cat-med-hd.png 768w 2x”>

37. @henshaw #pubcon
Specify Screen Resolution
<img src=“cat.png” alt=“my cat” srcset=“cat-
hd.png 2x, cat-sm.png 320w, cat-sm-had.png 320w
2x, cat-med.png 768w, cat-med-hd.png 768w 2x”>

38. @henshaw #pubcon
WordPress supports SRCSET natively, but it doesn’t
work if you want to use different images

39. @henshaw #pubcon
Reduce and compress image size

40. @henshaw #pubcon
Use SVG for
simple images
and icons

41. @henshaw #pubcon
Use PNG for
screenshots and
non-complex
images

42. @henshaw #pubcon
Use JPG for
photos and
complex images

43. @henshaw #pubcon
Compress with ImageOptim
https://imageoptim.com/

44. @henshaw #pubcon
Compress with FileOptimizer
https://coywolf.io/fileoptimizer

45. @henshaw #pubcon
EWWW Image Optimizer
https://coywolf.io/ewww

46. @henshaw #pubcon
☑ Optimize Server-Side

47. @henshaw #pubcon
WP Rocket
https://wp-rocket.me/

48. @henshaw #pubcon
Gzip via .htaccess

49. @henshaw #pubcon
Gzip via PHP

50. @henshaw #pubcon
Test Gzip
https://coywolf.io/gziptest

51. @henshaw #pubcon
Gzip Resource
https://coywolf.io/gzip

52. @henshaw #pubcon
Use a CDN and HTTP/2

53. @henshaw #pubcon
HTTP/1.1

54. @henshaw #pubcon
HTTP/2

55. @henshaw #pubcon
HTTP/2, CDN, Security, and SSL
https://coywolf.io/freessl

56. @henshaw #pubcon
☑ Optimize UX

57. @henshaw #pubcon
A good UX is clear, focused and
doesn't overwhelm the visitor

58. @henshaw #pubcon
Pages overloaded with content and
numerous ads disorients the visitor.

59. @henshaw #pubcon
Focus on the primary purpose and consider
a linear presentation of content

60. @henshaw #pubcon
Use Resource Hints to speed up navigation

61. @henshaw #pubcon
Use prefetch to load pages or
resources in the background
<link rel="prefetch" href="/signup-form/ as="html">
<link rel="prefetch" href="/js/script.js" as="script">

62. @henshaw #pubcon
Use prerender for pages you’re
confident the user will visit next
<link rel="prerender" href="/tutorial/step-4/">
<link rel="prerender" href="/landingpage/">

63. @henshaw #pubcon
Adapted from
https://makefastsites.com/

64. @henshaw #pubcon
My next big thing…
https://coywolf.marketing/