Simple Ways to Awesomize® Drupal's Page Load Times

As presented at Florida Drupalcamp 2013

Transcript

1. Simple Ways to Awesomize® Drupal's Page Load Times Mike Herchel @mikeherchel http://herchel.com
2. About Me • 8th Grade Geography Bee Champion! (Murray Middle School 1993) • "Doing" websites since '01 • Drupal for ~6 years (Heavy-duty Theming & Sitebuilding) • Sys Admin by trade • Speed Freak
3. What to expect in the next 45 minutes • Intentionally crappy memes / intentionally bad graphics • Why does website speed matter? • "Backend" tuning and caching (server stuff) • Drupal tuning • Front-end tuning (theming)
5. Page Speed Matters • Adding half a second to a search results page can decrease traffic and ad revenues by 20 percent, according to a Google study. • Amazon found that every additional 100 milliseconds of load time decreased sales by 1 percent http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/
6. Page Speed Matters http://minus.com/msM8y8nyh#1e
7. More so for mobile... 97% of mobile response time happens at the front end http://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/
8. More so for mobile... You're not just competing with other sites. You're competing with native apps.
9. More so for mobile... Mobile First = Mobile Performance First Start thinking about performance at the design stage -Dave Olsen
10. Back-end Performance
12. K.I.S.S • Rule #1: If you have a slow site that shouldn't be slow, don't throw complexity at the problem. ◦ This means troubleshoot the actual issue (application, db, hardware, etc)
13. Tune your Webserver • Apache ◦ Lower max-clients in httpd.conf (prevents hard drive swap space usage) (Total Memory - Operating System Memory - MySQL memory) / Size Per Apache process 4096MB - 512MB - 2048MB / 100MB = 15 Max-Clients
14. Tuning your database • MySQL Tuner (http://mysqltuner.pl) • Percona Configuration Wizard = Great Start! (https: //tools.percona.com/wizard) • Use Innodb (this is the default for D7) • Increase Innodb Buffer Size • MySQL Query Cache • Check your slow query logs!
15. Server-side Caching ... or series of crappy graphics
16. Normal Hosting Environment
17. Add some Redis / Memcache caching... • Memcached / Redis
18. Throw in a little Opcode Caching... • APC saves PHP from having to load the PHP files from the hard drive. It saves them in memory instead (much faster) http://linuxaria.com/howto/everything-you-need-to-know-about-apc-alternate-php-cache?lang=en
19. PHP / APC Configuration • PHP Memory Limit • APC apc.php Download this from http://pecl.php.net/package/APC apc.shm_size = 64M apc.include_once_override = 1 http://2bits.com/articles/high-php-execution-times-drupal-and-tuning-apc-includeonce-performance. html
20. Reverse Proxy caching goodness... • Varnish (https://www.varnish-cache.org/)
21. ...With a CDN on top!
23. Welcome to the Convoluted World of Drupal Caching! Breakdown of Drupal's Performance Admin Cache pages for anonymous users: Stores entire HTML in cache db table (or memcached/redis). Also, enables external caching (Varnish, Browser). Cache Blocks: Basic caching for blocks. Note that blocks created by views must be explicitly enabled for caching. Amount of time before page cache is cleared. Note! This needs to be enabled for Block Cache! Uses PHP library to Gzip html. KEEP THESE CHECKED DAMNIT! :) Only affects external caches (Varnish, browers). Sets cache-control max-age value.
24. Views Caching Explained Query Results Cache: Caches db results for set time period (does what you think it does). Rendered Output Cache: Does not cache db query. This will query the db (or query results cache), and if there is no change it will output rendered html. If there *is* a change, it will regenerate and cache resulting html.
25. Views Block Caching
27. BEWARE the Unknown Codebase!
31. Not all modules are bad... There are modules that will lend you a hand in increasing your page speed...
32. Lots of results in your views? • Views Lite Pager http://drupal.org/project/views_litepager (No SQL COUNT()'s in Query)
33. Lots of anonymous traffic and a crappy host? • Boost http://drupal.org/project/boost Does what Varnish does - but doesn't require external service. This will work on most shared hosts and can dramatically speed up anonymous page requests! (Plus it has 26 essential vitamins & minerals!)
34. Lots of authenticated traffic slowing down your server? • Authcache http://drupal.org/project/authcache After a page is loaded by the browser, a second HTTP request may be performed via Ajax. This initiates a lightweight DRUPAL_BOOTSTRAP_ SESSION that allows SQL queries to be executed, and returns any user-customized data to the page .
35. Complex data types slowing down your database? • Entity Cache http://drupal.org/project/entitycache Useful ONLY for large site with lots of fields and references your entity types. Mostly useful for scalability. Good discussion at http://groups.drupal.org/node/292348
36. Lots of large images sucking up bandwidth? • ImageAPI Optimize http://drupal.org/project/imageapi_optimize Losslessly optimizes an image when it is saved. ◦ Supports 3rd party services. ◦ Integrates into D7 core's image styles.
37. Modules to help troubleshoot Drupal performance issues • Devel http://drupal.org/project/devel ◦ Query Log ◦ XHProf support (must have XHProf installed on server) ◦ Page Timer ◦ Memory Usage • Performance Logging and Monitoring http://drupal.org/project/performance ◦ Enables awesome performance logs ◦ Can log directly to DB - only do this on dev sites ◦ On live sites can log to cache services (memcache, apc, etc)
38. Front-end Performance
39. 80-90% of the end-user response time is spent on the frontend. Start there. - Steve Souders
40. Performance Golden Rule
41. Limit HTTP Requests • What is a HTTP Request?
42. Limit HTTP Requests • "The fastest HTTP Request is the one not made." - Chris Coyier • Modern Browsers are limited to 6 parallel connections (per server) • Design and Theme your website with HTTP Requests in mind • CSS Image Sprites • Inline Images (Base64 encoding) • Icon Fonts
43. Aggregate your damned CSS & JS, Damnit! • Enable aggregating CSS & JS files
44. What is a CSS Image Sprite? • Combine all CSS background images into one image. • Use CSS's background-position property to move the background image into correct placement • PITA (but worth it) • Sass & Compass do it for free! (YA- AAAYYY!!) http://compass-style.org/reference/compass/ helpers/sprites/
45. Inline Images in CSS & HTML (Data URI's) Did you know?? You can embed images in HTML & CSS! Warning! IE8 and up Only! Plus IE only supports <=32KB images!
46. Inline Images in CSS & HTML (Data URI's) • Saves an HTTP Request! :) • But, it makes your CSS or HTML file longer :( • Unless... you make sure the files are being compressed by your web server. The total size will (about) even out in the end! :) • But, its a PITA ...you have to upload your image to a website that converts it. :( • Unless... you use Sass/Compass! inline-image("../images/background-pattern.png") :)
47. Spread your HTTP requests across multiple servers! • 6 parallel HTTP requests per server ◦ Use Google CDN for Jquery! Its free and browser may already have it cached! https://github.com/mherchel/bastard/blob/master/template.php template.php
48. Spread your HTTP requests across multiple servers! Use a Content Delivery Network! CDNs can spread assets across multiple servers: static1.yourcdn.com static2.yourcdn.com ... Also, CDNs can serve assets from locations that are physically closer to you. This is a huge win in the war against latency! THE ASSETS! CDN ALL
49. Lower your bandwidth! • Make sure your host is gzipping static assets! • Make sure static assets are able to be cached by your browser! • Optimize your images! (use that image api optimizer module or do it manually) ◦ Use JPGs instead of PNGs when you can • Don't use a lot of images! ◦ Don't load unnecessary images in mobile css (progressive enhancement)
50. Efficient HTML Markup! • Clean your HTML, and your CSS will follow. - Lara Swanson at http://alistapart.com/article/improving-ux- through-front-end-performance • Not so easy to do in Drupal! So, here's some easy tips: ◦ Create or use a minimal base theme. Don't get stuck with unnecessary wrapper elements (Looking at you Omega!). ◦ Modify Views to output semantic HTML Elements ◦ Or use the Fences Module! http://drupal. org/project/fences
51. Efficient CSS Markup! • Limit the nesting of your selectors to as little as possible • Don't use elements as selectors. Use IDs or classes instead. • This is baaaadd... • Use Instead of • Limit CSS3 selectors (:nth-child(), :last-child, etc) http://css-tricks.com/efficiently-rendering-css/
52. Efficient JavaScript! • Pay Attention to your JS performance! • JS execution take approx 10x longer on mobile devices (due to less RAM and CPU) • Async and deferred JS execution - http://www.html5rocks.com/ en/tutorials/async/deferred/ and http://peter.sh/experiments/asynchronous -and-deferred-javascript-execution-explained/ • http://jsperf.com - aims to provide an easy way to create and share test cases, comparing the perform- ance of different JS snippets by running benchmarks.
53. Quick Chrome Tools Overview [Demo Time!]
54. General Resources • High Performance on groups.drupal.org http://groups.drupal.org/high-performance • Beginner's Guide to Caching Data in Drupal 7 (in code) http://www.lullabot.com/blog/articles/beginners-guide-caching-data-drupal-7 • Top 15 Drupal performance tips http://www.netmagazine.com/features/top-15-drupal-performance-tips • DrupalCon Sydney: Performance Tough Love http://www.youtube.com/watch?v=WoFBAGHvAFA
55. Backend Resources • Video: An Overview of Performance & Scalability by Nate Haug (This is awesome) http://drupalize.me/videos/overview-performance-scalability • Every damned thing on 2bits.com http://2bits.com/ • ...including Xen vs Virtuozzo (Cloud computing) http://2bits.com/articles/common-issues-and-solutions-dealing-cloud- computing-and-vps-performance-issues-drupal.html
56. Front-end Resources • High Performance Web Sites Blog - Steve Souders (Lots of great JS optimization tips) http://stevesouders.com/ • Presentation: Even Faster Websites (Steve Souders) http://www.slideshare.net/souders/sxsw-even-faster-web-sites • Let’s Do Simple Stuff to Make Our Websites Faster (Chris Coyier) http://css-tricks.com/video-screencasts/114-lets-do- simple-stuff-to-make-our-websites-faster/
57. And in closing... • Don't forget about tonight's afterparty! Info at http://fldrupalcamp.org/community/after-party • If you're going to DrupalCon Portland, we're doing some hiking beforehand and are looking for more people http://groups.drupal.org/node/288408 • I'm on Twitter at @mikeherchel