first
Evan Willhite
Senior Developer
Centresource
WHY?
People like Money
every 100 ms increase in load time of Amazon.com decreased sales by 1%
a change in a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20%
http://www.peer1.com/knowledgebase/how-slow-website-impacts-your-visitors-and-sales
RESPONSIVE ≠ magic
86% of responsive sites send about the same hefty payload to small screens as they do to large screens...
... page weight overall is on the rise -- Brad Frost
http://bradfrostweb.com/blog/post/prioritizing-performance-in-responsive-design/
Our JOB
80-90% of the end-user response time is spent on the frontend. -- Steve Souders
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
HOW?
ASSETs
CodE
RENDERING
Assets
Assets
the Problem: Browsers can only load X* at a time
- Images (and Fonts)
- Sprites
- Optimization - https://drupal.org/project/imageapi_optimize
- External server (Amazon S3, font server)
- Data uri's - http://css-tricks.com/data-uris/
- CSS/JS
- Aggregation - http://closure-compiler.appspot.com/home
- CDNs for libraries - http://www.jsdelivr.com
-
Server-side (don't be scared)
- HTTP compression - http://gzipwtf.com
- Caching (expires headers) - http://bit.ly/ywUpS7
CODE
Code - CSS
The problem: bloat
- CSS Best Practices
- Specific = fast, Descendants = slow (3 or less)
- Key selector specificity (header a)
- Group like styles
- Proper ID usage
- Leverage inheritance on parent selectors
- If you use preprocessors (SASS/LESS), beware output
https://developers.google.com/speed/docs/best-practices/rendering
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
http://csswizardry.com/2011/09/writing-efficient-css-selectors/
CODE - JS
- Less libraries (and latest versions)
- IDS vs. classes*
- CSS3 animations vs. JS animations*
- Minify - https://drupal.org/project/speedy
- Print at bottom of page - https://drupal.org/project/mothership
- Defer/async loading
https://developers.google.com/speed/articles/optimizing-javascript
http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/
RENDERING
RENDERing
Network - Measure Requests
RENDERing
Timelines - frame rate
Key: 60FPS or higher
RENDERing
Profiles: Measure JS/CSS/memory Performance
MY Drupal launch Checklist
- Theme/module purge from dev stage
- Disable unused modules and disable UI/dev ones
- Clean log
- Enable aggregation (admin/config/development/performance)
- Mothership: disable dev tools, enable single file css/js, CDN jQuery
- Install/enable Speedy
- Install/enable ImageAPI Optimize and optimize theme images
- Responsive Image solution - Mobify
Drupal 8 CHanges
- More control over js (load none)
- namespacing of Drupal(.js)
- #attach instead of drupal_add_*
- CSS/JS aggregation more controlled
- more dependency on localstorage/client-side caching for personalization
Learn Yoself
Chrome DevTools (Videos):
http://discover-devtools.codeschool.com/
Chrome DevTools (Text):
https://developers.google.com/chrome-developer-tools/
Make the Web Faster:
https://developers.google.com/speed/
Page Speed Insights:
https://developers.google.com/speed/pagespeed/insights/
YSlow:
http://yslow.org/
Questions?
Performance First
By Evan Willhite