web performance optimization for everyone
DESCRIPTION
This Friday, Albert Bellonch will speak about web performance optimization. We often hear engineers talking about strange topics: caching, CSS and Javascript optimization, loading time, deferred execution, expiration control headers… This next talk is focused on everyone understaning what web performance optimization is: which recurring problems there are, how are they solved, and why is important to solve them. Who is Albert Bellonch? Albert Bellonch is a Computer Engineer by the polytechnical universities of Catalonia and Turin. After finishing his Final Project in London, he returned to Barcelona in order to begin a new phase at Itnig, where he is the Chief Technological Officer and leads the development team.TRANSCRIPT
![Page 1: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/1.jpg)
Web performance optimization
for everyone
![Page 2: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/2.jpg)
Albert Bellonch
@abellonch
/albertbellonch
CTO
![Page 3: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/3.jpg)
What’s WPO?Web performance optimization is the process by which
individual aspects of web pages are optimized,in order to achieve greater overall performance
![Page 4: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/4.jpg)
What’s WPO?Web performance optimization is the process by which
individual aspects of web pages are optimized,in order to achieve greater overall performance
“Make it faster”
![Page 5: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/5.jpg)
Advantages
•Less server load
•Better SEO
•Better user experience
![Page 6: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/6.jpg)
What’s in a web page?
![Page 7: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/7.jpg)
What’s in a web page?
HTML markup
![Page 8: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/8.jpg)
What’s in a web page?
HTML markup
CSS stylesheets
![Page 9: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/9.jpg)
What’s in a web page?
HTML markup
Javascript code
CSS stylesheets
![Page 10: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/10.jpg)
What’s in a web page?
HTML markup
Javascript code
CSS stylesheets
Images
![Page 11: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/11.jpg)
What’s in a web page?
HTML markup
Javascript code
CSS stylesheets
Images
Fonts
![Page 12: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/12.jpg)
What’s in a web page?
HTML markup
Javascript code
CSS stylesheets
Images
Fonts
much more
![Page 13: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/13.jpg)
WPO Techniques
![Page 14: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/14.jpg)
Request combination
![Page 15: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/15.jpg)
Typical scenario
Browser Server
A wine store
![Page 16: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/16.jpg)
Typical scenario
Browser Server
Home page CSS
A wine store
![Page 17: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/17.jpg)
Typical scenario
Browser Server
Home page CSS
Wine list CSS
A wine store
![Page 18: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/18.jpg)
Typical scenario
Browser Server
Home page CSS
Wine list CSS
A wine store
Wine details CSS
![Page 19: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/19.jpg)
Typical scenario
Browser Server
Home page CSS
Wine list CSS
A wine store
Wine details CSS
...more CSS files
![Page 20: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/20.jpg)
Combine it!In HTTP requests, a considerable amount of time is used when asking
for the information, instead of transmitting this information.
![Page 21: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/21.jpg)
The lazy-boy-in-the-sofa exampleImagine that you’re hungry, and you sit down to your couch, so you can watch the last episode of your favourite TV show. At a certain point, you go to the kitchen, you take some cheese, and get back to the couch.
Ten minutes later, you go to the kitchen again, make yourself a sandwhich, and head to the couch. And when the episode is ending, you stand up again in order to pick up an apple.
Man, pick it all at once!
![Page 22: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/22.jpg)
Improved scenario
Browser Server
A wine store
All CSS files combined
![Page 23: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/23.jpg)
Same for JavascriptAppliable with images: sprites
![Page 24: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/24.jpg)
ToolsRails: jammit, juicer, or assets pipeline (>=3.1)
WordPress: Better WordPress Minify
![Page 25: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/25.jpg)
Can we do it better?
![Page 26: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/26.jpg)
Can we do it better?Yes!
![Page 27: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/27.jpg)
Resource compression
![Page 28: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/28.jpg)
Typical scenario Uncompressed CSS (~56KB)
![Page 29: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/29.jpg)
Compress it!Send only the essential information.
This way, less data is sent, and thus less time is spent transferring it.
![Page 30: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/30.jpg)
The gibberish-conversation exampleThere are these people that talk a lot. Like, a lot. You talk to them for an hour, and after all this time you realize that you end the conversation with a very tiny amount of valuable information. You lost 59 minutes of your time!
Conclusion: make these people talk only about what you care.
![Page 31: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/31.jpg)
Improved scenario Compressed CSS (~25KB)
![Page 32: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/32.jpg)
Similar for JavascriptMore complex with images
![Page 33: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/33.jpg)
ToolsSame as with request combination
![Page 34: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/34.jpg)
Can we do it better?
![Page 35: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/35.jpg)
Can we do it better?Yes!
![Page 36: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/36.jpg)
Correct timing
![Page 37: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/37.jpg)
Typical scenario Improvable resource ordering
•Load Javascript
•Load images
•Load CSS stylesheets
•Show HTML structure
![Page 38: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/38.jpg)
Typical scenario Improvable resource ordering
•Load Javascript // nothing to operate with
•Load images
•Load CSS stylesheets
•Show HTML structure
![Page 39: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/39.jpg)
Typical scenario Improvable resource ordering
•Load Javascript // nothing to operate with
•Load images // not showing even a structure
•Load CSS stylesheets
•Show HTML structure
![Page 40: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/40.jpg)
Typical scenario Improvable resource ordering
•Load Javascript // nothing to operate with
•Load images // not showing even a structure
•Load CSS stylesheets // nothing to style
•Show HTML structure
![Page 41: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/41.jpg)
Typical scenario Improvable resource ordering
•Load Javascript // nothing to operate with
•Load images // not showing even a structure
•Load CSS stylesheets // nothing to style
•Show HTML structure // should be shown first
![Page 42: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/42.jpg)
Sort it properly!Try your best to do things only when are needed,
but avoid losing quality. Timing is crucial.
![Page 43: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/43.jpg)
The I-bought-a-parking-space exampleSome people do things the other way round. Imagine someone who is very excited because he’s about to buy a car. So excited, that he rents a parking space where to put the car, even if he still has no car at all.
Please: buy the car, and then rent the parking space.
![Page 44: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/44.jpg)
Improved scenarioBest resource ordering
•Show HTML structure // all depends on it
•Load CSS stylesheets // give nice style to html
•Load images // fill the gaps
And after a while...•Load Javascript // do the fireworks
![Page 45: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/45.jpg)
ToolsNothing in particular
![Page 46: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/46.jpg)
Can we do it better?
![Page 47: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/47.jpg)
Can we do it better?Yes!
![Page 48: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/48.jpg)
Image optimization
![Page 49: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/49.jpg)
Typical scenario Unscaled picture
30 KB
![Page 50: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/50.jpg)
Typical scenario Unscaled picture
But the real image is
30 KB
150 KB
![Page 51: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/51.jpg)
Slim down the images!The images should have the same size as they are shown as,
and should be optimized too.
![Page 52: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/52.jpg)
The gigantic-field exampleA farm entrepreneur is going to plant 5 tomatoes and 10 lettuces, so he buys the whole Camp Nou in order to plant them. But he only needs a minimal part of it, so he is wasting a lot of field!
Mr. Farmer: get what you need, the moment you need it.
![Page 53: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/53.jpg)
Improved scenario Scaled picture
30 KB
![Page 54: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/54.jpg)
Improved scenario Scaled picture
And the real image is
30 KB 30 KB
![Page 55: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/55.jpg)
ToolsScaling: any image editing tool
Optimizing: piet for Rails, smushit for Wordpress
![Page 56: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/56.jpg)
Can we do it better?
![Page 57: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/57.jpg)
Can we do it better?Yes!
![Page 58: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/58.jpg)
Caching
![Page 59: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/59.jpg)
Typical scenario
Browser Server
A wine store, again
![Page 60: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/60.jpg)
Typical scenario
Browser Server
Picture of 1787’ Chateau d’Yquern
A wine store, again
![Page 61: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/61.jpg)
Typical scenario
Browser Server
Picture of 1787’ Chateau d’Yquern
Picture of 1787’ Chateau d’Yquern
A wine store, again
![Page 62: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/62.jpg)
Typical scenario
Browser Server
Picture of 1787’ Chateau d’Yquern
Picture of 1787’ Chateau d’Yquern
A wine store, again
Picture of 1787’ Chateau d’Yquern
![Page 63: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/63.jpg)
Typical scenario
Browser Server
Picture of 1787’ Chateau d’Yquern
Picture of 1787’ Chateau d’Yquern
A wine store, again
Picture of 1787’ Chateau d’Yquern
Picture of 1787’ Chateau d’Yquern
![Page 64: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/64.jpg)
Ask only missing stuff!If you know something won’t change for some time,
don’t ask for it until it does.
![Page 65: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/65.jpg)
The I-wanna-know exampleSupose there’s this big football game in a few days. You have a football freak friend, who knows every match schedule for every league, so you go ask him when this game is.
The second time you need this information, you keep asking him, even though you know that, 99% of the times, this information won’t change.
Use your memory! Ask things only when you don’t know them.
![Page 66: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/66.jpg)
Improved scenario
Browser Server
A wine store, again
![Page 67: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/67.jpg)
Improved scenario
Browser Server
Picture of 1787’ Chateau d’Yquern
A wine store, again
![Page 68: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/68.jpg)
Improved scenario
Browser Server
Picture of 1787’ Chateau d’Yquern
A wine store, again
OK, I have the picture of 1787’ Chateau d’Yquern, so I’ll show it directly.
![Page 69: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/69.jpg)
Can we do it better?
![Page 70: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/70.jpg)
Can we do it better?Yes!
![Page 71: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/71.jpg)
Other techniques
![Page 72: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/72.jpg)
Use GET in Ajax requests
Use JSON in AJAX requests
Reduce DOM elements
Reduce iframes
Prefer CSS over JS
Activate deflate
Font optimizing
Cache Control headers
Expiration headers
Reduce use of CNAME
JPEG and PNG codification
Lazy load for images
Content Delivery Networks
Avoid Flash files
Eager loading
Mobile-specific optimisations
![Page 73: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/73.jpg)
No time for much more...
![Page 74: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/74.jpg)
Except foryour dearest friend in WPO
![Page 75: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/75.jpg)
Google Page Speed
![Page 76: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/76.jpg)
developers.google.com/speed/pagespeed
Page Speed
•Useful to detect our website performance
•Gives two scores: desktop and mobile
•Lists everything we can improve
•Extensive documentation on WPO
![Page 77: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/77.jpg)
Page Speed Desktop score
overall score for desktop
![Page 78: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/78.jpg)
Page Speed Mobile score
overall score for mobile
![Page 79: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/79.jpg)
Page Speed Critical path explorer
required files for the website , ordered in time
![Page 80: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/80.jpg)
Page Speed Advise example
what files we can minimize
documentation
![Page 81: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/81.jpg)
And a lot of things more.
![Page 82: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/82.jpg)
Be careful!
•There’s a lot of things to do
•Pick your critical weaknesses, and solve them first
•Go step by step
•Have your timing and resources into account
![Page 83: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/83.jpg)
Questions?I can’t bite you from this far!
![Page 84: Web performance optimization for everyone](https://reader036.vdocument.in/reader036/viewer/2022062404/554c5472b4c905452e8b49f4/html5/thumbnails/84.jpg)
Thank you!