ENGINEERING:WEBEXPERIENCESPROSPER OTEMUYIWA | forloop Zimbabwe, Harare 2019FASTER...in plain sight
View Slide
Harare is Cold, Why is Lagos so hot?
VIBRANIUM OPEN SOURCERER@unicodeveloper
DEVELOPER ADVOCATE | COMMUNITY BUILDERforLoop AfricaLaravel NigeriaAngular NigeriaWebpack Africa
STEVE:SOUDERSEx-Head Performance Engineer @ GoogleEx-Chief Performance Officer @ Yahoo!..Inspired by
YOUR USERS NOW!
WHAT DO YOUNEED TO DO TOENGINEER FASTLOADINGEXPERIENCES
Let’s go!
1. FEWER HTTPREQUESTS! The fewer the requests,the faster content isserved to the users.
- Webpack- ParcelTOOLS FOR MERGING
2. TAKE ADVANTAGEOF CDNS! ⚓..push assets to the edge,use a content deliverynetwork
3. Stylesheets at the topSCRIPTS at the bottom
4. Prefetch ResourcesUse Link tags to prefetchcrossorigin>
5. MinifyEverything
#Bundle & MinifyEverything ⚓Just Webpack away!
6. Defer Scripts - Defer heavy loading scripts
7. Have a fontloading strategy
8. Code Splitting & Tree Shaking1. Webpack2. Rollup3. Send less JavaScript to the user
How do you handleImages?Yourself???
9. Image & FilesHandling ⚓1. Let a service handle your images &files e.g Cloudinary2. Compression of Images & Files3. Progressive Image Rendering4. Lazy Loading
speedcurve.comChrome DevToolswebspeedtest.cloudinary.comTools for measuring speed?⛷
Web speed - Image Analysis
Network/Performance Tab - Chrome DevTools
Speed Curve
Now, go forth & make your site fast
THANKS, ANY QUESTIONS? I’M EVERYWHEREGITHUB MEDIUM TWITTER@unicodeveloperCODEPEN