$30 off During Our Annual Pro Sale. View Details »

Engineering Faster Web Experiences in Plain Sight

Engineering Faster Web Experiences in Plain Sight

Otemuyiwa Prosper

April 13, 2019
Tweet

More Decks by Otemuyiwa Prosper

Other Decks in Programming

Transcript

  1. ENGINEERING:
    WEB
    EXPERIENCES
    PROSPER OTEMUYIWA | forloop Zimbabwe, Harare 2019
    FASTER
    ...in plain sight

    View Slide

  2. Harare is Cold, Why is Lagos so hot?

    View Slide

  3. VIBRANIUM OPEN SOURCERER
    @unicodeveloper

    View Slide

  4. DEVELOPER ADVOCATE | COMMUNITY BUILDER
    forLoop Africa
    Laravel Nigeria
    Angular Nigeria
    Webpack Africa

    View Slide

  5. STEVE:
    SOUDERS
    Ex-Head Performance Engineer @ Google
    Ex-Chief Performance Officer @ Yahoo!
    ..Inspired by

    View Slide

  6. YOUR USERS NOW!

    View Slide

  7. WHAT DO YOU
    NEED TO DO TO
    ENGINEER FAST
    LOADING
    EXPERIENCES

    View Slide

  8. Let’s go!

    View Slide

  9. 1. FEWER HTTP
    REQUESTS!
    The fewer the requests,
    the faster content is
    served to the users.

    View Slide

  10. - Webpack
    - Parcel
    TOOLS FOR MERGING

    View Slide

  11. 2. TAKE ADVANTAGE
    OF CDNS! ⚓
    ..push assets to the edge,
    use a content delivery
    network

    View Slide

  12. 3. Stylesheets at the top

    SCRIPTS at the bottom

    View Slide

  13. 4. Prefetch Resources

    Use Link tags to prefetch
    crossorigin>

    View Slide

  14. 5. Minify
    Everything

    View Slide

  15. #Bundle & Minify
    Everything ⚓
    Just Webpack away!

    View Slide

  16. 6. Defer Scripts

    - Defer heavy loading scripts

    View Slide

  17. 7. Have a font
    loading strategy

    View Slide

  18. 8. Code Splitting & Tree Shaking
    1. Webpack
    2. Rollup
    3. Send less JavaScript to the user

    View Slide

  19. How do you handle
    Images?
    Yourself???

    View Slide

  20. 9. Image & Files
    Handling ⚓
    1. Let a service handle your images &
    files e.g Cloudinary
    2. Compression of Images & Files
    3. Progressive Image Rendering
    4. Lazy Loading

    View Slide

  21. speedcurve.com
    Chrome DevTools
    webspeedtest.cloudinary.com
    Tools for measuring speed?

    View Slide

  22. Web speed - Image Analysis

    View Slide

  23. Network/Performance Tab - Chrome DevTools

    View Slide

  24. Speed Curve

    View Slide

  25. Now, go forth & make your site fast

    View Slide

  26. THANKS, ANY QUESTIONS? I’M EVERYWHERE
    GITHUB MEDIUM TWITTER
    @unicodeveloper
    CODEPEN

    View Slide