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

Engineering Faster Web Experiences in Plain Sight

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Otemuyiwa Prosper Otemuyiwa Prosper
April 13, 2019
Programming
300
0

Engineering Faster Web Experiences in Plain Sight

Avatar for Otemuyiwa Prosper

Otemuyiwa Prosper

April 13, 2019

More Decks by Otemuyiwa Prosper

See All by Otemuyiwa Prosper
A.I (Artificial Intelligence) for the rest of us
Avatar for Otemuyiwa Prosper unicodeveloper
2
610
The Complete Guide to building In-App Notifications in Web Apps
Avatar for Otemuyiwa Prosper unicodeveloper
0
340
The Golden Ticket: Becoming a Superstar & Impactful Open Source Contributor
Avatar for Otemuyiwa Prosper unicodeveloper
0
160
Optimizing Developer Workflow with Sourcegraph
Avatar for Otemuyiwa Prosper unicodeveloper
0
210
Code Search with Laravel and Sourcegraph
Avatar for Otemuyiwa Prosper unicodeveloper
1
390
Lightning Talk - JAMStack
Avatar for Otemuyiwa Prosper unicodeveloper
0
820
Authentication & Authorization in GraphQL
Avatar for Otemuyiwa Prosper unicodeveloper
5
2.2k
Authentication & Authorization in Next.js
Avatar for Otemuyiwa Prosper unicodeveloper
3
910
webpack 4: Lighting the fire
Avatar for Otemuyiwa Prosper unicodeveloper
3
600

Other Decks in Programming

See All in Programming
YJITとZJITにはイカなる違いがあるのか？
Avatar for yamanao nakiym
0
250
検索設計から
推論設計への重心移動と
Recall-First Retrieval
Avatar for po3rin po3rin
4
1.1k
ハーネスエンジニアリングにどう向き合うか 〜ルールファイルを超えて開発プロセスを設計する〜 / How to approach harness engineering
Avatar for r-kagaya rkaga
24
14k
Offline should be the norm: building local-first apps with CRDTs & Kotlin Multiplatform
Avatar for Renaud MATHIEU renaudmathieu
0
230
Programming with a DJ Controller — not vibe coding
Avatar for seki at druby.org m_seki
3
170
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
300
Angular Signal Forms
Avatar for Dhananjay Kumar debug_mode
0
120
Going Multiplatform with Your Android App (Android Makers 2026)
Avatar for Márton Braun zsmb
2
450
Making the RBS Parser Faster
Avatar for Soutaro Matsumoto soutaro
0
520
ルールルルルルRubyの中身の予備知識 ── RubyKaigiの前に予習しなイカ？
Avatar for ydah ydah
1
210
Terraform言語の静的解析 / static analysis of Terraform language
Avatar for Kazuma Watanabe wata727
1
110
煩雑なSkills管理をSoC（関心の分離）により解決する――関心を分離し、プロンプトを部品として育てるためのOSSを作った話 / Solving Complex Skills Management Through SoC (Separation of Concerns)
Avatar for nrs nrslib
4
1k

Featured

See All Featured
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Done Done
Avatar for chrislema chrislema
186
16k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
A Soul's Torment
Avatar for Nat Ma seathinner
6
2.7k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
360
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
460
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
170
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
200
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
120
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
210

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