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

Engineering Faster Web Experiences in Plain Sight

Avatar for Otemuyiwa Prosper Otemuyiwa Prosper
April 13, 2019
Programming
0
240

Engineering Faster Web Experiences in Plain Sight

Avatar for Otemuyiwa Prosper

Otemuyiwa Prosper

April 13, 2019
Tweet

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
550
The Complete Guide to building In-App Notifications in Web Apps
Avatar for Otemuyiwa Prosper unicodeveloper
0
310
The Golden Ticket: Becoming a Superstar & Impactful Open Source Contributor
Avatar for Otemuyiwa Prosper unicodeveloper
0
130
Optimizing Developer Workflow with Sourcegraph
Avatar for Otemuyiwa Prosper unicodeveloper
0
180
Code Search with Laravel and Sourcegraph
Avatar for Otemuyiwa Prosper unicodeveloper
1
320
Lightning Talk - JAMStack
Avatar for Otemuyiwa Prosper unicodeveloper
0
740
Authentication & Authorization in GraphQL
Avatar for Otemuyiwa Prosper unicodeveloper
5
2k
Authentication & Authorization in Next.js
Avatar for Otemuyiwa Prosper unicodeveloper
3
820
webpack 4: Lighting the fire
Avatar for Otemuyiwa Prosper unicodeveloper
3
560

Other Decks in Programming

See All in Programming
ComposeでのPicture in Picture
Avatar for takathemax takathemax
0
130
Enterprise Web App. Development (1): Build Tool Training Ver. 5
Avatar for Koichi NAKAGAWA knakagawa
1
120
Optimizing JRuby 10
Avatar for headius headius
0
570
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
Avatar for Mete Atamel meteatamel
0
100
Golangci-lint v2爆誕: 君たちはどうすべきか
Avatar for logica / Takuto Nagami logica0419
1
230
Lambda(Python)の リファクタリングが好きなんです
Avatar for komakichi komakichi
4
240
Qiita Bash
Avatar for hiro mercury_dev0517
2
220
Cline with Amazon Bedrockで爆速開発体験ハンズオン/ 株式会社ブリューアス登壇資料
Avatar for M.Han mhan
0
110
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
Avatar for r-kagaya rkaga
4
1.2k
파급효과: From AI to Android Development
Avatar for HyunWoo Lee l2hyunwoo
0
160
2025-04-25 GitHub Copilot Agent ライブデモ（スクリプト）
Avatar for GOAMI Takaaki goataka
0
100
VitestのIn-Source Testingが便利
Avatar for taro taro28
8
2.4k

Featured

See All Featured
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
13
820
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
268
20k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.3k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
12k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
Fontdeck: Realign not Redesign
Avatar for Paul Robert Lloyd paulrobertlloyd
84
5.5k
Code Review Best Practice
Avatar for Trisha Gee trishagee
67
18k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
75
5.8k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
78
6.3k

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