WWLLC
What Would
Lucky Luke Code?

Create Drupal sites
with good
performance
Henrik
Developer
Mostly backend
@FrontHenrik
Frank
Web designer
Mostly front-end
@fragje
The frontkom family
Per André Rønsen

Marco Fernandes

CIO/Chief Innovation Officer

Senior Web developer

Fredrik Paus

É...
Fredrikstad | Madeira
Agenda
●
●
●
●
●
●

Why performance?
Analysis
Frontend
Server configuration
Backend
Your inputs
SHOWTIME
Why performance now?
● We got fast internet connections
● Powerful computers
● Shiny large screens
…but wait, we got mobil...
Web pages are getting

FAT

1.5MB
Expect to increase by 21% the next year

● Today the average page is
●

● Oakley release...
When to start?
● Post-optimization is the root of all evil
● Lack of performance = Lack of planning
● Bad performance is b...
We need to analyze this
“Yeah, it’s slow, but it’s probably just
[insert wild speculation here]”
Hold your assumptions
● A lot of the time your assumption will be
wrong and cause a lot of wasted effort
● Let the data gu...
Tools
●
●
●
●

Web developer tools in your browsers
PageSpeed (Google)
Yslow (Yahoo)
Quicksprout
http://www.quicksprout.co...
Indepth analysis
Chrome Dev Tools

XHProf (Backend)

Frontend
Introduction to dev tools
http://bit.ly/discover-devtools

F...
Mobile first
Mobile first
● Start small. Add style and content as you get
more space, without limiting the user
experience.
http://brad...
Mobile first
●
●
●
●

Download as few MB as possible
Reduce requested files. Images, css, js.
Concatenate and minify css a...
HTML
● Take control over your markup
● Customize markup in your tpl.php
● Find design patterns and add classes to
similar ...
<section class="panel-pane paneviews-panes pane-commons-featuredpanel-pane-1 block">...</section>
<section class="panel-pa...
function theme_preprocess_panels_pane(&$vars) {
switch ($vars['pane']->pid) {
case '14':
$vars['classes_array'][] = 'box-d...
<section class="panel-pane paneviews-panes pane-commons-featuredpanel-pane-1 block box-default">
... </section>
<section c...
Useful gh-repo

http://bit.ly/template-php
by Jesper Wøldiche Rahkonen
Clean markup
● Modules
○ Clean Markup - Blocks, Panel panes, Panel regions,
Panel layouts
https://drupal.org/project/clean...
Default fields markup

<div class="field field-name-field-test
field-type-text field-label-above">
<div class="field-label...
After fences config

<h3 class="field-label">Foobar
field</h3>
<div class="field-foobar">Leaner markup
means better front-...
Clean markup
● Modules
○ Clean Markup - Blocks, Panel panes, Panel regions,
Panel layouts
https://drupal.org/project/clean...
CSS
● Write as little as possible
● Use classes instad of tags
○ ul li a {}
○ .nav-main .nav-item {}
○ http://bit.ly/quick...
.btn-default, .btn-cta {
text-align: center;
display: inline-block;
background-color: gray;
padding: 5px 10px;
color: whit...
SMACSS
● A must read for all
working with css
● Part of the book is
available online for free
http://smacss.com
http://pattern-lab.info
by Brad Frost
Preprocess that CSS
● LESS
● Stylus
● Sass
○
○
○
○

WARNING!

Compass - Sass mixins library and much more
Breakpoint - Rea...
.btn-default {
text-align: center;
display: inline-block;
background-color: gray;
padding: 5px 10px;
color: white;
}
.btn-...
.btn-default, .btn-cta {
text-align: center;
display: inline-block;
background-color: gray;
padding: 5px 10px;
color: whit...
Javascript
● Don’t load js before css
● Don’t load libraries you don’t need, and if
possible make custom builds to your ne...
MAGIC

https://drupal.org/project/magic
Avoid calculations in loops
var div = document.getElementById("to-measure"),
lis = document.getElementsByTagName('li'),
i,...
Improve Perceived performance
● Edge side includes
● Image lazy loading
Configuration
Tweak it up
Hosting
● Geography - Closer is better.
○ (Sorry New Zealand)

● SSD is awesome
● Quick and good support
○ (Sorry New Zeal...
PHP & MySQL
PHP version: newer is better
InnoDB > Myisam
APC
- Opcode cache
- Easy setup, huge performance win
- See https://drupal.org/node/1777090 for
configuration tips for Dru...
Memcache(d)
Improves editor experience + faster site
building
Memcache module not needed, just include in
settings.php
Alt...
// the path to the core cache file
include_once('./includes/cache.inc');
// the path to the memcache cache file
include_on...
First time using memcache
Varnish

Boost
(poor man’s
Varnish)

Gzip
High performance with cloud
● CDN
● Amazon AWS for static files and images
● Web Application Streaming
○ new tech, possibl...
Drupal
Good places to hang out
● high performance group on d.o
● Contrib modules
Module strategy
● As few modules as possible
○ Avoid the buffet syndrome

● Check which hooks are used.
○ hook_init() is m...
Module strategy
● Check that page cache is not being disabled
○
○
○
○
○

drupal_page_is_cacheable(FALSE);
$GLOBALS['conf']...
Watch the Logs

● Keep an eye on the dblogs
● May slow down disk if constantly logging
errors
● May point to underlying er...
Cache
●
●
●
●

Views Cache!
PHP blocks breaks cache
D7: contrib provides a lot
D8: Much more flexible out of the box
○ plu...
Be kind to the theme layer
● Avoid logic in the theme layer
○ hurts page cache

● Avoid heavy processes in the theme layer...
Views queries
Find candidates for optimizing
[mysqld]
log_slow_queries=/Applications/MAMP/logs/mys
ql_sql_slow.log
long_query_time=0.5
L...
Keep an eye on

PAGERS DISTINCT COUNT JOINS
Optimize Views Queries
Battle plan: Find JOINS
and see if you can do
the same within SELECT
Tip: use EXPLAIN on
views sql
...
No JOIN
select nid FROM node;
200005 rows in set (0.08 sec)

Data from astonishdesign.com
1 JOIN
select n.nid, s.
field_school_name_format
FROM node n
LEFT JOIN
field_data_field_school_name s ON
n.nid = s.entity_...
2 JOINS
select n.nid, s.field_school_name_format,
si.field_school_id_value
FROM node n
LEFT JOIN field_data_field_school_n...
3 JOINS
select n.nid, s.field_school_name_format, si.
field_school_id_value,
sp.field_school_phone_value
FROM node n
LEFT ...
Optimize Views Queries
● Optimize in hook_views_query_alter() and
hook_view_query_substitutions()

● Consider making views...
Specific use cases
● Defer heavy tasks
○ Push heavy tasks to cron
○ Batch API

● Fast 404
Good PHP habits
http://www.phpbench.com/
Stats
Performance module
New Relic
Load testing with jMeter (+Blazemeter)
Bring out the big guns

● Ditch the theme
layer
● Example: NewsFront
Now it’s your turn ;-)
Drupalcamp performance
Drupalcamp performance
Drupalcamp performance
Drupalcamp performance
Drupalcamp performance
Drupalcamp performance
Drupalcamp performance
Drupalcamp performance
Upcoming SlideShare
Loading in …5
×

Drupalcamp performance

855 views

Published on

What Would Lucky Luke Code?

A walkthrough of the tools and tricks we use to maximize performance when building Drupal sites, both backend and frontend

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
855
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Drupalcamp performance

  1. 1. WWLLC What Would Lucky Luke Code? Create Drupal sites with good performance
  2. 2. Henrik Developer Mostly backend @FrontHenrik
  3. 3. Frank Web designer Mostly front-end @fragje
  4. 4. The frontkom family Per André Rønsen Marco Fernandes CIO/Chief Innovation Officer Senior Web developer Fredrik Paus Élio Cró Jan-Helge Hansen COO/Project Manager Web Developer Infrastructure / support Thor André Gretland Roberto Ornelas Support & Training CTO Senior developer Fábio Neves Geir Gulland Hélder Mendes Bruno Campos CEO / Web strategist Web Designer Web developer Frank Gjertsen Elisabeth Gulland Wilma Web Designer Accountant QA Engineer ;) Henrik Akselsen JS/Mobile UX Web developer
  5. 5. Fredrikstad | Madeira
  6. 6. Agenda ● ● ● ● ● ● Why performance? Analysis Frontend Server configuration Backend Your inputs
  7. 7. SHOWTIME
  8. 8. Why performance now? ● We got fast internet connections ● Powerful computers ● Shiny large screens …but wait, we got mobile. …and bad mobile connections. …and emerging markets which are mobile only.
  9. 9. Web pages are getting FAT 1.5MB Expect to increase by 21% the next year ● Today the average page is ● ● Oakley released their new site. 80MB
  10. 10. When to start? ● Post-optimization is the root of all evil ● Lack of performance = Lack of planning ● Bad performance is bad business ● ● ● ● We need our clients interest in performance Show visually how a page loads Make a performance budget Plan performance from the beginning
  11. 11. We need to analyze this
  12. 12. “Yeah, it’s slow, but it’s probably just [insert wild speculation here]”
  13. 13. Hold your assumptions ● A lot of the time your assumption will be wrong and cause a lot of wasted effort ● Let the data guide the optimizing process ● Use the 80/20 rule => find low hanging fruit
  14. 14. Tools ● ● ● ● Web developer tools in your browsers PageSpeed (Google) Yslow (Yahoo) Quicksprout http://www.quicksprout.com/ ● WebPageTest http://www.webpagetest.org/
  15. 15. Indepth analysis Chrome Dev Tools XHProf (Backend) Frontend Introduction to dev tools http://bit.ly/discover-devtools Find out which functions that are using memory and processor time “The Breakpoint” Paul Irish / Addy Osmani
  16. 16. Mobile first
  17. 17. Mobile first ● Start small. Add style and content as you get more space, without limiting the user experience. http://bradfrostweb.com/demo/mobile-first ● Build systems instead of individual pages ● Write reusable code
  18. 18. Mobile first ● ● ● ● Download as few MB as possible Reduce requested files. Images, css, js. Concatenate and minify css and js Make sprites ○ Compass does this in a smart way… ● Or use icon fonts ○ http://iconmoon.io ○ or even better http://fontastic.me
  19. 19. HTML ● Take control over your markup ● Customize markup in your tpl.php ● Find design patterns and add classes to similar elements. ● In views it can be customized directly, on other output use template.php
  20. 20. <section class="panel-pane paneviews-panes pane-commons-featuredpanel-pane-1 block">...</section> <section class="panel-pane paneviews-panes pane-commons-activitystreams-activity-panel-pane-1 block">...</section>
  21. 21. function theme_preprocess_panels_pane(&$vars) { switch ($vars['pane']->pid) { case '14': $vars['classes_array'][] = 'box-default'; break; case '8': $vars['classes_array'] = array('box-default'); break; } }
  22. 22. <section class="panel-pane paneviews-panes pane-commons-featuredpanel-pane-1 block box-default"> ... </section> <section class="box-default"> ... </section>
  23. 23. Useful gh-repo http://bit.ly/template-php by Jesper Wøldiche Rahkonen
  24. 24. Clean markup ● Modules ○ Clean Markup - Blocks, Panel panes, Panel regions, Panel layouts https://drupal.org/project/clean_markup ○ Fences - clean fields markup globaly. https://drupal.org/project/fences
  25. 25. Default fields markup <div class="field field-name-field-test field-type-text field-label-above"> <div class="field-label">Foobar field: &nbsp;</div> <div class="field-items"> <div class="field-item even">Drupal default fields markup.</div> </div> </div>
  26. 26. After fences config <h3 class="field-label">Foobar field</h3> <div class="field-foobar">Leaner markup means better front-end performance. </div>
  27. 27. Clean markup ● Modules ○ Clean Markup - Blocks, Panel panes, Panel regions, Panel layouts https://drupal.org/project/clean_markup ○ Fences - clean fields markup globaly. https://drupal.org/project/fences ● Themes ○ Mothership https://drupal.org/project/mothership ○ Aurora https://drupal.org/project/aurora
  28. 28. CSS ● Write as little as possible ● Use classes instad of tags ○ ul li a {} ○ .nav-main .nav-item {} ○ http://bit.ly/quick-selectors ● Css can get out of control and hard to manage when a page scales
  29. 29. .btn-default, .btn-cta { text-align: center; display: inline-block; background-color: gray; padding: 5px 10px; color: white; } .btn-cta { background-color: dodgerblue; }
  30. 30. SMACSS ● A must read for all working with css ● Part of the book is available online for free http://smacss.com
  31. 31. http://pattern-lab.info by Brad Frost
  32. 32. Preprocess that CSS ● LESS ● Stylus ● Sass ○ ○ ○ ○ WARNING! Compass - Sass mixins library and much more Breakpoint - Really Simple Media Queries with Sass Toolkit - swiss army knife for PE and RWD Singularity - Grids withoutyour output Always check limits
  33. 33. .btn-default { text-align: center; display: inline-block; background-color: gray; padding: 5px 10px; color: white; } .btn-cta { @extend .btn-default; background-color: dodgerblue; }
  34. 34. .btn-default, .btn-cta { text-align: center; display: inline-block; background-color: gray; padding: 5px 10px; color: white; } .btn-cta { background-color: dodgerblue; }
  35. 35. Javascript ● Don’t load js before css ● Don’t load libraries you don’t need, and if possible make custom builds to your needs. E.g. Modernizr. ● Try to move most of your js at the bottom of your page, just before </body>. There is a special Drupal module for this. ● Avoid unnecessary dom manipulations
  36. 36. MAGIC https://drupal.org/project/magic
  37. 37. Avoid calculations in loops var div = document.getElementById("to-measure"), lis = document.getElementsByTagName('li'), i, len; for (i = 0, len = lis.length; i < len; i++) { lis[i].style.width = div.offsetWidth + 'px'; }
  38. 38. Improve Perceived performance ● Edge side includes ● Image lazy loading
  39. 39. Configuration Tweak it up
  40. 40. Hosting ● Geography - Closer is better. ○ (Sorry New Zealand) ● SSD is awesome ● Quick and good support ○ (Sorry New Zealand) ● Consider dedicated Drupal hosting ○ Fx Pantheon (has great workflow)
  41. 41. PHP & MySQL PHP version: newer is better InnoDB > Myisam
  42. 42. APC - Opcode cache - Easy setup, huge performance win - See https://drupal.org/node/1777090 for configuration tips for Drupal - Remember to assign enough memory, or the cache will not have any effect
  43. 43. Memcache(d) Improves editor experience + faster site building Memcache module not needed, just include in settings.php Alternative: Redis
  44. 44. // the path to the core cache file include_once('./includes/cache.inc'); // the path to the memcache cache file include_once ('./sites/all/modules/contrib/memcache/memcache.inc'); // make MemCacheDrupal the default cache class $conf['cache_default_class'] = 'MemCacheDrupal'; $conf['memcache_servers'] = array('127.0.0.1:11211' => 'default'); $conf['memcache_bins'] = array('cache' => 'default'); $conf['memcache_key_prefix'] = 'mysite';
  45. 45. First time using memcache
  46. 46. Varnish Boost (poor man’s Varnish) Gzip
  47. 47. High performance with cloud ● CDN ● Amazon AWS for static files and images ● Web Application Streaming ○ new tech, possible “CDN killer”) ○ from InstartLogic
  48. 48. Drupal
  49. 49. Good places to hang out ● high performance group on d.o ● Contrib modules
  50. 50. Module strategy ● As few modules as possible ○ Avoid the buffet syndrome ● Check which hooks are used. ○ hook_init() is more important to watch than hook_openid_normalization_method_info_alter() ● Preferred: Measure before/after install ○ Dive into xhprof ○ Disable suspected performance hogs
  51. 51. Module strategy ● Check that page cache is not being disabled ○ ○ ○ ○ ○ drupal_page_is_cacheable(FALSE); $GLOBALS['conf']['cache'] = 0; $GLOBALS['conf']['cache'] = CACHE_DISABLED; $conf['cache'] = FALSE; flags module, captcha module (This may have to be necessary, but at least know that it is happening)
  52. 52. Watch the Logs ● Keep an eye on the dblogs ● May slow down disk if constantly logging errors ● May point to underlying errors ● Bad Karma ● Tip: Get sent an email on each log error
  53. 53. Cache ● ● ● ● Views Cache! PHP blocks breaks cache D7: contrib provides a lot D8: Much more flexible out of the box ○ pluggable CSS and JavaScript optimization ○ personalize through JavaScript ○ Entity Cache
  54. 54. Be kind to the theme layer ● Avoid logic in the theme layer ○ hurts page cache ● Avoid heavy processes in the theme layer ○ node_load ○ sql queries ● Tip: Switch to another theme and do performance tests again
  55. 55. Views queries
  56. 56. Find candidates for optimizing [mysqld] log_slow_queries=/Applications/MAMP/logs/mys ql_sql_slow.log long_query_time=0.5 LOTS OF JOINS SELECT * FROM mother_of_all_huge_tables
  57. 57. Keep an eye on PAGERS DISTINCT COUNT JOINS
  58. 58. Optimize Views Queries Battle plan: Find JOINS and see if you can do the same within SELECT Tip: use EXPLAIN on views sql How many evaluations
  59. 59. No JOIN select nid FROM node; 200005 rows in set (0.08 sec) Data from astonishdesign.com
  60. 60. 1 JOIN select n.nid, s. field_school_name_format FROM node n LEFT JOIN field_data_field_school_name s ON n.nid = s.entity_id; 200005 rows in set (1.09 sec)
  61. 61. 2 JOINS select n.nid, s.field_school_name_format, si.field_school_id_value FROM node n LEFT JOIN field_data_field_school_name s ON n.nid = s.entity_id LEFT JOIN field_data_field_school_id si on n.nid = si.entity_id; 200005 rows in set (2.03 sec)
  62. 62. 3 JOINS select n.nid, s.field_school_name_format, si. field_school_id_value, sp.field_school_phone_value FROM node n LEFT JOIN field_data_field_school_name s ON n.nid = s. entity_id LEFT JOIN field_data_field_school_id si on n.nid = si. entity_id LEFT JOIN field_data_field_school_phone sp on n.nid = sp. entity_id; 200005 rows in set ( 5.03 sec)
  63. 63. Optimize Views Queries ● Optimize in hook_views_query_alter() and hook_view_query_substitutions() ● Consider making views into a module ○ Easier to optimize + easier version control
  64. 64. Specific use cases ● Defer heavy tasks ○ Push heavy tasks to cron ○ Batch API ● Fast 404
  65. 65. Good PHP habits http://www.phpbench.com/
  66. 66. Stats Performance module New Relic Load testing with jMeter (+Blazemeter)
  67. 67. Bring out the big guns ● Ditch the theme layer ● Example: NewsFront
  68. 68. Now it’s your turn ;-)

×