Engineering Faster Web Experiences in Plain Sight

Slide 1

Slide 1 text

ENGINEERING: WEB EXPERIENCES PROSPER OTEMUYIWA | forloop Zimbabwe, Harare 2019 FASTER ...in plain sight

Slide 2

Slide 2 text

Harare is Cold, Why is Lagos so hot?

Slide 3

Slide 3 text

VIBRANIUM OPEN SOURCERER @unicodeveloper

Slide 4

Slide 4 text

DEVELOPER ADVOCATE | COMMUNITY BUILDER forLoop Africa Laravel Nigeria Angular Nigeria Webpack Africa

Slide 5

Slide 5 text

STEVE: SOUDERS Ex-Head Performance Engineer @ Google Ex-Chief Performance Officer @ Yahoo! ..Inspired by

Slide 6

Slide 6 text

YOUR USERS NOW!

Slide 7

Slide 7 text

WHAT DO YOU NEED TO DO TO ENGINEER FAST LOADING EXPERIENCES

Slide 8

Slide 8 text

Let’s go!

Slide 9

Slide 9 text

1. FEWER HTTP REQUESTS! The fewer the requests, the faster content is served to the users.

Slide 10

Slide 10 text

- Webpack - Parcel TOOLS FOR MERGING

Slide 11

Slide 11 text

2. TAKE ADVANTAGE OF CDNS! ⚓ ..push assets to the edge, use a content delivery network

Slide 12

Slide 12 text

3. Stylesheets at the top SCRIPTS at the bottom

Slide 13

Slide 13 text

4. Prefetch Resources Use Link tags to prefetch

Slide 14

Slide 14 text

5. Minify Everything

Slide 15

Slide 15 text

#Bundle & Minify Everything ⚓ Just Webpack away!

Slide 16

Slide 16 text

6. Defer Scripts - Defer heavy loading scripts

Slide 17

Slide 17 text

7. Have a font loading strategy

Slide 18

Slide 18 text

8. Code Splitting & Tree Shaking 1. Webpack 2. Rollup 3. Send less JavaScript to the user

Slide 19

Slide 19 text

How do you handle Images? Yourself???

Slide 20

Slide 20 text

9. Image & Files Handling ⚓ 1. Let a service handle your images & ﬁles e.g Cloudinary 2. Compression of Images & Files 3. Progressive Image Rendering 4. Lazy Loading

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Web speed - Image Analysis

Slide 23

Slide 23 text

Network/Performance Tab - Chrome DevTools

Slide 24

Slide 24 text

Speed Curve

Slide 25

Slide 25 text

Now, go forth & make your site fast

Slide 26

Slide 26 text

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