Engineering Faster Web Experiences in Plain Sight

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