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
0
290

Engineering Faster Web Experiences in Plain Sight

Avatar for Otemuyiwa Prosper

Otemuyiwa Prosper

April 13, 2019
Tweet

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
590
The Complete Guide to building In-App Notifications in Web Apps
Avatar for Otemuyiwa Prosper unicodeveloper
0
330
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
200
Code Search with Laravel and Sourcegraph
Avatar for Otemuyiwa Prosper unicodeveloper
1
380
Lightning Talk - JAMStack
Avatar for Otemuyiwa Prosper unicodeveloper
0
800
Authentication & Authorization in GraphQL
Avatar for Otemuyiwa Prosper unicodeveloper
5
2.1k
Authentication & Authorization in Next.js
Avatar for Otemuyiwa Prosper unicodeveloper
3
900
webpack 4: Lighting the fire
Avatar for Otemuyiwa Prosper unicodeveloper
3
600

Other Decks in Programming

See All in Programming
モジュラモノリスにおける境界をGoのinternalパッケージで守る
Avatar for magavel magavel
0
2.6k
個人開発は儲からない - それでも開発開始1ヶ月で300万円売り上げた方法
Avatar for Taishi Yamasaki taishiyade
0
110
Raku Raku Notion 20260128
Avatar for hareyaka hareyakayuruyaka
0
420
iOSアプリでフロントエンドと仲良くする
Avatar for Ryu-nakayama ryunakayama
0
120
「やめとこ」がなくなった — 1月にZennを始めて22本書いた AI共創開発のリアル
Avatar for atani atani14
0
150
Gemini for developers
Avatar for Mete Atamel meteatamel
0
120
今、アーキテクトとして 品質保証にどう関わるか
Avatar for Nealle nealle
0
180
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
560
kintone + ローカルLLM = ?
Avatar for ITO Akihiro akit37
0
120
ふん…おもしれぇ Parser。RubyKaigi 行ってやるぜ
Avatar for Kai aki_pin0
0
110
Lambda のコードストレージ容量に気をつけましょう
Avatar for tatsuki-yamada tattwan718
0
200
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
150

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
680
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
1.9k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
810
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
130
Design in an AI World
Avatar for tapps tapps
0
160
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
790
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
90

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