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.

Make Fast Sites

263 views

Published on

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

Published in: Marketing
  • Amazing guide! Thank you!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Make Fast Sites

  1. 1. @henshaw #pubcon Make Fast Sites Presented by: Jon Henshaw
  2. 2. @henshaw #pubcon Why do I need to make a fast site?
  3. 3. @henshaw #pubcon Fast sites get more traffic
  4. 4. @henshaw #pubcon Fast sites make more money
  5. 5. @henshaw #pubcon “Cool! I’ll use AMP for that.”
  6. 6. @henshaw #pubcon WAIT! 😱
  7. 7. @henshaw #pubcon AMP is about Google, not you
  8. 8. @henshaw #pubcon Do you get traffic from sites other than Google?
  9. 9. @henshaw #pubcon Do you get direct traffic and share your URL offline?
  10. 10. @henshaw #pubcon Do you like having control of your site?
  11. 11. @henshaw #pubcon Did you know there was already a standard for web pages called HTML? It makes AMP markup redundant and unnecessary
  12. 12. @henshaw #pubcon You need a fast site, not AMP
  13. 13. @henshaw #pubcon AMP is made for serving ads, faster
  14. 14. @henshaw #pubcon Good UX is a conscious decision
  15. 15. @henshaw #pubcon ☑ Optimize code
  16. 16. @henshaw #pubcon Identify and test which JS and CSS code is actually being used
  17. 17. @henshaw #pubcon Conditionally serve code
  18. 18. @henshaw #pubcon Consolidate JS and CSS code
  19. 19. @henshaw #pubcon Use inline CSS and JS
  20. 20. @henshaw #pubcon ☑ Optimize fonts
  21. 21. @henshaw #pubcon Google Fonts are great, but they can also slow down your site
  22. 22. @henshaw #pubcon 1.6 MB 😲
  23. 23. @henshaw #pubcon Linked fonts should be used sparingly
  24. 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. 25. @henshaw #pubcon System fonts look great and are optimized for screens
  26. 26. @henshaw #pubcon ☑ Optimize Images
  27. 27. @henshaw #pubcon Responsive images are not optimized images
  28. 28. @henshaw #pubcon Optimization is serving a different image
  29. 29. @henshaw #pubcon Do it with the SRCSET IMG attribute
  30. 30. @henshaw #pubcon SRCSET can deliver smaller and different images to improve speed and UX
  31. 31. @henshaw #pubcon Smaller versions for mobile 1024px 800px 550px 360px
  32. 32. @henshaw #pubcon Different versions for mobile
  33. 33. @henshaw #pubcon Versions optimized for UX Mobile Desktop
  34. 34. @henshaw #pubcon Regular IMG code <img src=“cat.png” alt=“my cat”>
  35. 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. 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. 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. 38. @henshaw #pubcon WordPress supports SRCSET natively, but it doesn’t work if you want to use different images
  39. 39. @henshaw #pubcon Reduce and compress image size
  40. 40. @henshaw #pubcon Use SVG for simple images and icons
  41. 41. @henshaw #pubcon Use PNG for screenshots and non-complex images
  42. 42. @henshaw #pubcon Use JPG for photos and complex images
  43. 43. @henshaw #pubcon Compress with ImageOptim https://imageoptim.com/
  44. 44. @henshaw #pubcon Compress with FileOptimizer https://coywolf.io/fileoptimizer
  45. 45. @henshaw #pubcon EWWW Image Optimizer https://coywolf.io/ewww
  46. 46. @henshaw #pubcon ☑ Optimize Server-Side
  47. 47. @henshaw #pubcon WP Rocket https://wp-rocket.me/
  48. 48. @henshaw #pubcon Gzip via .htaccess
  49. 49. @henshaw #pubcon Gzip via PHP
  50. 50. @henshaw #pubcon Test Gzip https://coywolf.io/gziptest
  51. 51. @henshaw #pubcon Gzip Resource https://coywolf.io/gzip
  52. 52. @henshaw #pubcon Use a CDN and HTTP/2
  53. 53. @henshaw #pubcon HTTP/1.1
  54. 54. @henshaw #pubcon HTTP/2
  55. 55. @henshaw #pubcon HTTP/2, CDN, Security, and SSL https://coywolf.io/freessl
  56. 56. @henshaw #pubcon ☑ Optimize UX
  57. 57. @henshaw #pubcon A good UX is clear, focused and doesn't overwhelm the visitor
  58. 58. @henshaw #pubcon Pages overloaded with content and numerous ads disorients the visitor.
  59. 59. @henshaw #pubcon Focus on the primary purpose and consider a linear presentation of content
  60. 60. @henshaw #pubcon Use Resource Hints to speed up navigation
  61. 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. 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. 63. @henshaw #pubcon Adapted from https://makefastsites.com/
  64. 64. @henshaw #pubcon My next big thing… https://coywolf.marketing/

×