• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
"Web performance optimization for everyone" por @abellonch
 

"Web performance optimization for everyone" por @abellonch

on

  • 440 views

Presentación realizada en el #webcat Barcelona de Octubre del 2012

Presentación realizada en el #webcat Barcelona de Octubre del 2012

Autor: Albert Bellonch (@abellonch)

Statistics

Views

Total Views
440
Views on SlideShare
422
Embed Views
18

Actions

Likes
0
Downloads
7
Comments
0

1 Embed 18

https://twitter.com 18

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    "Web performance optimization for everyone" por @abellonch "Web performance optimization for everyone" por @abellonch Presentation Transcript

    • Webcat October ’12#webcat / @abellonch 1
    • Web performance optimizationfor everyone 2
    • Albert Bellonch CTO @abellonch /albertbellonch albert@itnig.net 3
    • 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 4
    • 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” 4
    • Advantages•Less server load•Better SEO•Better user experience 5
    • What’s in a web page? 6
    • What’s in a web page? HTML markup 6
    • What’s in a web page? CSS stylesheets HTML markup 6
    • What’s in a web page? CSS stylesheets Javascript code HTML markup 6
    • What’s in a web page? CSS stylesheets Javascript code HTML markup Images 6
    • What’s in a web page? CSS stylesheets Javascript code HTML markup Images Fonts 6
    • What’s in a web page? CSS stylesheets Javascript code HTML markup Images Fonts much more 6
    • WPO Techniques 7
    • Request combination 8
    • Typical scenario A wine store Browser Server 9
    • Typical scenario A wine store Home page CSS Browser Server 9
    • Typical scenario A wine store Home page CSS Wine list CSS Browser Server 9
    • Typical scenario A wine store Home page CSS Wine list CSS Browser Server Wine details CSS 9
    • Typical scenario A wine store Home page CSS Wine list CSS Browser Server Wine details CSS ...more CSS files 9
    • Combine it!In HTTP requests, a considerable amount of time is used when asking for the information, instead of transmitting this information. 10
    • The lazy-boy-in-the-sofa example 11
    • Improved scenario A wine store All CSS files combined Browser Server 12
    • Same for JavascriptAppliable with images: sprites 13
    • Can we do it better? 14
    • Can we do it better? Yes! 14
    • Resource minification 15
    • Typical scenario Uncompressed CSS (~56KB) 16
    • Minify it! Send only the essential information.This way, less data is sent, and thus less time is spent transferring it. 17
    • The gibberish-conversation example 18
    • Improved scenario Compressed CSS (~25KB) 19
    • Similar for JavascriptMore complex with images 20
    • Can we do it better? 21
    • Can we do it better? Yes! 21
    • Image optimization 22
    • Typical scenario Unscaled picture 30 KB 23
    • Typical scenario Unscaled picture 150 KB30 KB But the real image is 23
    • Slim down the images!The images should have the same size as they are shown as, and should be optimized too. 24
    • The gigantic-field example 25
    • Improved scenario Scaled picture 30 KB 26
    • Improved scenario Scaled picture 30 KB 30 KB And the real image is 26
    • Can we do it better? 27
    • Can we do it better? Yes! 27
    • Caching 28
    • Typical scenario A wine store, again Browser Server 29
    • Typical scenario A wine store, again Picture of 1787’ Chateau d’Yquern Browser Server 29
    • Typical scenario A wine store, again Picture of 1787’ Chateau d’Yquern Picture of 1787’ Chateau d’Yquern Browser Server 29
    • Typical scenario A wine store, again Picture of 1787’ Chateau d’Yquern Picture of 1787’ Chateau d’Yquern Browser Server Picture of 1787’ Chateau d’Yquern 29
    • Typical scenario A wine store, again Picture of 1787’ Chateau d’Yquern Picture of 1787’ Chateau d’Yquern Browser Server Picture of 1787’ Chateau d’Yquern Picture of 1787’ Chateau d’Yquern 29
    • Ask only missing stuff!If you know something won’t change for some time, don’t ask for it until it does. 30
    • The I-wanna-know example 31
    • Improved scenario A wine store, again Browser Server 32
    • Improved scenario A wine store, again Picture of 1787’ Chateau d’Yquern Browser Server 32
    • Improved scenario A wine store, again Picture of 1787’ Chateau d’Yquern OK, I have the picture of 1787’ Chateau Server Browser d’Yquern, so I’ll show it directly. 32
    • Can we do it better? 33
    • Can we do it better? Yes! 33
    • Other techniques 34
    • Use GET in Ajax requests Expiration headersUse JSON in AJAX requests Reduce use of CNAMEReduce DOM elements JPEG and PNG codificationReduce iframes Lazy load for imagesPrefer CSS over JS Content Delivery NetworksActivate deflate Avoid Flash filesFont optimizing Eager loadingCache Control headers Mobile-specific optimisations 35
    • No time for much more... 36
    • 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 37
    • Questions?I can’t bite you from this far! 38
    • Thank you! 39