Unblocking The Main Thread Solving ANRs and Frozen Frames
Make your Drupal site perform like an athlete
1. 15 / 03 / 2015 - Drupal Camp Cluj 2015
Make your Drupal site perform
Like an athlete
2. Gabriel
Ungureanu
CEO @ AG Prime, Cluj-Napoca
www.ag-prime.com
Drupal developer for 7 years
https://www.drupal.org/u/
gabrielu
Drupal module developer and
Drupal 8 Sprinter
Open source enthusiastic
3. Why performance matters?
Visitors spend less than 2 seconds to make an impression,
Google finds you relevant if the page loads in less than 2
seconds,
Download speeds differ depending on where your end-user is
located,
People browse internet in the train, bus, airport, etc.,
Mobile devices (getting more and more) running mobile
internet care about content size.
6. 1. Server response time
Check your traffic
expectations,
Decide your server structure,
what type of data do you host?
Anonymous user
Authenticated pages
Binary data (images, video)
7. Low traffic website
A virtual machine can do the job
Activate Drupal caching (per page, per block, per view)
De-activate Database logging (on the server as well)
Disable Devel module, UI modules
Activate CSS / JS Aggregation (see Advanced
Aggregation for IE support :) )
8.
9. Medium traffic
Memory caching (key-value pair storing)
Memcache: https://www.drupal.org/project/memcache
Redis: https://www.drupal.org/project/redis
Can also persist data after restart. Useful for session
storing
Heavy static content / Boost https://www.drupal.org/
project/boost
10. High traffic
A set of three
Varnish (cache server),
Application server (Drupal) - Apache or Nginx,
Database server (MySQL).
11.
12.
13. No revision
Drupal has out-of-the-box revision control, you don’t
need it in most of the cases,
https://www.drupal.org/project/
field_sql_norevisions
16. The Amazon
Cloud
Elastic Cloud
RDS (Database instances)
Load balancer (pay per minute)
Spot instances (run cheap clone
of your EC2 instance when your
computing needs grow)
http://www.ag-prime.com/
leverages AWS to host high
performing sites.
17. 2. Page download time
Time to download necessary files from the Server to the User’s device
18. AGGREGATE CSS AND JS
FILES
Make sure that:
Aggregating the content does not break your site,
Make sure CSS rules are correct and don`t rely on
their position in the file.
It loads correctly on all browsers (see IE Limits per
Stylesheet). There is a Drupal solution for this as
well, it is called Advanced Aggregation: https://
www.drupal.org/project/advagg
19. Use image
sprites
Include more graphics into a single file,
Make the graphic files as small as
possible,
Select them using CSS positioning.
20. Use SVG’s and IconFonts
Smaller size, vector information represents the text
format that defines it;
It's scalable, this means you can easily scale your
graphics when drawing a responsive layout;
IconFonts: http://css-tricks.com/examples/
IconFont/
21. DNS & HTTP2
Make fewer DNS lookups, load the content to as FEW
different domains as possible;
Aggregate content, load less files, consider using
HTTP2 / SPDY;
22. 3. Page render time
Optimise the order of your content, put the important parts
at the top and move the less important at the bottom (eg.
move unnecessary Javascript files at the end of your
document);
Use valid markup, valid markup allows the rendering
engine to make less guesses;
Use as few tags as possible. You can consider starting with a
light theme, like https://www.drupal.org/project/
mothership
23. Load content with Ajax
Quickly deliver pages from cache, then update content
with Javascript at runtime;
Usage:
Commerce sites
News sites
Display comments, votes, etc.