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

11,686 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
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,686
On SlideShare
0
From Embeds
0
Number of Embeds
3,516
Actions
Shares
0
Downloads
1
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

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

×