Engineering Faster Web Experiences in Plain Sight

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