Upload
kim-stefan-lindholm
View
4.785
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Improving Site Response Time, Part 1
Citation preview
Improving Site Response TimePart 1: Front-End Optimization (FEO)
1 26.1.2012Kim Stefan Lindholm
SETUP
• Server: CloudControl (Dublin, Ireland) with local Varnish HTTP accelerator
• CMS (Content Management System): Joomla 1.5
• WAF (Web Application Firewall): Incapsula
• CDN (Content Delivery Network): Akamai (Rackspace) & Amazon CloudFront
• Anycast DNS: DNS Made Easy
NB: Incapsula and Akamai automatically serve compressed (gzip) files
2
RESULTS
3
Proxy servers may take some time to refresh their cache, which can delay performance improvement.
Main page, average response time (ms)
Browser & server cache + compression
Minify images, CSS & JS
Gzip HTML, No caching
Combine CSS & JS
Inline images, Pre-gzip, CDN
Pingdom Panel, global average
LOAD TIME
4
5 s
9 s
14 s
18 s
Amsterdam Dallas, TX Dulles, VA Jiangsu, China
OriginalCachingCloudFront, inline, gzip
LOAD TIME
5
-87%
Amsterdam
-51%
Dulles, VA
-69%
Dallas, TX
-64%
Jiangsu
ChromeChrome
IE 7IE 8
How much were we able to decrease costly HTTP requests?
6
CACHED VS. FINAL
7
-83%
HTTP Requests
-30%
Total Weight
Yahoo YSlow add-on for Chrome
Original total weight was 206K
Did Incapsula web proxy/firewall contribute to the results?
8
INCAPSULA
9
Incapsula caching seemed to be affected by incoming traffic (site popularity) and not so much by changes in the website itself (cacheability etc.)
Speed difference between Incapsula proxy and global CDN (measured in
Europe)?
10
PROXY VS. CDN
11
Average load speed (real) tested with 10 iterations: time curl [--compressed] <url> > /dev/null
625 ms
1,250 ms
1,875 ms
2,500 ms
mootools.js (116k) template.css (11k) template_ie7.css (2k)
No proxyIncapsulaIncapsula, gzipAkamaiAkamai, gzip
Slowest 1st load: 1400 ms
Compressed size: 34k
Compressed size: 3k
PROXY VS. CDN
• Standard deviation with Akamai CDN was notable. At worst, fetching a 2k file was 3x slower than with the original unproxied connection.
•With compression on, first loads seemed very slow. This is acceptable, of course, if gzipping and pushing to cache only happens infrequently.
•Given the additional overhead of compression and DNS lookups, small files (<10k) are not automatically perfect candidates for CDN. Combine images using sprites instead.
12
Speed difference between Akamai and Amazon CloudFront?
13
CDN COMPARISON
14
Akamai, gzip CloudFront, gzip
Pingdom Panel, Response time report
CDN COMPARISON
15
2 s
5 s
7 s
9 s
Amsterdam Dallas Los Angeles Singapore Tokyo
Akamai, gzipCloudFrontCloudFront, gzip
Main page first load speed, CDN allowed to propagate for one day
CDN COMPARISON
16
Main page second load speed, CDN allowed to propagate for one day
2 s
5 s
7 s
9 s
Amsterdam Dallas Los Angeles Singapore Tokyo
Akamai, gzipCloudFrontCloudFront, gzip
CDNs seem quite equal in performance.
PROXY VS. CDN
17
Average load speed (real) tested with 3 iterations: time curl --compressed <url> > /dev/null
REVISITED
Akamai was the steadiest performer
globally.
Incapsula, gzipAkamai, gzipCloudFront, gzip
3 s
5 s
8 s
10 s
13 s
Norway UK US Japan
Incapsula, gzipAkamai, gzipCloudFront, gzip
Transparent bar denotes 1st loadFile: css-main-data.gz.css (73k)
LEARNINGS
• CDN for large files and gzipping are always good for performance
• CDN for small files can actually slow down performance
• Parallelizing across hosts works fine (2-4 hosts recommended by Yahoo)
•Options for gzipping CSS & JS: (1) Pre-compress and serve the right version (fastest), (2) done by server on the fly (easiest), (3) done by application (can be slow)
• Realistic comparison of CDNs would require weeks of monitoring18
CHECKLIST✓ Minify and combine CSS & JavaScript (load JS asynchronously when possible)
✓ Compress images and use web/tablet/smartphone resolutions
✓ Combine small images into sprites or use inline images with data URIs (IE7 requires MHTML: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/)
✓ Gzip HTML, CSS & JS. Pre-compress files when possible.
✓ Load large resources from CDN, possibly using multiple hosts
✓ Long cache TTL for static assets + invalidate with versioning (main-xyz.css / main.css?xyz)
✓ Advanced: lazy loading, async CSS, HTML5 cache, JS pre-execution, response prediction
19
APPENDIX
20
21
Requests Load time Page size First byteStart render
Repeat view
OriginalOriginalOriginalOriginalOriginalOriginalOriginalAmsterdam, Netherlands 43 3.9 s 206 kB
Dallas, TX, USA 43 7.8 s 206 kB
Dulles, VA, USA 44 4.7 s 227 kB 1.5 s 2.8 s 4.0 s
Jiangsu, China 45 17.3 s 228 kB 2.9 s 8.0 s 13.8 s
CachingCachingCachingCachingCachingCachingCachingAmsterdam, Netherlands 43 1.3 s 161 kB
Dallas, TX, USA 43 3.1 s 161 kB
Dulles, VA, USA 44 3.3 s 180 kB 1.0 s 2.0 s 2.7 s
Jiangsu, China 44 11.2 s 178 kB 2.1 s 6.2 s 9.5 s
Parallel CDNs (CloudFront), Combined images, Pre-gzipParallel CDNs (CloudFront), Combined images, Pre-gzipParallel CDNs (CloudFront), Combined images, Pre-gzipParallel CDNs (CloudFront), Combined images, Pre-gzipParallel CDNs (CloudFront), Combined images, Pre-gzipParallel CDNs (CloudFront), Combined images, Pre-gzipParallel CDNs (CloudFront), Combined images, Pre-gzipAmsterdam, Netherlands 37 0.5 s 113 kB
Dallas, TX, USA 37 2.4 s 113 kB
Dulles, VA, USA 6 2.3 s 114 kB 0.9 s 2.1 s 0.8 s
Jiangsu, China 26 6.2 s 145 kB 2.1 s 3.9 s 1.3 s
JOOMLA SETTINGS• JotCache plugin • CDN for Joomla plugin
22
NB: images must be present in CDN if locally referenced
from CSS
RESOURCES - ANALYTICS
• Pingdom Full Page Test, http://tools.pingdom.com/fpt/
•WebPageTest, http://www.webpagetest.org/
• REDbot (cache testing), http://redbot.org/
• Loads In, http://loads.in/
• Cloud Speed Test (CDN comparison), http://cloudharmony.com/speedtest
•DNS Check, http://www.webdnstools.com/dnstools/domain_check23
RESOURCES - COMPRESSION
• Smush.it, http://www.smushit.com/ysmush.it/
• YUI Compressor, http://yuilibrary.com/download/yuicompressor/
• In case you need to manually copy all assets to CDN:
• SmartSprites, http://csssprites.org/, SpriteMe, http://spriteme.org/24
java -jar yuicompressor-2.4.7.jar -o '.css$:-min.css' *.css
java -jar yuicompressor-2.4.7.jar -o '.js$:-min.js' *.js
tar c $(find <source_dir> \( -name "*.bmp" -o -name "*.gif" -o -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" -o -name "*.css*" -o -name "*.js*" \)) | tar xv -C <dest_dir>