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
240
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
560
The Complete Guide to building In-App Notifications in Web Apps
unicodeveloper
0
310
The Golden Ticket: Becoming a Superstar & Impactful Open Source Contributor
unicodeveloper
0
130
Optimizing Developer Workflow with Sourcegraph
unicodeveloper
0
180
Code Search with Laravel and Sourcegraph
unicodeveloper
1
320
Lightning Talk - JAMStack
unicodeveloper
0
740
Authentication & Authorization in GraphQL
unicodeveloper
5
2k
Authentication & Authorization in Next.js
unicodeveloper
3
820
webpack 4: Lighting the fire
unicodeveloper
3
570
Other Decks in Programming
See All in Programming
DevTalks 25 - Create your own AI-infused Java apps with ease
kdubois
2
120
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
770
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
260
ワンバイナリWebサービスのススメ
mackee
10
7.4k
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
0
160
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
120
OpenTelemetry + LLM = OpenLLMetry!?
yunosukey
2
390
Doma で目指す ORM 最適解
nakamura_to
1
160
Language Server と喋ろう – TSKaigi 2025
pizzacat83
2
660
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
310
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.6k
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
120
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.4k
Rails Girls Zürich Keynote
gr2m
94
13k
KATA
mclloyd
29
14k
The Invisible Side of Design
smashingmag
299
50k
Git: the NoSQL Database
bkeepers
PRO
430
65k
How to train your dragon (web standard)
notwaldorf
92
6k
For a Future-Friendly Web
brad_frost
178
9.7k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Thoughts on Productivity
jonyablonski
69
4.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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