Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
THE NEED FOR SPEED
HOW TO MAKE YOUR WEBSITE REALLY FAST!
Bastian Grimm
@basgr
http://bg.vu/brigh14
NO NEED TO TAKE ANY NOTES!
Read the full story here: http://gdig.de/1o
“We encourage you to start looking
at your site's speed - not only to im-
prove your ranking in search engines,
but also t...
Can you get, what Amazon got?
1%+ in revenue for every
100 ms in speed.
Amazon study: http://gdig.de/amzn100
ONE (SIMPLE) ...
SITE OWNERS DID LISTEN…
TOP-3 RESULTS WAY FASTER THAN COMPETITORS
Source: Searchmetrics Ranking Factors 2014 (US)
#0
WHERE DO I START?
SOME BASIC TOOLS & PERFORMANCE DATA
Web-based performance analysis
using the „Google factors”..
http://developers.google.com/speed/pagespeed/insights/
Detailed in-browser
performance analysis
(req. Firebug Add-on)
Real user’s avg.
page load times
Behaviour > Site Speed > Overview
Collects all the data, 1% default sampling rate (custom...
#1
REDUCE NO. OF REQUESTS
AS FEW HTTP CONNECTIONS AS POSSIBLE!
Get rid of multiple CSS & JS files
Best case: 1 CSS + 1 JS file.
Real world: 1-2 CSS, 1 int. + 2-3 ext. JS
Often times JS ...
How about HeadJS?
HeadJS does enable parallelizing JS file
downloads. Freaking awesome!
The beauty of it: Only a single JS...
www.spritecow.com
Do CSS Sprites
http://spriteme.org/
Combine multiple (small) images into one
big image to save on HTTP requests.
Tip: Balance parallelizable resources
Using img1/img2/imgX.domain.com allows balancing
requests to and between multiple su...
Consider off-loading (statics) to a CDN
Latency is crucial – especially if you’re serving a global audience,
offloading st...
On WordPress? Try W3 Total Cache
http://wordpress.org/extend/plugins/w3-total-cache/
#2
DECREASE SIZE OF REQUEST
THE SMALLER THE FILE, THE FASTER IT LOADS
Minify CSS & JS files
Removing unnecessary whitespaces, line-
breaks and comments to reduce file-size.
And: Makes it way h...
Enable GZIP compression
Output compression does massively decrease
file-sizes and therefore speeds up rendering.
Verify by...
Why would I do that?
Normal
271 KB
Minified
90 KB
GZIP‘ed
78 KB
Min. + GZIP‘ed
32 KB
~88% savings in file size due to comb...
Use Google’s CDN for popular libraries
Google has the fastest CDN on the planet, make sure
you use their DCs to serve your...
Tip: Use Live HTTP Headers in Firefox
Easily check request & response objects
using Live HTTP Headers or Fire Cookie.
http...
Use a cookie-less domain
For static files, cookies are not required -
disable cookie handling all together.
Live HTTP head...
Tip: How to get rid of Cookies…
Same goes for components like PHP, Java, etc. -
each does provide functionality to disable...
#3
IMPLMENT PROPER CACHING
ONLY TRANSFER FILES WHEN REALLY NECESSARY!
Setup caching for static resources
It’s important to specify one of Expires or Cache-Control max-age,
and one of Last-Modi...
Some caching pitfalls…
If you want to cache SSL contents,
make sure to have the “Cache
control“-header to contain public.
...
#4
CLEAN-UP THAT HTML!
ONLY TRANSFER FILES WHEN REALLY NECESSARY!
Remove HTML comments
There is no need for HTML comments on a
live system, remove them during build-time.
ANT can remove HT...
Move inline CSS / JS to external files
Make the HTML as small as possible. Move
out inline CSS and JS to make it cache-abl...
Don’t use @import in CSS
Using CSS @import in external CSS makes it
impossible for browsers to download in parallel.
Alway...
Don’t scale images using width / height
Small images = less file-size. Don’t scale down
images using attributes (or CSS), ...
Tip: Make images even smaller!
Use tinyPNG to optimize
PNG files without loosing in
quality (up to 70% savings)
JPEGmini d...
WordPress Plug-in + API: kraken.io
https://kraken.io/
~62% of todays internet traffic is images & video…
For non-SEO images: Try Lazy Load
http://www.appelsiini.net/projects/lazyload
<script src="jquery.js" type="text/javascrip...
Make your Social Buttons Async
http://www.phpied.com/social-button-bffs/
#5
THE SERVER SIDE (NO TIME…!)
TWEAK HOSTING, DATABASES, WEBSERVER, ETC.
If you’re on Apache…
Google does provide “mod_pagespeed” to
implement their best practices – give it a try!
https://develo...
Or maybe: Consider replacing Apache…
“NGINX” is ridiculously fast – especially when serving
static assets it’s (probably) ...
Googles‘ SPDY on NGINX = WOW!
Multiplexed streams:
Unlimited concurrent streams over
one single TCP connection.
Request pr...
Test SPDY Features (Server + Client)
http://spdycheck.org http://caniuse.com/spdy
Why not reverse-proxy incoming requests?
Get load off your web-server by setting up a
dedicated box in front using SQUID C...
SLIDE NO. 45 …
SEO Trainings, Seminars & Strategy Consulting
WordPress Security, Consulting & Development
Berlin-based Full-Service Perfo...
Upcoming SlideShare
Loading in …5
×

The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014

13,754 views

Published on

My talk at #brightonSEO 2014 on how to make websites FAST, covering request optimizations, caching, JS & CSS tweaks and a lot more!

Published in: Technology
  • Be the first to comment

The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014

  1. 1. THE NEED FOR SPEED HOW TO MAKE YOUR WEBSITE REALLY FAST! Bastian Grimm @basgr
  2. 2. http://bg.vu/brigh14 NO NEED TO TAKE ANY NOTES!
  3. 3. Read the full story here: http://gdig.de/1o
  4. 4. “We encourage you to start looking at your site's speed - not only to im- prove your ranking in search engines, but also to improve everyone's experience on the internet.” - Amit Singhal & Matt Cutts, Google Search Quality Team
  5. 5. Can you get, what Amazon got? 1%+ in revenue for every 100 ms in speed. Amazon study: http://gdig.de/amzn100 ONE (SIMPLE) GOAL ONLY… MAKE YOUR SITE AS FAST AS YOU CAN!
  6. 6. SITE OWNERS DID LISTEN… TOP-3 RESULTS WAY FASTER THAN COMPETITORS Source: Searchmetrics Ranking Factors 2014 (US)
  7. 7. #0 WHERE DO I START? SOME BASIC TOOLS & PERFORMANCE DATA
  8. 8. Web-based performance analysis using the „Google factors”.. http://developers.google.com/speed/pagespeed/insights/
  9. 9. Detailed in-browser performance analysis (req. Firebug Add-on)
  10. 10. Real user’s avg. page load times Behaviour > Site Speed > Overview Collects all the data, 1% default sampling rate (customizable)!
  11. 11. #1 REDUCE NO. OF REQUESTS AS FEW HTTP CONNECTIONS AS POSSIBLE!
  12. 12. Get rid of multiple CSS & JS files Best case: 1 CSS + 1 JS file. Real world: 1-2 CSS, 1 int. + 2-3 ext. JS Often times JS does change the style, so always do CSS before JS! Move CSS to the top, JS to the footer to un-block rendering!
  13. 13. How about HeadJS? HeadJS does enable parallelizing JS file downloads. Freaking awesome! The beauty of it: Only a single JS needs to be loaded in <head>! http://headjs.com/
  14. 14. www.spritecow.com
  15. 15. Do CSS Sprites http://spriteme.org/ Combine multiple (small) images into one big image to save on HTTP requests.
  16. 16. Tip: Balance parallelizable resources Using img1/img2/imgX.domain.com allows balancing requests to and between multiple sub-domains The result: A massive 6+ connections at a time. http://www.browserscope.org/ Even modern browsers don‘t allow 6+ connections per hostname at the same time!
  17. 17. Consider off-loading (statics) to a CDN Latency is crucial – especially if you’re serving a global audience, offloading static files to a CDN will give additional performance. CDN Overview: http://gdig.de/cdns
  18. 18. On WordPress? Try W3 Total Cache http://wordpress.org/extend/plugins/w3-total-cache/
  19. 19. #2 DECREASE SIZE OF REQUEST THE SMALLER THE FILE, THE FASTER IT LOADS
  20. 20. Minify CSS & JS files Removing unnecessary whitespaces, line- breaks and comments to reduce file-size. And: Makes it way harder for competitors to steal your code! For CSS, try: http://www.phpied.com/cssmin-js/ http://developer.yahoo.com/yui/compressor/ For JS, go with: http://www.crockford.com/javascript/jsmin.html https://developers.google.com/closure/compiler Minifying this (small) style- sheet results in 63% savings!
  21. 21. Enable GZIP compression Output compression does massively decrease file-sizes and therefore speeds up rendering. Verify by checking the response headers, for “Content-Encoding“ to be set to “gzip“ One of the ugliest sites ever: http://www.gzip.org/ On Apache, try “mod_deflate” which is straight forward: AddOutputFilterByType DEFLATE text/html text/plain text/xml
  22. 22. Why would I do that? Normal 271 KB Minified 90 KB GZIP‘ed 78 KB Min. + GZIP‘ed 32 KB ~88% savings in file size due to combining minifying and file compression. Based on jQuery Version 1.9.1 …
  23. 23. Use Google’s CDN for popular libraries Google has the fastest CDN on the planet, make sure you use their DCs to serve your files if possible! https://developers.google.com/speed/libraries/ Since a lot of site-owners are using G-DCs, chances are, people have those files cached already!
  24. 24. Tip: Use Live HTTP Headers in Firefox Easily check request & response objects using Live HTTP Headers or Fire Cookie. https://addons.mozilla.org/en-US/firefox/addon/live-http-headers/
  25. 25. Use a cookie-less domain For static files, cookies are not required - disable cookie handling all together. Live HTTP headers reveals that no cookies are set for gstatic.com http://www.ravelrumba.com/blog/static-cookieless-domain/
  26. 26. Tip: How to get rid of Cookies… Same goes for components like PHP, Java, etc. - each does provide functionality to disable Cookies. Apache header manipulation using “mod_headers”: RequestHeader unset Cookie Stop cookies being passed back to the client : Header unset Set-Cookie http://httpd.apache.org/docs/2.4/mod/mod_headers.html Straight forward: Don’t set them…!
  27. 27. #3 IMPLMENT PROPER CACHING ONLY TRANSFER FILES WHEN REALLY NECESSARY!
  28. 28. Setup caching for static resources It’s important to specify one of Expires or Cache-Control max-age, and one of Last-Modified or ETag, for all cacheable resources. Set the “Expires”-header to exactly one year ahead of the request date Set the “Last-Modified”-header to the date the file was last modified Set the “Cache-Control: max-age”- header to “3153600” (1 year, again) Expires: Fri, 07 Sept 2013 03:18:06 GMT Last-Modified: Fri, 07 Sept 2012 03:18:06 GMT Cache-Control: max-age=3153600
  29. 29. Some caching pitfalls… If you want to cache SSL contents, make sure to have the “Cache control“-header to contain public. Use URL fingerprinting to force refreshing of cached resources. Header append Cache-Control "public, must-revalidate" <link rel="stylesheet" type="text/css" href="/styles/83faf15055698ec77/my.css" media="screen" /> <link rel="stylesheet" type="text/css" href="/styles/my.css?v=83faf15055698ec77" media="screen" /> Careful using parameters to indicate ver- sions – sometimes proxies have issues ;)
  30. 30. #4 CLEAN-UP THAT HTML! ONLY TRANSFER FILES WHEN REALLY NECESSARY!
  31. 31. Remove HTML comments There is no need for HTML comments on a live system, remove them during build-time. ANT can remove HTML comments at build-time using a ReplaceRegEx task Or try this one: http://code.google.com/p/htmlcompressor/
  32. 32. Move inline CSS / JS to external files Make the HTML as small as possible. Move out inline CSS and JS to make it cache-able.
  33. 33. Don’t use @import in CSS Using CSS @import in external CSS makes it impossible for browsers to download in parallel. Always load CSS files using link-rel HTML tags. <link rel="stylesheet" type="text/css" href="/styles/my.css" /> <style type="text/css"> @import "/styles/my.css"; @import url("/styles/my.css") screen; </style> Especially in external CSS, this will make your mama cry!
  34. 34. Don’t scale images using width / height Small images = less file-size. Don’t scale down images using attributes (or CSS), provide small ones! The image dimensions are 220x93, but onsite it’ll be shown as 100x42.
  35. 35. Tip: Make images even smaller! Use tinyPNG to optimize PNG files without loosing in quality (up to 70% savings) JPEGmini does the same for JPEG files and will reduce your images massively (up to 80% smaller)! http://tinypng.org/ & http://www.jpegmini.com/
  36. 36. WordPress Plug-in + API: kraken.io https://kraken.io/ ~62% of todays internet traffic is images & video…
  37. 37. For non-SEO images: Try Lazy Load http://www.appelsiini.net/projects/lazyload <script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script> <img class="lazy" src="default.jpg" data-original="real-image.jpg" width="640" height="480" alt="sometext" /> $("img.lazy").lazyload(); Embed jQuery + Lazy Load Plug-in Execute the loader… Provide default + real image, also include dimensions.
  38. 38. Make your Social Buttons Async http://www.phpied.com/social-button-bffs/
  39. 39. #5 THE SERVER SIDE (NO TIME…!) TWEAK HOSTING, DATABASES, WEBSERVER, ETC.
  40. 40. If you’re on Apache… Google does provide “mod_pagespeed” to implement their best practices – give it a try! https://developers.google.com/speed/pagespeed/module
  41. 41. Or maybe: Consider replacing Apache… “NGINX” is ridiculously fast – especially when serving static assets it’s (probably) the best you’ll find! http://www.nginx.com/
  42. 42. Googles‘ SPDY on NGINX = WOW! Multiplexed streams: Unlimited concurrent streams over one single TCP connection. Request prioritization: SPDY implements priorities ; client can request as many items as it wants, and assign a priority to each. HTTP header compression: SPDY compresses request and response HTTP headers, resulting in fewer packets and fewer bytes transmitted. http://nginx.org/en/docs/http/ngx_http_spdy_module.html
  43. 43. Test SPDY Features (Server + Client) http://spdycheck.org http://caniuse.com/spdy
  44. 44. Why not reverse-proxy incoming requests? Get load off your web-server by setting up a dedicated box in front using SQUID Cache. http://www.squid-cache.org/ All requests will be passed through a proxy, no direct access to web-servers will be given.squid-cache.org Optimising Web Delivery
  45. 45. SLIDE NO. 45 …
  46. 46. SEO Trainings, Seminars & Strategy Consulting WordPress Security, Consulting & Development Berlin-based Full-Service Performance Marketing Agency @basgr http://bg.vu/brigh14

×