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
190
Code Search with Laravel and Sourcegraph
unicodeveloper
1
350
Lightning Talk - JAMStack
unicodeveloper
0
770
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
Devoxx BE - Local Development in the AI Era
kdubois
0
130
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
340
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
370
チームの境界をブチ抜いていけ
tokai235
0
200
CSC509 Lecture 04
javiergs
PRO
0
300
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
310
Introduce Hono CLI
yusukebe
6
2.9k
SODA - FACT BOOK(JP)
sodainc
1
8.5k
iOSでSVG画像を扱う
kishikawakatsumi
0
140
Webサーバーサイド言語としてのRustについて
kouyuume
0
1.9k
CSC509 Lecture 06
javiergs
PRO
0
260
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
330
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Code Reviewing Like a Champion
maltzj
526
40k
4 Signs Your Business is Dying
shpigford
185
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Fireside Chat
paigeccino
40
3.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Code Review Best Practice
trishagee
72
19k
Into the Great Unknown - MozCon
thekraken
40
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Making Projects Easy
brettharned
120
6.4k
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