Front-End Optimization (FEO)

transcript

Improving Site Response TimePart 1: Front-End Optimization (FEO)

1 26.1.2012Kim Stefan Lindholm

• 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

RESULTS

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

Amsterdam Dallas, TX Dulles, VA Jiangsu, China

OriginalCachingCloudFront, inline, gzip

LOAD TIME

Amsterdam

Dulles, VA

Dallas, TX

Jiangsu

ChromeChrome

IE 7IE 8

How much were we able to decrease costly HTTP requests?

CACHED VS. FINAL

HTTP Requests

Total Weight

Yahoo YSlow add-on for Chrome

Original total weight was 206K

Did Incapsula web proxy/firewall contribute to the results?

INCAPSULA

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)?

PROXY VS. CDN

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.

Speed difference between Akamai and Amazon CloudFront?

CDN COMPARISON

Akamai, gzip CloudFront, gzip

Pingdom Panel, Response time report

CDN COMPARISON

Amsterdam Dallas Los Angeles Singapore Tokyo

Akamai, gzipCloudFrontCloudFront, gzip

Main page first load speed, CDN allowed to propagate for one day

CDN COMPARISON

Main page second load speed, CDN allowed to propagate for one day

Amsterdam Dallas Los Angeles Singapore Tokyo

Akamai, gzipCloudFrontCloudFront, gzip

CDNs seem quite equal in performance.

PROXY VS. CDN

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

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

APPENDIX

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

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

JOOMLA SETTINGS• JotCache plugin • CDN for Joomla plugin

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>

Front-End Optimization (FEO)

Technology