• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
 

Front end performance optimization

on

  • 520 views

80% of the time it takes for a web page to load is on the client side. ...

80% of the time it takes for a web page to load is on the client side.
Using all the tips in this presentation should cut 25% to 50% off the load time of optimized page requests.
Drupal (6 or 7) can be used to, fairly easily, implement a whole bunch of these “front-end performance” upgrades, and knock a ton of errors off of the Yahoo! and Google speed-checker tools validation checklists. Get firebug first.

Statistics

Views

Total Views
520
Views on SlideShare
470
Embed Views
50

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 50

http://steve.tchorzewski.info 50

Accessibility

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

    Front end performance optimization Front end performance optimization Presentation Transcript

    • Front-end Performance OptimizationUsing DrupalFixing all validation errors reported by the Yslow & Page Speed tools.
    • Introduction The performance-enhancing concepts that guidethis presentation I first found outlined in thesetwo books: High Performance Websiteshttp://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309 Even Faster Websiteshttp://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ It’s best to use both the Google and Yahoo! Page Speed ValidationTools -And try to comply with all of the suggestions they give: Google’s Resource on the subject:http://code.google.com/speed/page-speed/docs/rules_intro.html Yahoo’s! Resource on the subject:http://developer.yahoo.com/performance/rules.html Has anyone done any of this “Page Speed” stuff before? With
    • Overview Make Fewer HTTP Requests Combine CSS & JS into as few files as possible. Enable Drupal options from performance page. Create sprite images for layout elements and implement using CSS. Enable Progressive Page Load and Remove Unused Markup Put the $scripts at the bottom of the template, right above $closure. Remove unused CSS and JavaScript being added by core modules. Externalize, Minify, and What to Avoid Make JavaScript and CSS External. Minify JavaScript & CSS. Avoid CSS Expressions. Avoid bad requests or redirects. Use a Content Delivery Network Fake CDN using CDN module. Setting up Cookie Domain Defined in: sites/default/settings.php Needs to be different from the sub-domains being used to serve static files through the CDN module. Configure Headers and Compression Add an Expires Header. Gzip Components. Configure ETags.
    • Overview 80% of the time it takes for aweb page to load is on theclient side. Using all the tips in thispresentation should cut 25%to 50% off the load time ofoptimized page requests. Drupal (6 or 7) can be usedto, fairly easily, implement awhole bunch of these “front-end performance” upgrades,and knock a ton of errors offof the Yahoo! and Googlespeed-checker toolsvalidation checklists.Get firebug first.
    • Make Fewer HTTP Requests Combine CSS & JS into as few files as possible.Enable Drupal options “Optimize CSS files” and “Optimize JS files” from performance page:/admin/settings/performance – Then clear cache and check front end to check there are no errorsand/or all files have been combined. If you added external css/js calls to your template, move theminto your-theme.info so they will be aggregated with the rest of the internal resources. Create sprite images for layout elements andimplement using CSS.This means you will try to combine all your “layout images” into one file and modify the CSS to onlydisplay the correct piece of the sprite in each element.You should also make sure that from your CSS the sprite is only called one time, as a backgroundimage, in a catch-all rule for all the elements that use it.Use this module to cheat (pass the validation checks in the tools without doing much work):http://drupal.org/project/css_emimage
    • Remove extra CSS & put JS at the bottom Remove Unused CSS Lots of CSS is added by core modules, you can strip it out by finding/adding this function in your themes template.php file: phptemplate_preprocess_page The needed code: http://drupalbin.com/19830 Test to make sure each file excluded is not one needed for some layout element or whatever to display. Disable “Optimize CSS files” option on the performance page and run the Google tool. Look at the very bottom, it will show you “unusedCSS” and point you to each file. This allows cherry picking the required CSS over into a “theme style sheet”, so the original file can beexcluded from template.php, and our page will still be just as pretty as ever:) CSS at the Top and JS at the Bottom - Progressive Page Loading In most themes this means moving: <?php print $scripts; ?> to the bottom, of the template file. right above: <?php print $closure; ?>. If a module is printing its own JS in the head: find “drupal_add_js” in that module directory and change it’s scope to “footer”: drupal_add_js($data = NULL, $type = module, $scope = ‘footer, $defer = FALSE, $cache = TRUE, $preprocess = TRUE); This breaks some JavaScripts! For an idea of how to re-make document-write’s (so they work when loading last) take a look at the “DOM element replace” post-doc write scripts - at the bottom of this document. Move it to the bottom, save, clear your cache, then make sure that all your JavaScript is still working correctly and no errors are beingproduced. If nothing breaks, you have enabled progressive page loading! As soon as an element is read by the browser: it is rendered, styled, to the user, element by element, down the page. If JavaScript is left at the top nothing can download or render on the page until all of the JS in the head is finished being processed, lame.
    • More CSS & JS Cleanup Avoid CSS ExpressionsYahoo! Says it best: CSS expressions are a powerful (and dangerous) way to set CSS propertiesdynamically. They were supported in Internet Explorer starting with version 5, but were deprecatedstarting with IE8. As an example, the background color could be set to alternate every hour usingCSS expressions:background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); Make JavaScript and CSS ExternalThis way they don’t need to be loaded with the HTML on every page. Once the document iscached on the client side it will not need to reload and won’t be getting sent out with every requestlike it would if it were embedded. Minify JavaScript.This module can be used in D6 to minify JavaScript using JSMin:http://drupal.org/project/javascript_aggregator I cannot find a working D7 solution, and it’s not in core.There is something similar for CSS Gzip:http://drupal.org/project/css_gzip D7 has this in core.If your using private downloads:Gzipping of js & css can be achieved with the Boost module. Fix bad Requests and/or RedirectsMake sure external resources being used on the page (js, css, images, flash, ect.) are notmissing and are not being redirected to other resources to load. So, you don’t want yourimage: www.mysite.com/image.jpg redirecting to static.mysite.com/image.jpg before loading, youwant to just link the img src to: static.mysite.com/image.jpg in the first place.
    • Use a Content Delivery Network If your site is not big enough to require an actual content delivery network:This is how to set up a fake one to allow resources to download in parallel off of sub-domains. Most browsers, by default, only download two resources from one domain at a time(only one at a time for JS). Spreading static resources (like images, CSS, and JS)across couple of sub-domains will allow browsers to download things, 2 at a time, fromeach domain simultaneously. I recommend starting by adding only one sub-domain for this (most sites do notrequire separate ones for css, js, and images) I used this one on my site:http://static.plattdaddy.com Create the sub-domain pointing to the root of your existing website.Once this is finished you should be able to access your exact site through either domain: static. = www.As long as there’s nothing in .htaccess trying to redirect you back to www or something. Install the CDN Module: http://drupal.org/project/cdnIn D6 you’ll have to patch core (possibly twice) just like it says in the readme.txt. Configure the “Fake CDN”: /admin/settings/cdn/detailsAdd rule: http://static.yourwebsite.com|.jpg .jpeg .gif .png .ico .png .js .css Enable the “Fake CDN”: /admin/settings/cdnLeave the default “mode” selected: Origin Pull. Make sure to add some redirect rules like this to your .htaccess file so you don’t create aton of nasty duplicate content and canonical domain confusion issues in the searchengines.
    • Setting up cookie domain A domain that sets a cookie is considered a “cookie enabled domain” by whatever requests it. Thegoal here is to separate static resources onto a domain that dose not set any cookies first we’llneed to set which domain we want Drupal to use for setting cookies, usually this will be www.If you must have your cookie domain set to the root of your site, like this: http://plattdaddy.com,then you should serve static resources from a separate domain, like yimg.com for Yahoo andytimg.com for Youtube. You’ll need something like this cookie viewer add-on for FireFox (right click any page, click “moreinfo” then click the cookies tab), so you can see, really clearly, what cookies have been loaded, andfrom what domain. I also recommend using the clear cache button add-on while testing your cookiedomain setup. In settings.php uncomment this line and put your domain in like this:$cookie_domain = www.yourwebsite.com; If you use Google AnalyticsThe cookies that provides is via *.example.com – so, as per their tutorial page, you’ll *have to* use a separatedomain name for static files if you want to keep it cookie-free (at least pre-asynchronous tracking anyway).The way, I found, around this one is to add this to the analytics code:_gaq.push(["_setDomainName", "www.plattdaddy.com"]);If your using the GA module:Go to: admin/settings/googleanalytics and just add the above snippet to the “Custom JavaScript code” area on theadmin page. If you have enabled the CDNThe static resources will already be getting served off one or more custom sub-domains.So, now, your site should pass either tools validation tests for serving static content off of cookie-less domains and parallelizing downloads across hostnames.
    • Configure Headers and Compression Expires HeaderMake sure the expires apache module us loaded. If not, uncomment this in httpd.conf (then restartapache):LoadModule expires_module modules/mod_expires.so Gzip ComponentsMake sure the deflate apache module us loaded. If not, uncomment this in httpd.conf (then restartapache):LoadModule deflate_module modules/mod_deflate.so Configure E-tagsIf mod_expires is on: add FileETag MTime Size inside of:<IfModule mod_expires.c> Copy all of the needed customizations from this example: http://drupalbin.com/19839 You’ll need to transfer to your sites .htaccess file: The second and third: <FilesMatch></FilesMatch>’sPlace these directly below the default one, like I have it in the example. The entire: <IfModule mod_expires.c></IfModule>