Your SlideShare is downloading. ×
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
Nächste SlideShare
Wird geladen in ...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

10 Tips to make your Website lightning-fast - SMX Stockholm 2012


Published on

Talking about advanced performance optimization strategies at SMX Stockholm 2012 covering request reduction & optimization, caching, mark-up tuning, database & webserver performance and much, much ...

Talking about advanced performance optimization strategies at SMX Stockholm 2012 covering request reduction & optimization, caching, mark-up tuning, database & webserver performance and much, much more!

Published in: Technologie

0 Kommentare
7 Gefällt mir
  • Hinterlassen Sie den ersten Kommentar

Keine Downloads
Bei Slideshare
Aus Einbettungen
Anzahl an Einbettungen
Gefällt mir
Einbettungen 0
No embeds

Inhalte melden
Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

Wählen Sie Ihren Grund, warum Sie diese Präsentation als unangemessen melden.

No notes for slide


  • 1. - 10 Tips - To make your site lightning-fast! Stockholm, October 2012 Bastian Grimm, Managing Partner - Grimm Digital - @basgr
  • 2. About me Background: PHP & Java – Dev. CMS, shops & forums – Wazap! Game Search Engine Online Marketing since 2004 – SEO strategy consulting, in-house trainings & workshops, WordPress @basgr SEO, bla bla… Links, Links, Links…need some? Stuff to play with…
  • 3. Get the Slide-Deck
  • 4. Very (very!) simplified model… So… here comes our (potential) visitor…
  • 5. Very (very!) simplified model… … using Firefox. Or Chrome. Or… well…
  • 6. Very (very!) simplified model… ... requesting the website of choice. YOUR website…
  • 7. Very (very!) simplified model… Displaying the site requires sub-requesting further resources.
  • 8. Very (very!) simplified model…The site will be sent back tothe user when all resources have been fetched.
  • 9. One (simple) goal only:Make your site as fast as you can! Can you get, what Amazon got? 1%+ in revenue for every 100 ms in speed. Amazon study:
  • 10. Detailed in-browserperformance analysis (req. Firebug Add-on)
  • 11. YSlow! break-down:Pre- and post-caching.
  • 12. Web-based performance analysis using the „Google factors”..
  • 13. GWT Site Performance Info This is really not so good…!high load times = high bounce rate = loosing in SERP 1:1‘s
  • 14. #1: Reduce amount of requests
  • 15. Get rid of multiple CSS & JS files 8 JS + 4 CSS req. on a single page is a bad idea! Move CSS to the top, JS to the Often times JS does change the footer to un-block rendering! style, so always do CSS before JS! Best case: 1 CSS + 1 JS file. Real world: 1-2 CSS, 1 int. + 2-3 ext. JS
  • 16. Do CSS Sprites Combine multiple (small) images into one big image to save on HTTP requests.
  • 17. Tip: Balance parallelizable resources Even modern browsers don‘t allow 6+ connections per hostname at the same time! Using img1/img2/ allows balancing requests to and between multiple sub-domains The result: A massive 6+ connections at a time.
  • 18. #2: Decrease size of request(s)
  • 19. Minify CSS & JS files Minifying this (small) style- sheet results in 63% savings! For CSS, try: For JS, go with: Removing unnecessary whitespaces, line- breaks and comments to reduce file-size. And: Makes it way harder for competitors to steal your code!
  • 20. Enable GZIP compression Verify by checking the response headers, for “Content-Encoding“ to be set to “gzip“ On Apache, try “mod_deflate” which is straight forward: AddOutputFilterByType DEFLATE text/html text/plain text/xml Output compression does massively decrease file-sizes and therefore speeds up rendering. One of the ugliest sites ever:
  • 21. Tip: Use Live HTTP Headers in Firefox To easily check request and response objects as well as their headers, try Live HTTP Headers or Fire Cookie.
  • 22. Use a cookie-less domain Live HTTP headers reveals that no cookies are set for For static files, cookies are not required - disable cookie handling all together.
  • 23. Tip: How to get rid of Cookies… Straight forward: Don’t set them…! Apache header manipulation using “mod_headers”: RequestHeader unset Cookie Stop cookies being passed back to the client : Header unset Set-Cookie Same goes for other components (like PHP, Java and the like) – each does provide functionality to disable Cookies.
  • 24. #3: Implement proper caching
  • 25. Setup caching for static resources Expires: Set the “Expires”-header to exactly Fri, 07 Sept 2013 03:18:06 GMT one year ahead of the request date Last-Modified: Set the “Last-Modified”-header to Fri, 07 Sept 2012 03:18:06 GMT the date the file was last modified Cache-Control: Set the “Cache-Control: max-age”- max-age=3153600 header to “3153600” (1 year, again) It’s important to specify one of Expires or Cache-Control max-age, and one of Last-Modified or ETag, for all cacheable resources.
  • 26. Some caching pitfalls… <link rel="stylesheet" type="text/css" href="/styles/83faf15055698ec77/my.css" media="screen" /> Use URL fingerprinting to force refreshing of cached resources. But don’t use parameters to indicate versions – Squid et. al have issues ;) <link rel="stylesheet" type="text/css" href="/styles/my.css?v=83faf15055698ec77" media="screen" /> If you want to cache SSL contents,Header append Cache-Control make sure to have the “Cache "public, must-revalidate" control“-header to contain public.
  • 27. #4: Clean-up that source-code
  • 28. Remove HTML comments ANT can remove HTML comments at build-time using a ReplaceRegEx task There is no need for HTML comments on a live system, remove them during build-time. Or try this one:
  • 29. 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.
  • 30. Don’t scale images using width / height The image dimensions are 220x93, but onsite it’ll be shown as 100x42. Small images = less file-size. Don’t scale down images using attributes, provide small ones!
  • 31. Tip: Make images even smaller! Use tinyPNG to optimize PNG files without loosing in quality (up to 70% savings)JPEGmini does the same for JPEGfiles and will reduce your images massively (up to 80% smaller)! &
  • 32. Don’t use empty href- / src-attributes IE makes a request to the directory in which the page is located. Safari & Chrome make a request to the actual page itself. Empty “href” & “src” attributes can make your site slow – they’re requesting themselves.
  • 33. Don’t use @import in CSS <link rel="stylesheet" type="text/css" href="/styles/my.css" /> Always load CSS files using link-rel HTML tags. <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! Using CSS @import in external CSS makes it impossible for browsers to download in parallel.
  • 34. #5: Consider asynchronous requests
  • 35. Off-load components into AJAX fragments NO! Not this one…! I know: You guys are SEOs… you want ALL contents being crawl-able. So, use with care… like for filters, etc. AJAX = Asynchronous JavaScript And XML Using AJAX fragments does not block page loading! Credits: - AJAX Crawling:
  • 36. How about HeadJS? The beauty: Only a single JS needs to be loaded in <head>! HeadJS does enable parallelizing JS file downloads. Freaking awesome!
  • 37. #6: Optimize your MySQL setup
  • 38. Use the Slow Query Log[mysqld] Pro tip: Make sure to use “log-log-slow-queries = my-slow.log queries-not-using-indexes” option tolong_query_time = 5 find SELECTs without proper indices!log-queries-not-using-indexes# Run the Perl script: Get slow log parser to know how manysudo ./ times queries appear, they take to exec./var/log/my-slow.log > slow.out and which are the worst ones! MySQL seems to be slow - but no idea why? Enable “log-slow-queries” in my.cnf Log parser download:
  • 39. Get your queries right! Pro tip: All “SELECT * FROM X” Adding a proper index statements can be pre-pended with would fix this! “EXPLAIN …” – use it!EXPLAIN SELECT id, firstname, lastname FROM employee WHERE id=1;+----------+------+---------------+------+---------+------+------+------------+| table | type | possible_keys | key | key_len | ref | rows | Extra |+----------+------+---------------+------+---------+------+------+------------+| employee | ALL | NULL | NULL | NULL | NULL | 200 | where used |+----------+------+---------------+------+---------+------+------+------------+ A huge amount of MySQL queries suffer from bad coding. Make sure to setup & use indices properly!
  • 40. Don’t do search using MySQL Neither MATCH AGAINST nor LIKE queries are fast! SELECT * FROM table WHERE MATCH (field1, field2) AGAINST (query); Searching in MySQL is a performance killer! Consider switching to a real search server. &
  • 41. Consider simple table optimizations Do you really need “BIGINT”, maybe “INT” is enough? Sure, this string will ever have that many characters – “VARCHAR(20)” Also required to keep indexes in vs. “VARCHAR(255)”? memory by trimming the overhead! Consider carefully how to setup your database tables. It makes a huge difference!
  • 42. Prioritize statements properly Use “INSERT DELAYED” to execute INSERTs without blocking other stuff! INSERT DELAYED INTO xyz (bla, blubb) VALUES (val1, val2); You need this data REALLY fast? “SELECT HIGH PRIORITY” helps! SELECT HIGH_PRIORITY foo, bar FROM XYZ; Do you need some data faster than other? Do you care about results of INSERT statements?
  • 43. Make your server faster! If you’re lazy: Use MySQLTuner to get recommendations for optimizing your my.cnf settings There is a pretty good reason, MySQL comes with different pre-configuration files - Use them!
  • 44. Consider master- / slave-setups read-only write replicate MySQL replication is awesome – use different servers for reading and writing data.
  • 45. #7: Optimize hosting & web-servers
  • 46. Get reliable hosting Reliable hosting is key – make sure to choose a provider that fits your requirements. A starting point:
  • 47. If you’re on Apache… Pro tip: “Small” stuff like disabling .htaccess can really improve performance! Google does provide “mod_pagespeed” to implement their best practices – give it a try!
  • 48. Or maybe: Consider replacing Apache… “nginx” is ridiculously fast – especially when serving static assets it’s probably the best you’ll find!
  • 49. And: Reverse-proxy incoming requests All requests will be passed through a proxy, no direct access to web-servers will be given. Optimising Web Delivery Get load off your web-server by setting up a dedicated box in front using SQUID Cache.
  • 50. #8: Optimize your PHP setup
  • 51. Use memcached sessions only! memcached comes with a php.ini settings custom PHP session handler - put session data straight to your servers RAM. session.save_handler = memcached session.save_path = "localhost:11211" By default, PHP will store session information on your servers HDDs – no good for high traffic sites!
  • 52. Get a PHP accelerator What you need to know: PHP code will be complied for each request during runtime. By using an accelerator like APC you can cache functions, objects and much more in memory. Better: It does also cache compiled byte-code!
  • 53. Try out PHP-FPM Read the full article: FastCGI Process Manager for PHP …is an alternative PHP FastCGI implementation with some additional features useful for sites of any size, especially busier sites.
  • 54. #9: Always be the first one to know!
  • 55. Heavy load testing:
  • 56. Site-uptime & performance: pingdom
  • 57. Application & service monitoring: icinga
  • 58. #10: Bit of a Cheat…
  • 59. You could just buy me a beer!
  • 60. Use Google’s CDN for popular libraries Since a lot of site-owners are using G-DCs, chances are, people have those files cached already! Google has the fastest CDN on the planet, make sure you use their DCs to serve your files if possible!
  • 61. Off-load other stuff to a CDN Latency is crucial – especially if you’re serving a global audience, offloading statics to a CDN will give additional performance. CDN Overview:
  • 62. OMCap 2011 - Online Marketing Konferenz Berlin And that’s it! …13.10.2011 Wait, still not enough? 62
  • 63. Geek-stuff: JsExe - JavaScript compressor- Takes the original JavaScript file as the input- If it helps, the JS file is optimized using an improved version of Google Closure Compiler- File byte order is reversed or not (depending on whether it improves final compression)- It embeds the resulting file in a PNG image, choosing the best PNG format (RGB or gray).- Then it uses the most efficient PNG optimizer tool (PNGOUT or another one).- The output PNG is stripped of CRC and IEND block.- Finally a loader is appended to the output file.0 Have you ever considered serving JavaScript files as highly compressed PNG files?! Credits to: |
  • 64. We’re almost there: Key take-aways 1) Serve all textual content, including HTML, scripts, styles, XML, JSON and plain text, in a gzipped format 2) Make fewer HTTP requests by combining components — JS, CSS & images (by using CSS Sprites) 3) Minify & place scripts at the bottom, CSS at top of your site 4) Use separate cookie-free domains for your static components
  • 65. Thanks! Questions? Grimm, Managing Partner - Grimm Digital - @basgr