Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Engineering Faster Web Experiences in Plain Sight

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Otemuyiwa Prosper Otemuyiwa Prosper
April 13, 2019
Programming
330
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
640
The Complete Guide to building In-App Notifications in Web Apps
Avatar for Otemuyiwa Prosper unicodeveloper
0
360
The Golden Ticket: Becoming a Superstar & Impactful Open Source Contributor
Avatar for Otemuyiwa Prosper unicodeveloper
0
190
Optimizing Developer Workflow with Sourcegraph
Avatar for Otemuyiwa Prosper unicodeveloper
0
240
Code Search with Laravel and Sourcegraph
Avatar for Otemuyiwa Prosper unicodeveloper
1
430
Lightning Talk - JAMStack
Avatar for Otemuyiwa Prosper unicodeveloper
0
860
Authentication & Authorization in GraphQL
Avatar for Otemuyiwa Prosper unicodeveloper
5
2.2k
Authentication & Authorization in Next.js
Avatar for Otemuyiwa Prosper unicodeveloper
3
940
webpack 4: Lighting the fire
Avatar for Otemuyiwa Prosper unicodeveloper
3
620

Other Decks in Programming

See All in Programming
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
450
AI が書く Go コードの品質を劇的に向上させる Linter: “declscope”
Avatar for mpyw mpyw
0
480
外から家のPCの電源入れたい！をＰＨＰで解決する
Avatar for かわしも（Shimokawa Shion） kawashimo0
1
120
なぜCTOを降りてFDEを選んだのか？〜なぜプロダクト企業がFDEで顧客の現場に踏み込むのか〜
Avatar for ryuta sakamoto gonta
1
170
When benchmarks go bad - what I learned from measuring performance wrong
Avatar for Holly Cummins hollycummins
0
190
Vue Fes Japan の “作る側”に関わってみて
Avatar for Naoki Haba naokihaba
0
130
自サークルのIdPからログアウトできるようになるまで
Avatar for taiseiue taiseiue
1
120
Embedded Swiftで作る自作USBデバイス によるiOSデバイスの自動テスト / iOSDC Japan 2026 glassfiber
Avatar for glassfiber glassfiber
0
310
Jetpack Compose Mechanisms
Avatar for Jaewoong skydoves
2
560
ハーネス設計入門 〜 基礎知識の整理から実務へのステップアップ 〜
Avatar for kinopee kinopeee
21
21k
仕様駆動開発による爆速プロダクト開発 / Bakusoku Spec Driven Development
Avatar for Keisuke Kobayashi kobakei
0
210
ソニーのクラウド共通基盤の変遷と AI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
Avatar for KenjiYoneyama kenjiyoneyama
0
240

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.9k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
910
Visualization
Avatar for Eitan Lees eitanlees
153
17k
Side Projects
Avatar for Sacha Greif sachag
456
43k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
109
250k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
340
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
184
10k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
2
35k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
530

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