Front End page speed performance improvements for Drupal
-
Upload
andrew-kucharski -
Category
Technology
-
view
2.249 -
download
1
description
Transcript of Front End page speed performance improvements for Drupal
open source web development
open source web development
Page Speed
Twitter: @akucharski
open source web development
@akucharski @dev_machev
open source web development
About Promet• 2003 Founded• 2008 focus on Drupal CMS• 2009 Mobile development• Faces of Promet today:
open source web developmentAwards and Press
CMS Expo Spotlight Awards
• 2012 Best Drupal CMS App for Commerce
• 2012 Best Drupal Mobile CMS App
Notable Press Mentions
• Wireless Week - Promet iPhone Madison app
• Cult of Mac – ipad Dispatch system
50+ Drupal sponsorships, speakingsessions and attending
open source web developmentOur Solutions
Promet Solutions Inc.
Promet Source
- Open source web development
- Drupal-based websites, products, and applications
Promet Support
- Drupal Managed Services
- Drupal DevOps consulting
Promet Mobile
- Enterprise mobile business solutions
- Drupal integration with mobile
open source web development
http://www.flickr.com/photos/joconnell
open source web developmentWhat is page speed? And what is
this presentation about?
•What’s speed got to do with it? – Why faster is better
•What is page load speed?•Tools used to measure performance of your pages and site
•Key Improvements to make Drupal "run fast"
open source web development
Why care about performance?
Google Blog: 2011 – “We encourage you to start looking at your site’s speed— not only to improve your ranking in search engines, but also to improve everyone’s experience on the Internet. “
Why care about page speed?
•Time = Money… •Speed = Money…•Slower Page load = Less Money
open source web development
HTML DELAY EXPERIMENT
Determine impact of server delays
GOAL
Delay before sending HTML page Different experiments with different
delays Small % of traffic Monitor negative impact
METHODOLOGY
open source web development
open source web development
open source web development Lets not get confused
• Performance – How fast does the page load
• Scalability - The ability for a distributed system to easily expand and contract its resource pool to accommodate heavier or lighter loads.
• High Availablity
open source web developmentWaterfall diagrams
• X = Time
• Y = Number of objects on page
• Y(1) = HTTP Request – rest of objects are elements of the page, images, CSS and js files, etc, etc.
• Time to load all elements
open source web development Waterfall diagrams
• DNS Lookup – time it takes for browser to find the server
• Initial Connection – three way handshake, hard to control
• Time to First Byte – server wait time
• Content Download – how long it takes to transfer the data from server to browser
open source web developmentWaterfall diagrams
• Back End
• Front End
• Render Start
• Render complete
open source web development
Front End vs. Back End
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
Front End vs. Back End
open source web developmentTools
• Browser Tools:• Firebug• Yslow for firebug
• http://developer.yahoo.com/yslow/
• Page Speed – online/Firefox/Chrome• http://code.Google.com/speed/articles/
• Web Page Test• http://www.webpagetest.org
• Apache Bench• http://httpd.apache.org/docs/2.0/programs/ab.html
• Devel• http://drupal.org/project/devel
http://www.flickr.com/photos/bike/
open source web development Firebug
open source web development
Yslow•Steve Souders, while he was Chief Performance at Yahoo! Created YSLOW and best practices
•Firefox firebug plug in
•Grades your site based on yahoo best practices
•Scores – higher is better
open source web development
Page Speed
Steve Souders at Google Google Recommendations based on Google best practices
open source web development
Page Speed
open source web developmentWeb Page Test (www.webpagetest.org)
open source web developmentWeb Page Test (www.webpagetest.org)
open source web developmentApache Bench
• Very simple “It is designed to give you an impression of how your current Apache installation performs. This especially shows you how many requests per second your Apache installation is capable of serving.”
• Ab –n # -c # http://[site]/
open source web developmentDevel
open source web development
http://www.flickr.com/people/13809318@N00
open source web development
The Basics – for designers themers and content editors
Avoid bad requests Avoid CSS expressions Combine images using CSS sprites Minimize DNS lookups Minimize redirects Optimize images Remove unused CSS Serve scaled images Specify image dimensions Use efficient CSS selectors
https://developers.google.com/speed/docs/insights/rules
open source web developmentKey Improvements to make Drupal
“run fast”
• Low hanging fruit – Turn on performance improvements in Drupal
open source web development
• Views Cache and Views Content Cache (Alpha)
What about views?
open source web development
• Views Cache and Views Content Cache (Alpha)
What about views?
open source web development Drupal.org/projects/speedy
• Speedy - Minfy JavaScript – contributed module
•Minifying the files removes comments, whitespace, and can even transform parts of functions in ways to make them smaller. For example, a minified drupal.js is 24% the size of the original. The minifier used to generate these files is UglifyJS. This is the same one jQuery uses.
http://upload.wikimedia.org/wikipedia/en/thumb/a/a1/Poster_of_Speedy_Delivery.jpg/220px-
Poster_of_Speedy_Delivery.jpg
open source web development Use a CDN
•CDN brings your content closer to the edge of the network, much faster response and download time
•Drupal Modules: •http://drupal.org/project/simplecdn •http://drupal.org/project/cdn byWim Leers, needs a cron to runa fileconveyor
•Media Mover
open source web development Serve objects from multiple domains
• Serve objects from multiple domains
• There is trade off between dns look ups and parallel downloads
• Browsers do matter (www.browserscope.com)
open source web development
Stay vigilant, check performance continuously and watch out for foreign objects
open source web development
http://www.flickr.com/photos/vincepal/
open source web developmentDon’t let your traffic get to the DB – it
wants to kill it!
Browser
•Cache
CDN
•Cached static content
Reverse Proxy
•Cached Content
Application Server
•APC•Memcache•Boost•Performance Module **
MySQL
•MySQL caching
Your Data center
open source web developmentPerformance Module Settings and
how they work
open source web developmentApache tuning for Drupal
•Extend mod_expires setting (make sure its on) in drupal .htaccess
•Compress content before sending it•Apache deflate_module•Solution nginx – gzip module
•.htaccess move to httpd.conf eliminates Apache parse and search on every load
Browser
•Cache
open source web developmentCaching – reverse proxy
• Caching - Very high performance gain• Advanced Step: Squid/Varnish (http://drupal.org/node/91813 )
• Very high performance gain• Sidesteps web servers, may be implemented on
separate servers
Reverse Proxy
•Cached Content
open source web developmentCache – Cache Router
•Uses fastpath setting, bypassing default cache use
•Enables different caching options•Faster because it by-passes database•Further configuration is necessary
Application Server
•APC•Memcache•Boost•Performance Module **
open source web development
Cache – Memcache module
• Very simple caching mechanism – uses pair values stored in memory
• Very fast
• Using memcache by-passes the database caching
• Is scalable and distrubuted
• May live on other servers
Memcache Serverer1
Bin:cache
Bin:Cache_block
Bin:Cache_filter
Bin…
Memcache Server2
Bin:cache
Bin:Cache_block
Bin:Cache_filter
Bin…
Memcache Server3
Bin:cache
Bin:Cache_block
Bin:Cache_filter
Bin…
Application Server
•APC•Memcache•Boost•Performance Module **
open source web developmentCaching using Boost
•Extension of Performance module• Instead of caching results in tables, stores them in files bypassing PHP and MySQL
•Limited to anonymous visitors – so good for slashdot but not for sites with high number of authenticated visitors
•How it works:Uses apache mod_rewrite directives in .htacess to check if GET
Logged in cookie does not existHTML file cached on fiilesystem
Application Server
•APC•Memcache•Boost•Performance Module **
open source web developmentBoost Logic
http://drupal.org/files/images/Boost.preview.png
open source web development
Back End – PHP Accelerator
• APC is the Alternative PHP Cache, which is a free, open, and robust framework for caching and optimizing PHP intermediate code.
• APC caching PHP code in a compiled state
• Needs to be looked at after installation for proper configuration, but generally a big performance boost
• Xcache and eacceletarotor are other options
Application Server
•APC•Memcache•Boost•Performance Module **
open source web developmentMySQL caching
• Enable MySQL Query Cache & give it memory• Index Slow queries that run often
• Log-slow-queries• Use explain• Index indicies used
• Some configuration considerations• InnoDB Buffer Pool ++• Key_buffer is important for temp tables• Core Search Runs Better on MyISAM (but don’t use
core search)
MySQL
•MySQL caching
open source web developmentDrupal settings for performance
improvement
• Always run cron
• Set minimum cache lifetime to 0 and increase garbage collector run frequency for busy sites
• Settings.php:
• Session.gc_maxlifetime
• Session.cache_expire
• Write watchdog entries to syslog instead of db table
open source web development
open source web development
Blog: www.linuxsysadminblog.com
Site: www.prometsource.com
Questions ?