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

Engineering Faster Web Experiences in Plain Sight

Engineering Faster Web Experiences in Plain Sight

1097492785caf9ffeebffeb624202d8f?s=128

Otemuyiwa Prosper

April 13, 2019
Tweet

Transcript

  1. ENGINEERING: WEB EXPERIENCES PROSPER OTEMUYIWA | forloop Zimbabwe, Harare 2019

    FASTER ...in plain sight
  2. Harare is Cold, Why is Lagos so hot?

  3. VIBRANIUM OPEN SOURCERER @unicodeveloper

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

    Nigeria Webpack Africa
  5. STEVE: SOUDERS Ex-Head Performance Engineer @ Google Ex-Chief Performance Officer

    @ Yahoo! ..Inspired by
  6. YOUR USERS NOW!

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

    EXPERIENCES
  8. Let’s go!

  9. 1. FEWER HTTP REQUESTS! The fewer the requests, the faster

    content is served to the users.
  10. - Webpack - Parcel TOOLS FOR MERGING

  11. 2. TAKE ADVANTAGE OF CDNS! ⚓ ..push assets to the

    edge, use a content delivery network
  12. 3. Stylesheets at the top SCRIPTS at the bottom

  13. 4. Prefetch Resources Use Link tags to prefetch <link rel="prefetch"

    href="/fonts/arial.ttf" as="font" crossorigin> <link rel="prerender" href="/next-page.html">
  14. 5. Minify Everything

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

  16. 6. Defer Scripts <script defer></script> - Defer heavy loading scripts

  17. 7. Have a font loading strategy

  18. 8. Code Splitting & Tree Shaking 1. Webpack 2. Rollup

    3. Send less JavaScript to the user
  19. How do you handle Images? Yourself???

  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
  21. speedcurve.com Chrome DevTools webspeedtest.cloudinary.com Tools for measuring speed? ⛷

  22. Web speed - Image Analysis

  23. Network/Performance Tab - Chrome DevTools

  24. Speed Curve

  25. Now, go forth & make your site fast

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