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
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
120
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Software Architecture
hschwentner
6
2.3k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
All About Angular's New Signal Forms
manfredsteyer
PRO
0
200
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
520
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
320
Introduce Hono CLI
yusukebe
6
3k
XP, Testing and ninja testing ZOZ5
m_seki
3
790
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
770
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Why Our Code Smells
bkeepers
PRO
340
57k
Designing Experiences People Love
moore
142
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Speed Design
sergeychernyshev
32
1.2k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Statistics for Hackers
jakevdp
799
220k
Building Adaptive Systems
keathley
44
2.8k
The Language of Interfaces
destraynor
162
25k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
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