Front End page speed performance improvements for Drupal
Upcoming SlideShare
Loading in...5
×
 

Front End page speed performance improvements for Drupal

on

  • 1,155 views

If you are a developer or business manager with responsibilities over your website, then check out this deck.. What will you learn? The webinar, created by our Founder and CEO, Andy Kucharski, is a ...

If you are a developer or business manager with responsibilities over your website, then check out this deck.. What will you learn? The webinar, created by our Founder and CEO, Andy Kucharski, is a highly accessible, information-rich review on the ways Drupal site performance can be radically improved. Some of the main topics we will cover include: What is slow site.

Statistics

Views

Total Views
1,155
Views on SlideShare
1,154
Embed Views
1

Actions

Likes
1
Downloads
3
Comments
0

1 Embed 1

http://www.docshut.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Add in 2 photos.look up cms
  • <a href="http://www.flickr.com/photos/joconnell/" rel="cc:attributionURL">http://www.flickr.com/photos/joconnell/</a> / <a href="http://creativecommons.org/licenses/by-sa/2.0/" rel="license">CC BY-SA 2.0</a>
  • http://www.flickr.com/people/13809318@N00
  • http://tag1consulting.com/files/PageLoad.pdfOne pages on which there will always be a lot of objects, you can sometimes see a performance gain by serving the content from multiple domains. (For example, server1.sample.com, server2.sample.com, server3.sample.com, even if all are served from the same physical server with the same IP address). Web browsers limit the number of active connections allowed from a single domain, thus by serving content from multiple domains you can cause web browsers to download more objects on a given page at the same time. Note that on the first visit to your page, the client web browser has to do a DNS lookup for each domain that you use, so serving objects from too many domains can actually cause a slowdown. It is generally recommended to use anywhere from two to four domains, depending on how many objects you are serving per page. (Tag1 Consulting)
  • http://www.flickr.com/photos/vincepal/
  • http://drupal.org/node/545908#rules
  • http://www.electrictoolbox.com/apc-php-cache-information/

Front End page speed performance improvements for Drupal Front End page speed performance improvements for Drupal Presentation Transcript

  • open source web development open source web development Page Speed andy@promethost.com 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 development Awards 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, speaking sessions and attending
  • open source web development Our SolutionsPromet 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
  • What is page speed? And what isopen source web development 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 page speed?•Time = Money…Why care about performance?•Speed = Money…•Slower Page load = Less MoneyGoogle 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. “
  • open source web development HTML DELAY EXPERIMENT GOAL Determine impact of server delays METHODOLOGY  Delay before sending HTML page  Different experiments with different delays  Small % of traffic  Monitor negative impact
  • 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 development Waterfall 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 development Waterfall diagrams • Back End • Front End • Render Start • Render complete
  • open source web development Front End vs. Back EndFront End vs. Back Endhttp://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
  • open source web development Tools• 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://www.flickr.com/photos/bik • http://httpd.apache.org/docs/2.0/programs/ab.html e/• Devel • http://drupal.org/project/devel
  • open source web development Firebug
  • open source web development Yslow•Steve Souders, while hewas Chief Performance atYahoo! Created YSLOWand best practices•Firefox firebug plug in•Grades your site based onyahoo best practices•Scores – higher is better
  • open source web development Page SpeedSteve Souders at Google Google Recommendations based on Google best practices
  • open source web developmentPage Speed
  • Web Page Testopen source web development (www.webpagetest.org)
  • Web Page Testopen source web development (www.webpagetest.org)
  • open source web development Apache 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 development Devel
  • open source web development http://www.flickr.com/people/13809318@N
  • The Basics – for designers themers open source web development 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
  • Key Improvements to make Drupalopen source web development “run fast”• Low hanging fruit – Turn on performance improvements in Drupal
  • open source web development What about views?• Views Cache and Views Content Cache (Alpha)
  • open source web development What about views?• Views Cache and Views Content Cache (Alpha)
  • 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 by Wim Leers, needs a cron to run a 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)
  • Stay vigilant, check performance continuouslyopen source web development and watch out for foreign objects
  • open source web development http://www.flickr.com/photos/vincepal/
  • Don’t let your traffic get to the DB – itopen source web development wants to kill it! Your Data center Browser CDN Reverse Proxy Application MySQL Server •Cache •Cached •Cached •APC •MySQL static Content •Memcache caching content •Boost •Performance Module **
  • Performance Module Settings andopen source web development how they work
  • open source web development Apache tuning for Drupal Browser •Cache•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
  • open source web development Caching – reverse proxy Reverse Proxy •Cached Content• 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
  • open source web development Cache – Cache Router Application Server •APC •Memcache •Boost •Performance Module **•Uses fastpath setting, bypassing default cache use•Enables different caching options•Faster because it by-passes database•Further configuration is necessary
  • open source web development Application Server •APCCache – Memcache module •Memcache •Boost •Performance 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 serversMemcache Serverer1 Memcache Server2 Memcache Server3 Bin:cache Bin:cache Bin:cache Bin:Cache_block Bin:Cache_block Bin:Cache_block Bin:Cache_filter Bin:Cache_filter Bin:Cache_filter Bin… Bin… Bin…
  • open source web development CachingApplication Boost using Server •APC •Memcache •Boost •Performance Module **• 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 exist HTML file cached on fiilesystem
  • open source web development Boost Logic http://drupal.org/files/images/Boost.preview.png
  • open source web development Application ServerBack End – PHP Accelerator •APC •Memcache •Boost •Performance Module ** • 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
  • open source web development MySQL caching MySQL •MySQL 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)
  • Drupal settings for performanceopen source web development 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 Questions ? open source web development ANDY@PROMETSOURCE.COMBlog: www.linuxsysadminblog.comSite: www.prometsource.com