Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fast websites, and how to make them

Fast websites, and how to make them

WordCamp Harare 2017 #WCHRE, show notes: https://glueckpress.com/wchre/

Caspar Hübinger

November 04, 2017
Tweet

More Decks by Caspar Hübinger

Other Decks in Programming

Transcript

  1. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    FAST
    WEBSITES
    AND HOW TO MAKE THEM

    View full-size slide

  2. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    *CLEARS THROAT FOR LAST-MINUTE INTRO*

    View full-size slide

  3. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    @GLUECKPRESS #WCHRE
    98%
    CONNECTIONS VIA MOBILE

    View full-size slide

  4. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    @GLUECKPRESS #WCHRE
    —GOOGLE
    NO MATTER WHAT,
    FASTER IS BETTER
    AND
    LESS IS MORE.

    View full-size slide

  5. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    @GLUECKPRESS #WCHRE
    ENERGY FOOTPRINT
    BANDWIDTH
    SEARCH RANKING
    USABILITY
    VISITOR SATISFACTION
    BOUNCE RATE
    PAGE VIEWS
    CONVERSION
    REVENUE

    View full-size slide

  6. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    @GLUECKPRESS #WCHRE
    98%
    CONNECTIONS VIA MOBILE

    View full-size slide

  7. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    @GLUECKPRESS #WCHRE

    View full-size slide

  8. @GLUECKPRESS #WCHRE CC BY-SA 4.0

    View full-size slide

  9. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    *END INTRO. PHEW!*

    View full-size slide

  10. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    @GLUECKPRESS #WCHRE
    3MB
    AVERAGEMOBILEPAGESIZE

    View full-size slide

  11. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    @GLUECKPRESS #WCHRE
    0.10$
    AVERAGE
    PAGE SIZE
    PER
    PAGEVIEW
    PAGEVIEWS
    300MB/$10
    DATAPLAN
    3 MB
    100

    View full-size slide

  12. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    @GLUECKPRESS #WCHRE
    0.03$
    AVERAGE
    PAGE SIZE
    PER
    PAGE VIEW
    PAGE VIEWS
    1,000 MB/$10
    DATA PLAN
    3 MB
    333

    View full-size slide

  13. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    @GLUECKPRESS #WCHRE
    0.03$ 1 PAGE VIEW
    GERMANY
    USA UK
    1 PAGE VIEW
    ZIMBABWE
    3 MB
    0.10$
    AVERAGE
    PAGE SIZE

    View full-size slide

  14. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    !
    !
    ! !
    3 MB
    AVERAGE PAGE SIZE
    ON THE WWW

    View full-size slide

  15. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    —PAUL BAKAUS
    NOBODY
    CARES HOW
    FAST YOUR SITE IS.
    JUST HOW
    FAST IT FEELS.

    View full-size slide

  16. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    —ZIMBABWEANS
    “EXCUSE ME?!”
    NOBODY
    CARES HOW
    FAST YOUR SITE IS.
    JUST HOW
    FAST IT FEELS.
    !
    !
    !

    View full-size slide

  17. @GLUECKPRESS #WCHRE CC BY-SA 4.0

    View full-size slide

  18. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    MAKE FAST
    WEBSITES.
    THE EASIEST
    WAY TO MAKE
    WEBSITES FAST?

    View full-size slide

  19. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    PERFORMANCE

    OPTIMISATION
    DEVELOPERS.GOOGLE.COM/SPEED/DOCS/INSIGHTS/RULES

    View full-size slide

  20. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    1. AVOID LANDING PAGE REDIRECTS
    2. ENABLE COMPRESSION
    3. IMPROVE SERVER RESPONSE TIME
    4. LEVERAGE BROWSER CACHING
    5. MINIFY RESOURCES
    6. OPTIMISE IMAGES
    7. OPTIMISE CSS DELIVERY
    8. PRIORITISE VISIBLE CONTENT
    9. REMOVE RENDER-BLOCKING JAVASCRIPT
    10.USE ASYNCHRONOUS SCRIPTS
    DEVELOPERS.GOOGLE.COM/SPEED/DOCS/INSIGHTS/RULES

    View full-size slide

  21. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    1. AVOID LANDING PAGE REDIRECTS
    2. ENABLE COMPRESSION
    3. IMPROVE SERVER RESPONSE TIME
    4. LEVERAGE BROWSER CACHING
    5. MINIFY RESOURCES
    6. OPTIMISE IMAGES
    7. OPTIMISE CSS DELIVERY
    8. PRIORITISE VISIBLE CONTENT
    9. REMOVE RENDER-BLOCKING JAVASCRIPT
    10.USE ASYNCHRONOUS SCRIPTS
    "
    DEVELOPERS.GOOGLE.COM/SPEED/DOCS/INSIGHTS/RULES

    View full-size slide

  22. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    YOUR FRIENDLY
    RDPRESS
    PERFORMANCE
    CHECKLIST
    W

    View full-size slide

  23. YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    @GLUECKPRESS #WCHRE CC BY-SA 4.0
    KNOW YOUR OWN
    WEBSITE ADDRESS
    1

    View full-size slide

  24. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    WP-ROCKET.ME
    HTTP:/
    /WP-ROCKET.ME
    HTTPS:/
    /WP-ROCKET.ME
    HTTP:/
    /WWW.WP-ROCKET.ME
    HTTPS:/
    /WWW.WP-ROCKET.ME

    View full-size slide

  25. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    WP-ROCKET.ME
    HTTP:/
    /WP-ROCKET.ME
    HTTPS:/
    /WP-ROCKET.ME
    HTTP:/
    /WWW.WP-ROCKET.ME
    HTTPS:/
    /WWW.WP-ROCKET.ME

    View full-size slide

  26. YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    @GLUECKPRESS #WCHRE CC BY-SA 4.0
    PREPARE FOR
    SLOW NETWORKS
    2

    View full-size slide

  27. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    NETWORKTHROTTLEDTO3G

    View full-size slide

  28. YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    @GLUECKPRESS #WCHRE CC BY-SA 4.0
    PAY FOR QUALITY
    HOSTING
    3

    View full-size slide

  29. YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    @GLUECKPRESS #WCHRE CC BY-SA 4.0
    AVOID EXTERNAL
    SERVICES
    4

    View full-size slide

  30. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST

    View full-size slide

  31. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST

    View full-size slide

  32. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST

    View full-size slide

  33. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST

    View full-size slide

  34. YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    @GLUECKPRESS #WCHRE CC BY-SA 4.0
    5 COMMIT TO
    RELEVANT IMAGES

    View full-size slide

  35. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST

    View full-size slide

  36. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST

    View full-size slide

  37. YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    @GLUECKPRESS #WCHRE CC BY-SA 4.0
    AUTOMATE IMAGE
    OPTIMISATION
    6

    View full-size slide

  38. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST

    View full-size slide

  39. YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    @GLUECKPRESS #WCHRE CC BY-SA 4.0
    RELY ON A
    LEAN THEME
    7

    View full-size slide

  40. @GLUECKPRESS #WCHRE CC BY-SA 4.0

    View full-size slide

  41. YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    @GLUECKPRESS #WCHRE CC BY-SA 4.0
    MAKE A CONTENT
    STRATEGY
    8

    View full-size slide

  42. @GLUECKPRESS #WCHRE CC BY-SA 4.0

    View full-size slide

  43. @GLUECKPRESS #WCHRE CC BY-SA 4.0

    View full-size slide

  44. YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    @GLUECKPRESS #WCHRE CC BY-SA 4.0
    MINIMISE THE USE
    OF JAVASCRIPT
    9

    View full-size slide

  45. YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    @GLUECKPRESS #WCHRE CC BY-SA 4.0
    REUSE REQUESTS
    WITH CACHING
    10

    View full-size slide

  46. YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    @GLUECKPRESS #WCHRE CC BY-SA 4.0
    DEVELOPERS:
    APPLY CODING
    STANDARDS
    #

    View full-size slide

  47. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    DEVELOPER.WORDPRESS.ORG/THEMES
    DEVELOPER.WORDPRESS.ORG/PLUGINS

    View full-size slide

  48. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    YOUR FRIENDLY W RDPRESS PERFORMANCE CHECKLIST
    1. KNOW YOUR OWN WEBSITE ADDRESS
    2. PREPARE FOR SLOW NETWORKS
    3. PAY FOR QUALITY HOSTING
    4. AVOID EXTERNAL REQUESTS
    5. COMMIT TO RELEVANT IMAGES
    6. AUTOMATE IMAGE OPTIMISATION
    7. RELY ON A LEAN THEME
    8. MAKE A CONTENT STRATEGY
    9. MINIMISE THE USE OF JAVASCRIPT
    10.REUSE REQUESTS WITH CACHING

    View full-size slide

  49. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    SOURCES:
    GLUECKPRESS.COM/WCHRE/

    View full-size slide

  50. @GLUECKPRESS #WCHRE CC BY-SA 4.0
    CUSTOMER SUPPORT
    @WP_ROCKET
    CASPAR HÜBINGER
    @GLUECKPRESS
    ASK ME ANYTHING

    View full-size slide