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
200
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
680
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
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
90k
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
230
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
Jakarta EE meets AI
ivargrimstad
1
540
The Shape of a Service Object
inem
0
520
オートマトン学習しろ / Do automata learning
makenowjust
3
130
LangChainの現在とv0.3にむけて
os1ma
4
940
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
Why Prism?
kddnewton
4
1.7k
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
320
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
What's new in Ruby 2.0
geeforr
340
31k
Bash Introduction
62gerente
608
210k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Fireside Chat
paigeccino
31
2.9k
A Philosophy of Restraint
colly
202
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
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