Some of the most aesthetically pleasing sites are also the slowest, but you don’t have to limit yourself to square corners and solid background colors to speed up your Drupal site. There are a number of tips and simple techniques you can adopt in your current process to get both performance and great design in future projects. Presented at: Philly Tech Week 2014 (current slides are from presentation) Drupal Camp NJ 2014 Capital Camp 2013 (Washington D.C.) Design 4 Drupal 2013 (Boston) NYC Camp 2013 The Pitch While clear, many somehow forget the simple equation that: Great design + fast loading pages + (great content of course) = more traffic. The Stats The presentation will start with results from a few sites, after improvements were made, that will give you the extra incentive to employ the techniques and tips described throughout the rest of the presentation. The Focus How to design and build super fast Drupal sites will be core to the presentation, but will not be limited as many are universal to all Web CMS platforms. You will come away from the presentation with a broader understanding of current performance improving trends no matter what systems you are working with.

1. Designing and Theming for
Performance
Matthew Dorman
Sr. Vice President
NorthPoint Digital
@northps
@matthewdorman
#ptw14

2. / About NorthPoint Digital
/ About Presenter
/ Why Performance is Important
/ Tools
/ Reduce – Reuse - Recycle
/ Trends
/ Questions / Open Discussion

3. WE LEAD WITH
3
We lead with experience
NEW YORKBOSTON PHILADELPHIA
NEW YORK BOSTON PHILADELPHIA
HQ

4. WE LEAD WITH
4
NorthPoint helps optimize
your digital presence
through a perfect blend:
Strategy.
Experience.
Technology.

5. WE LEAD WITH
5
Web.
Mobile.
Social.
We create digital
platforms so you have
endless possibilities:

6. WE LEAD WITH
6
About Speaker
 NJIT Alum (B.S. Computer Science)
 7+ years with NorthPoint
 Oversee OpenSource Team
 16+ years w/ Enterprise Websites
@matthewdorman
linkedin.com/in/matthewdorman

7. WE LEAD WITH
7
About Speaker

8. WE LEAD WITH
8
Why? SEO Benefit
“Like us, our users place a lot of value in speed
— that's why we've decided to take site speed
into account in our search rankings.”
-Statement from Google on April 9, 2010

9. WE LEAD WITH
9
Why? Stickiness & Revenue
 For every 1 second of
improvement, up to a 2%
increase in conversions
 For every 0.1 second
improvement, incremental
revenue grew by up to 1%
 Noted SEO benefits for
entry pages and reduce
bounces
 End-user benchmarks
(actual measured times)
track optimization

10. WE LEAD WITH
10
Why? Case Study
 Testing incremental
changes
 Ad impressions up 33%
year-over-year in Feb ‘12
 Gallery ad impressions
tripled Year over Year
 Click-through rates stable

11. WE LEAD WITH
11
Which Loads Faster? Car and Driver vs. Edmunds

12. WE LEAD WITH
12
Which Loads Faster? Eagles v. Giants

13. WE LEAD WITH
13
Which Loads Faster? Drupal vs. WordPress

14. WE LEAD WITH
14
Which Loads Faster? Acquia vs. Automattic

15. WE LEAD WITH
15
Tools
 Yahoo’s Yslow
developer.yahoo.com/yslow
 AOL’s WebPage Test
www.webpagetest.org
 Google’s PageSpeed
developers.google.com/speed/pagespeed

16. WE LEAD WITH
16
Reduce – Reuse - Recycle
Photo:

17. WE LEAD WITH
17
Fewer Requests (Reduce)
 FIX 404 ERRORS!
 Aggregate CSS
 Aggregate JavaScript
 Lossless Compression
 Lazy Load Images
 Optimize Content

18. WE LEAD WITH
18
Fewer Requests (Reduce)

19. WE LEAD WITH
19
Custom Fonts (Reduce)
 Images vs. Fonts
 Large Screens
 Limit Styles
 Body Content
 Sprite Replacement?
drupal.org/project/fontyourface

20. WE LEAD WITH
20
Sprites (Reuse)
 Better Load Time
 Easier Maintenance
 NorthPoint Contribution:
https://github.com/northpoint/SpeedySprite

21. WE LEAD WITH
21
SMARTER DRUPAL (Recycle)

22. WE LEAD WITH
22
Contribute (Recycle)
 Modules
 advagg
 speedy
 jquery_update
 fontyourface
 imageapi_optimize
 boost
 cdn
 varnish
http://www.drupal.org/project/

23. WE LEAD WITH
23
Trends
Photo: images.businessweek.com
httparchive.org/trends.php

24. WE LEAD WITH
24
Drupal 8
Wim Leers:
http://bit.ly/1jP9v0w
photo: http://association.drupal.org

25. / Why Performance is Important
/ Tools
/ Reduce – Reuse - Recycle
/ Trends

26. WE LEAD WITH
26
Questions? / Open Discussion
Photo: images.businessweek.com

27. WE LEAD WITH
New York Office
130 West 42nd Street
New York, NY 10036
Tel: 212-819-1700
Boston Office
470 Atlantic Avenue
Boston, MA 02110
Tel: 617-725-8888
Philadelphia Office
1650 Market Street
Philadelphia, PA 19103
Tel: 215-558-2700
infoUS@northps.com / www.northps.com
THANK YOU
Matthew Dorman
mdorman@northps
@matthewdorman
#ptw14