A little journey into website optimization
-
Upload
stelian-firez -
Category
Technology
-
view
5.327 -
download
0
description
Transcript of A little journey into website optimization
![Page 1: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/1.jpg)
Fast FastER Fasta little journey into Website Optimization
EST
![Page 2: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/2.jpg)
@stelianweb designer @digitibelieves in optimization
![Page 3: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/3.jpg)
“People don’t like to wait”
- Captain Obvious
![Page 4: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/4.jpg)
![Page 5: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/5.jpg)
40% of people abandon a website that takes
more than 3 seconds
to load.
- Forrester Research
![Page 6: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/6.jpg)
online shoppers expect pages to load in
2 seconds
- Forrester Research
![Page 7: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/7.jpg)
on the web 250ms might
win you the race
- Google & Microsoft studies
![Page 8: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/8.jpg)
Page load times affect online businesses
![Page 9: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/9.jpg)
![Page 10: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/10.jpg)
+500ms
Page loadtime Tr
affic
-3%
![Page 11: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/11.jpg)
+500ms
Page loadtime
Reve
nue -1.2%
![Page 12: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/12.jpg)
+100ms
Page loadtime
-1%
Sale
s
![Page 13: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/13.jpg)
- Steve Saunders, Google
“80-90% of the end-user response time is spent on the
front-end”
![Page 14: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/14.jpg)
ObjectivesLow number of filesSmall file sizeFast rendering
![Page 15: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/15.jpg)
Low number of files
![Page 16: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/16.jpg)
"Every HTTP request is a gamble. A chance to
fail."
- Scott Jehl
![Page 17: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/17.jpg)
6Connections per Hostname
![Page 18: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/18.jpg)
Use CSS Sprites
![Page 19: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/19.jpg)
![Page 20: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/20.jpg)
1 CSS file
![Page 21: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/21.jpg)
1 CSS file, ideally
![Page 22: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/22.jpg)
29
![Page 23: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/23.jpg)
![Page 24: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/24.jpg)
Use @media printinstead of print.css
![Page 25: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/25.jpg)
1 JS file per hostname
![Page 26: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/26.jpg)
40+
![Page 27: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/27.jpg)
![Page 28: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/28.jpg)
Small file size
![Page 29: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/29.jpg)
Writesemantic HTML
avoiding unnecessary elements
![Page 30: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/30.jpg)
Minify thejavascript
![Page 31: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/31.jpg)
Smaller CSSuse a reset.css file to avoid repetitionuse shorthand properties*design with consistencyremove unused styling
* for the designers
![Page 32: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/32.jpg)
Normalbody{ font-family: "Lucida Grande", Lucida, Verdana, sans-serif; font-size: 1em; line-height: 1.5em; font-style: italic; font-weight: bold;}
Shorthandbody{ font: italic bold 1em/1.5em "Lucida Grande", Lucida, Verdana, sans-serif;}
![Page 33: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/33.jpg)
Consistency: font-size
Alexa top 1000 websites
78%10+
23%100+
The number of font-size declarations
![Page 34: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/34.jpg)
Consistency: patterns
source: stubbornella.org
![Page 35: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/35.jpg)
Minify theCSS
![Page 36: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/36.jpg)
Use font subsetsif possible
![Page 37: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/37.jpg)
Choose theright image format
84%binary files (images,
PDFs, ...)
Alexa top 1000 websites
![Page 38: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/38.jpg)
GIFOnly for animations
![Page 39: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/39.jpg)
PNG-8for small dimensions and no need for
true color support; recommended for illustrations
![Page 40: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/40.jpg)
PNG-8 Alpha TransparencyFireworks
![Page 41: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/41.jpg)
PNG-8 Alpha TransparencyImageAlpha (Free)
![Page 42: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/42.jpg)
PNG-24when in need for high quality
graphics, although it tends to get bigger in size
![Page 43: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/43.jpg)
Use posterization to reduce the number of
colors in a PNG-24 file
![Page 44: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/44.jpg)
JPEGgreat for large images that contain
photographic data
![Page 45: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/45.jpg)
JPEG tips80% quality is usually good enoughtry to align edges to an 8x8 pixel griduse JPEG selective quality in FW
![Page 46: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/46.jpg)
JPEGLeft square aligned to the 8x8 grid,
right one not
![Page 47: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/47.jpg)
JPEG Selective Qualityin Fireworks
![Page 48: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/48.jpg)
Use ImageOptimto compress images further
Alternatives: smush.it, punypng, jpegmini
![Page 49: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/49.jpg)
![Page 50: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/50.jpg)
![Page 51: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/51.jpg)
Original PNG-8 + Alpha Transparency
1068 KB 263 KB
![Page 52: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/52.jpg)
Original PNG-8 + Alpha +ImageOptim
1068 KB 228 KB
![Page 53: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/53.jpg)
Fast rendering
![Page 54: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/54.jpg)
Cache static files
![Page 55: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/55.jpg)
Cache static filesforever
![Page 56: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/56.jpg)
“e fastest HTTP request is the one not
made”
![Page 57: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/57.jpg)
Using .htaccessHeader unset PragmaFileETag NoneHeader unset ETag # cache images for 10 years<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif)$"> Header set Cache-Control "max-age=315360000, public, must-revalidate" Header unset Last-Modified</FilesMatch> # cache html/htm/xml/txt files for 2 hours<FilesMatch "\.(html|htm|xml|txt|xsl)$"> Header set Cache-Control "max-age=7200, must-revalidate"</FilesMatch>
this is just an example;for best results, use HTML5 Boilerplate
![Page 58: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/58.jpg)
Cache AJAX requests
![Page 59: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/59.jpg)
Faster CSS
Don't use @importStay away from *Avoid using a tag as a key
body * {...}body > * {...}ul.active li a {...}ul.active > li > a {...}
![Page 60: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/60.jpg)
Use CSS3 responsiblydon’t overuse border-radius, box-shadow,
gradients
http://perfectionkills.com
![Page 61: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/61.jpg)
Use domain shardingto increase the number of
concurrent connections
![Page 62: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/62.jpg)
Use a CDNContent Delivery Network
![Page 63: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/63.jpg)
Use CDN hostedJS libraries
![Page 64: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/64.jpg)
Specify the jQuery versionfor better caching
http://code.jquery.com/jquery-latest.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
no cache
1 hour
1 year
![Page 65: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/65.jpg)
Always load scriptsasyncroniusly and put them at the bottom of
the page
![Page 66: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/66.jpg)
Compress only compressible resources
HTML, CSS, JS, XML, SVG, ICOuse GZIP instead of Deflateuse lowercase for better compressionHTML5 Boilerplate .htaccess recommened
![Page 67: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/67.jpg)
e faviconhave one to avoid a 404load it from a subdomaincompress itcache it forever
![Page 68: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/68.jpg)
Avoid mixed content warnings
http://code.jquery.com/jquery-latest.min.js
//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
![Page 69: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/69.jpg)
Minimize reflows
![Page 70: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/70.jpg)
Watch out for 404faviconapple touch iconsapple-touch-icon-ZxZ-precomposed (android)
crossdomain.xml
![Page 71: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/71.jpg)
Trigger hardware accelerated CSS in iOS
![Page 72: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/72.jpg)
TestPageSpeed, Yslow
![Page 73: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/73.jpg)
MeasureGoogle Analytics Site
Speed
//default sample rate is 1%_gaq.push(['_setSiteSpeedSampleRate', 5]);
![Page 74: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/74.jpg)
So, what now?
![Page 75: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/75.jpg)
Cheat Lie
Deceive
![Page 76: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/76.jpg)
Performance Perception
![Page 77: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/77.jpg)
AppleThe iPhone saves a screenshot of every app
when it closes. So when you relaunch the app it loads that screenshot first.
![Page 78: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/78.jpg)
![Page 79: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/79.jpg)
![Page 80: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/80.jpg)
![Page 81: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/81.jpg)
Amazon
Priority Loading
![Page 82: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/82.jpg)
Tools & Resources(1 of 2)Tools๏ ImageOptim
๏ ImageAlpha
๏ HTML5 Boilerplate
๏ Smush.it - PunyPNG - JPEGmini - PNGGauntlet (Win)
๏ Online YUI Compressor
๏ CSS Sprite Generator - CSSsprite Photoshop script
๏ Page Speed - YSlow
Resources๏ Akamai Reveals 2 Seconds as the New Threshold of Acceptability for eCommerce Web Page Response Times
๏ How Loading Time Affects Your Bottom Line (Infographic)
๏ For Impatient Web Users, an Eye Blink Is Just Too Long to Wait
๏ Facebook pages that are 500ms slower result in a 3% drop-off in traffic (PDF)
๏ If Google increased page load by 500ms it would cost them 1.2% of their revenue (Video)
๏ Every 100ms of latency costs Amazon 1% of profit
๏ The Performance Golden Rule
![Page 83: A little journey into website optimization](https://reader033.fdocuments.net/reader033/viewer/2022052822/554be2d2b4c9056b348b4740/html5/thumbnails/83.jpg)
Tools & Resources(2 of 2)๏ Most Browsers Allow 6 Concurrent Connections per Hostname
๏ Top 5 Mistakes of Massive CSS (Video + Graphs)
๏ How to create CSS objects? Get the granularity right!
๏ HTTP Compression use by Alexa Top 1000
๏ Profiling CSS for fun and profit. Optimization notes. (CSS3 Performance)
๏ Maximize Your Chances of Caching Your jQuery
๏ Lose the Wait: HTTP Compression
๏ Instagram and Optimizing Favicons
๏ Use Lowercase Markup For Better Compression
๏ Small site? Raise your page load time calculation sample to 100%
๏ The iPhone’s Perceived Performance
๏ The 3 White Lies Behind Instagram’s Lightning Speed
๏ Making a Slow Site Appear Fast