Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Engineering Faster Web Experiences in Plain Sight
Search
Otemuyiwa Prosper
April 13, 2019
Programming
0
220
Engineering Faster Web Experiences in Plain Sight
Otemuyiwa Prosper
April 13, 2019
Tweet
Share
More Decks by Otemuyiwa Prosper
See All by Otemuyiwa Prosper
A.I (Artificial Intelligence) for the rest of us
unicodeveloper
2
530
The Complete Guide to building In-App Notifications in Web Apps
unicodeveloper
0
300
The Golden Ticket: Becoming a Superstar & Impactful Open Source Contributor
unicodeveloper
0
130
Optimizing Developer Workflow with Sourcegraph
unicodeveloper
0
170
Code Search with Laravel and Sourcegraph
unicodeveloper
1
300
Lightning Talk - JAMStack
unicodeveloper
0
720
Authentication & Authorization in GraphQL
unicodeveloper
5
2k
Authentication & Authorization in Next.js
unicodeveloper
3
790
webpack 4: Lighting the fire
unicodeveloper
3
550
Other Decks in Programming
See All in Programming
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
160
Conform を推す - Advocating for Conform
mizoguchicoji
3
700
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
Domain-Driven Transformation
hschwentner
2
1.9k
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.5k
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.4k
Ruby on cygwin 2025-02
fd0
0
150
Formの複雑さに立ち向かう
bmthd
1
890
GoとPHPのインターフェイスの違い
shimabox
2
200
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
840
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
140
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
130
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
KATA
mclloyd
29
14k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Rails Girls Zürich Keynote
gr2m
94
13k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Transcript
ENGINEERING: WEB EXPERIENCES PROSPER OTEMUYIWA | forloop Zimbabwe, Harare 2019
FASTER ...in plain sight
Harare is Cold, Why is Lagos so hot?
VIBRANIUM OPEN SOURCERER @unicodeveloper
DEVELOPER ADVOCATE | COMMUNITY BUILDER forLoop Africa Laravel Nigeria Angular
Nigeria Webpack Africa
STEVE: SOUDERS Ex-Head Performance Engineer @ Google Ex-Chief Performance Officer
@ Yahoo! ..Inspired by
YOUR USERS NOW!
WHAT DO YOU NEED TO DO TO ENGINEER FAST LOADING
EXPERIENCES
Let’s go!
1. FEWER HTTP REQUESTS! The fewer the requests, the faster
content is served to the users.
- Webpack - Parcel TOOLS FOR MERGING
2. TAKE ADVANTAGE OF CDNS! ⚓ ..push assets to the
edge, use a content delivery network
3. Stylesheets at the top SCRIPTS at the bottom
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">
5. Minify Everything
#Bundle & Minify Everything ⚓ Just Webpack away!
6. Defer Scripts <script defer></script> - Defer heavy loading scripts
7. Have a font loading strategy
8. Code Splitting & Tree Shaking 1. Webpack 2. Rollup
3. Send less JavaScript to the user
How do you handle Images? Yourself???
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
speedcurve.com Chrome DevTools webspeedtest.cloudinary.com Tools 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 EVERYWHERE GITHUB MEDIUM TWITTER @unicodeveloper CODEPEN