Simple Ways to Awesomize® Drupal's Page Load Times

Simple Ways to Awesomize® Drupal's Page Load Times

As presented at Florida Drupalcamp 2013

96152416ecb494209fa7ff4edf0cde31?s=128

Michael Herchel

April 20, 2013
Tweet

Transcript

  1. 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
  2. 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)
  3. 4.
  4. 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/
  5. 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/
  6. 8.

    More so for mobile... You're not just competing with other

    sites. You're competing with native apps.
  7. 9.

    More so for mobile... Mobile First = Mobile Performance First

    Start thinking about performance at the design stage -Dave Olsen
  8. 11.
  9. 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)
  10. 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
  11. 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!
  12. 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
  13. 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
  14. 22.
  15. 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.
  16. 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.
  17. 26.
  18. 28.
  19. 29.
  20. 30.
  21. 31.

    Not all modules are bad... There are modules that will

    lend you a hand in increasing your page speed...
  22. 32.

    Lots of results in your views? • Views Lite Pager

    http://drupal.org/project/views_litepager (No SQL COUNT()'s in Query)
  23. 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!)
  24. 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 .
  25. 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
  26. 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.
  27. 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)
  28. 39.

    80-90% of the end-user response time is spent on the

    frontend. Start there. - Steve Souders
  29. 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
  30. 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/
  31. 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!
  32. 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") :)
  33. 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
  34. 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
  35. 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)
  36. 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
  37. 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/
  38. 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.
  39. 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
  40. 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
  41. 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/
  42. 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