Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Engineering Faster Web Experiences in Plain Sight

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Otemuyiwa Prosper Otemuyiwa Prosper
April 13, 2019
Programming
310
0

Engineering Faster Web Experiences in Plain Sight

Avatar for Otemuyiwa Prosper

Otemuyiwa Prosper

April 13, 2019

More Decks by Otemuyiwa Prosper

See All by Otemuyiwa Prosper
A.I (Artificial Intelligence) for the rest of us
Avatar for Otemuyiwa Prosper unicodeveloper
2
620
The Complete Guide to building In-App Notifications in Web Apps
Avatar for Otemuyiwa Prosper unicodeveloper
0
350
The Golden Ticket: Becoming a Superstar & Impactful Open Source Contributor
Avatar for Otemuyiwa Prosper unicodeveloper
0
180
Optimizing Developer Workflow with Sourcegraph
Avatar for Otemuyiwa Prosper unicodeveloper
0
220
Code Search with Laravel and Sourcegraph
Avatar for Otemuyiwa Prosper unicodeveloper
1
410
Lightning Talk - JAMStack
Avatar for Otemuyiwa Prosper unicodeveloper
0
830
Authentication & Authorization in GraphQL
Avatar for Otemuyiwa Prosper unicodeveloper
5
2.2k
Authentication & Authorization in Next.js
Avatar for Otemuyiwa Prosper unicodeveloper
3
920
webpack 4: Lighting the fire
Avatar for Otemuyiwa Prosper unicodeveloper
3
610

Other Decks in Programming

See All in Programming
作って学ぶ、 JSX (TSX) ランタイムの基本
Avatar for syumai syumai
7
1.5k
CLIであることを活かしたGitHub Copilot CLI活用術 / GitHub Copilot CLI Pro Tips & Tricks
Avatar for Naoya.i nao_mk2
1
1.2k
OSもどきOS
Avatar for Sora Arakawa arkw
0
450
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
Avatar for Holly Cummins hollycummins
0
270
TypeSpec で繋ぐ複数プロダクトの型安全
Avatar for Mitsui maroon8021
1
380
AI 時代のソフトウェア設計の学び方
Avatar for 増田 亨 masuda220
PRO
29
12k
Spring Security 実践 ─ GraphQL APIで実務に役立つ 認証・認可 を学ぶ
Avatar for Wagyu wagyu
0
150
Copilot CLI の継戦能力を高める コンテキスト管理
Avatar for Nozomuts nozomutu
1
1.2k
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
Avatar for nrs nrslib
13
3.4k
ローカルLLMを使ってB2Bサービスを作っていての学び
Avatar for Hiroshige Umino yaotti
0
140
Swiftのレキシカルスコープ管理
Avatar for kntk kntkymt
0
210
Observability in Practice：Grafana 與 Edge Device SRE 的那些事
Avatar for Blueswen blueswen
0
120

Featured

See All Featured
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
350
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
280
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
830
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.1k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
320
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
210
エンジニアに許された特別な時間の終わり
Avatar for watany watany
107
250k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
390
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
310

Transcript

  1. ENGINEERING: WEB EXPERIENCES PROSPER OTEMUYIWA | forloop Zimbabwe, Harare 2019

    FASTER ...in plain sight

  2. Harare is Cold, Why is Lagos so hot?

  3. VIBRANIUM OPEN SOURCERER @unicodeveloper

  4. DEVELOPER ADVOCATE | COMMUNITY BUILDER forLoop Africa Laravel Nigeria Angular

    Nigeria Webpack Africa

  5. STEVE: SOUDERS Ex-Head Performance Engineer @ Google Ex-Chief Performance Officer

    @ Yahoo! ..Inspired by

  6. YOUR USERS NOW!

  7. WHAT DO YOU NEED TO DO TO ENGINEER FAST LOADING

    EXPERIENCES

  8. Let’s go!

  9. 1. FEWER HTTP REQUESTS! The fewer the requests, the faster

    content is served to the users.

  10. - Webpack - Parcel TOOLS FOR MERGING

  11. 2. TAKE ADVANTAGE OF CDNS! ⚓ ..push assets to the

    edge, use a content delivery network

  12. 3. Stylesheets at the top SCRIPTS at the bottom

  13. 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">

  14. 5. Minify Everything

  15. #Bundle & Minify Everything ⚓ Just Webpack away!

  16. 6. Defer Scripts <script defer></script> - Defer heavy loading scripts

  17. 7. Have a font loading strategy

  18. 8. Code Splitting & Tree Shaking 1. Webpack 2. Rollup

    3. Send less JavaScript to the user

  19. How do you handle Images? Yourself???

  20. 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

  21. speedcurve.com Chrome DevTools webspeedtest.cloudinary.com Tools for measuring speed? ⛷

  22. Web speed - Image Analysis

  23. Network/Performance Tab - Chrome DevTools

  24. Speed Curve

  25. Now, go forth & make your site fast

  26. THANKS, ANY QUESTIONS? I’M EVERYWHERE GITHUB MEDIUM TWITTER @unicodeveloper CODEPEN