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
260
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
570
The Complete Guide to building In-App Notifications in Web Apps
unicodeveloper
0
320
The Golden Ticket: Becoming a Superstar & Impactful Open Source Contributor
unicodeveloper
0
140
Optimizing Developer Workflow with Sourcegraph
unicodeveloper
0
180
Code Search with Laravel and Sourcegraph
unicodeveloper
1
340
Lightning Talk - JAMStack
unicodeveloper
0
760
Authentication & Authorization in GraphQL
unicodeveloper
5
2.1k
Authentication & Authorization in Next.js
unicodeveloper
3
840
webpack 4: Lighting the fire
unicodeveloper
3
580
Other Decks in Programming
See All in Programming
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
コーディングエージェント時代のNeovim
key60228
1
100
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
270
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
190
CSC305 Summer Lecture 12
javiergs
PRO
0
130
TDD 実践ミニトーク
contour_gara
0
150
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.6k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
210
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
660
decksh - a little language for decks
ajstarks
4
21k
AIコーディングAgentとの向き合い方
eycjur
0
230
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Balancing Empowerment & Direction
lara
2
590
We Have a Design System, Now What?
morganepeng
53
7.7k
Producing Creativity
orderedlist
PRO
347
40k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Making Projects Easy
brettharned
117
6.3k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
RailsConf 2023
tenderlove
30
1.2k
The Cult of Friendly URLs
andyhume
79
6.5k
The Pragmatic Product Professional
lauravandoore
36
6.8k
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