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
210
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
490
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
280
Lightning Talk - JAMStack
unicodeveloper
0
700
Authentication & Authorization in GraphQL
unicodeveloper
5
1.9k
Authentication & Authorization in Next.js
unicodeveloper
3
760
webpack 4: Lighting the fire
unicodeveloper
3
530
Other Decks in Programming
See All in Programming
Mercari AI/LLM Hackathon TeamBの発表資料
imaikosuke
0
190
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
1
240
Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト@Vue Fes Japan 2024
shingangan
3
690
RailsのPull requestsのレビューの時に私が考えていること
yahonda
3
470
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
110
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1.3k
今日で分かる!カスタムコップの作り方
krpk1900
2
320
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.1k
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
2.4k
CSC509 Lecture 06
javiergs
PRO
0
140
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
1
1.4k
Hi, have you met Kotlin Multiplatform? | DevFest Vienna 2024
prof18
0
240
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
519
39k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Speed Design
sergeychernyshev
23
550
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Navigating Team Friction
lara
183
14k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Music & Morning Musume
bryan
46
6.1k
It's Worth the Effort
3n
183
27k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
350
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
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