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

338 views

Published on

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

Published in: Marketing
  • I am suffering form worst financial positions i have no money to pay rent or utility bills, My friend told me about this website for some money. I start broken hart but i was surprised to see the results. Now within a month i am making $125 per hour. I recommend all of you who want to make hand some earning to join the link... ★★★ http://t.cn/AisJWUCf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • My last month paycheck was for 11000 dollars… All i did was simple online work from comfort at home for 3-4 hours/day that I got from this agency I discovered over the internet and they paid me for it 95 bucks every hour.... click here ♣♣♣ http://t.cn/AisJWYf4
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Unlock Her Legs - How to Turn a Girl On In 10 Minutes or Less... ♣♣♣ http://t.cn/AiurDrZp
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • FREE TRAINING: "How to Earn a 6-Figure Side-Income Online" ... ★★★ https://tinyurl.com/y3ylrovq
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Legitimate jobs paying $40/h Tap into the booming online job, industry and start working now! ■■■ https://tinyurl.com/y4urott2
       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/

×