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