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
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
テストをしないQAエンジニアは何をしているか?
nealle
0
130
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
Formの複雑さに立ち向かう
bmthd
1
720
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
CI改善もDatadogとともに
taumu
0
110
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
『品質』という言葉が嫌いな理由
korimu
0
160
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
GitHub's CSS Performance
jonrohan
1030
460k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Site-Speed That Sticks
csswizardry
3
370
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Side Projects
sachag
452
42k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Invisible Side of Design
smashingmag
299
50k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
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