Need for Speed:
                Website Edition




Presented by Devin Walker
About Me - @wordimpress
    ● WordPress-focused Developer
    ● Enjoy Web Design, Blogging and Golf
v
    ● http://imdev.in
    ● http://wordimpress.com
    ● http://soundpress.com
Website Optimization - What does this mean?
How Fast is your website?
Why is Website Performance Important?
It requires 50% more concentration when
using badly performing websites
http://goo.gl/nDIQj
The Faster the Website, the Lower the
Bounce Rate and the Higher the
Conversions (more leads, sales... money)
Milliseconds are Money



● Google: 500ms slower = 20% drop in traffic

● Amazon: 100ms slower = 1% drop in sales

● Facebook: 500ms slower = 3% traffic drop



 http://www.carbon60.com/milliseconds-are-money-how-much-performance-matters-in-the-cloud/
 http://www.guypo.com/business/17-statistics-to-sell-web-performance-optimization/
Decrease costs, improve visitor satisfaction
Matt Cutts
Head of Google Web Spam
"Google is incorporating site speed as one
  of the over 200 signals that we use in
      determining search rankings"
                 - Matt Cutts

       http://www.mattcutts.com/blog/site-speed/
A faster website can improve your
      search engine visibility
How to Gauge a Website's Speed
The 3-second Rule
Google Webmaster Tools
Webpage Test - http://webpagetest.org
Webpage Test - http://webpagetest.org



 ● Detailed Speed Report

 ● Nice A-F Grading System

 ● Ability to Change Browser and
   Location of Server
Pingdom Tools - http://tools.pingdom.com/fpt/
Pingdom Tools - http://tools.pingdom.com/fpt/



 ● Detailed test history

 ● Default tests are public*

 ● Commercial company

 ● No ability to change browser and
   only 3-locations
Google Analytics - http://www.google.com/analytics/
Google Analytics - http://www.google.com/analytics/

 ● Measure across entire site

 ● Content: which pages are slowest?

 ● Traffic Sources: which campaign corresponds
   to faster page loads?

 ● Geographies: where in the world is my site
   slowest/fastest?

 ● Technology: how fast does my site load in
   different browsers?
Additional Tools


 ● Google Page Speed Tools
   https://developers.google.com/speed/pagespeed/


 ● YSlow (Yahoo)
   http://developer.yahoo.com/yslow/


 ● Which Loads Faster?
   http://whichloadsfaster.com/


 ● ShowSlow
   http://www.showslow.com/
How to Improve Website Speed
#1 Hosting Provider
Who is hosting your website and how are they hosting it?
#2 Utilize Caching
Page Cache, Database Cache, Object Cache, Browser Cache, Reverse Proxy
#3 Combine CSS and JS files
Load JS in the footer whenever possible
#4 Use a CDN
A Content Delivery Network (CDN) will 'put a rocket behind your static content'
#5 Reduce and Optimize Images
 Use CSS3 whenever and wherever possible, save images for web




http://tinypng.com
                        http://kraken.io/

                                                  http://www.smushit.com/ysmush.it/
#6 Use Compression
 Save bandwidth and speed up your website




https://developers.google.com/speed/articles/use-compression
#7 Use Sprites
One image, fewer HTTP-Requests and faster image loading
#8 Monitor Your Website
It is always good to know how well your server is performing
#9 Optimize your Database Regularly
Optimizing database tables regularly will help improve website performance
#10 Mobile and Tablet Optimization
Use CSS3 Media Queries, JS and server-side technology to speed up devices
More Ways to Make Websites Faster
Optimization is addictive; after one boost in speed, you'll want more...




   ● Redirects are expensive; reduce them

   ● Use a fast DNS web service
   ● Responsive image replacement

   ● Minimize CSS bloat
   ● Optimize server-side code and
     intensive database queries
        https://developers.google.com/speed/articles/
Optimization for WordPress
WordPress-specific tips to make your website faster




   ● Deactivate and delete unused plugins
     (and themes)
   ● Use the Latest Version of WordPress

   ● Delete post revisions (and deactivate)

   ● Delete Spam Comments
    http://yoast.com/40-wordpress-optimisation-tips/
Website Optimization is
 like Losing Weight
v
    Thank You!
                   Questions?
    This presentation is available at: http://goo.gl/4jhy0

Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation

  • 1.
    Need for Speed: Website Edition Presented by Devin Walker
  • 2.
    About Me -@wordimpress ● WordPress-focused Developer ● Enjoy Web Design, Blogging and Golf v ● http://imdev.in ● http://wordimpress.com ● http://soundpress.com
  • 3.
    Website Optimization -What does this mean?
  • 4.
    How Fast isyour website?
  • 5.
    Why is WebsitePerformance Important?
  • 6.
    It requires 50%more concentration when using badly performing websites http://goo.gl/nDIQj
  • 7.
    The Faster theWebsite, the Lower the Bounce Rate and the Higher the Conversions (more leads, sales... money)
  • 8.
    Milliseconds are Money ●Google: 500ms slower = 20% drop in traffic ● Amazon: 100ms slower = 1% drop in sales ● Facebook: 500ms slower = 3% traffic drop http://www.carbon60.com/milliseconds-are-money-how-much-performance-matters-in-the-cloud/ http://www.guypo.com/business/17-statistics-to-sell-web-performance-optimization/
  • 9.
    Decrease costs, improvevisitor satisfaction
  • 10.
    Matt Cutts Head ofGoogle Web Spam
  • 11.
    "Google is incorporatingsite speed as one of the over 200 signals that we use in determining search rankings" - Matt Cutts http://www.mattcutts.com/blog/site-speed/
  • 12.
    A faster websitecan improve your search engine visibility
  • 13.
    How to Gaugea Website's Speed
  • 14.
  • 15.
  • 16.
    Webpage Test -http://webpagetest.org
  • 17.
    Webpage Test -http://webpagetest.org ● Detailed Speed Report ● Nice A-F Grading System ● Ability to Change Browser and Location of Server
  • 18.
    Pingdom Tools -http://tools.pingdom.com/fpt/
  • 19.
    Pingdom Tools -http://tools.pingdom.com/fpt/ ● Detailed test history ● Default tests are public* ● Commercial company ● No ability to change browser and only 3-locations
  • 20.
    Google Analytics -http://www.google.com/analytics/
  • 21.
    Google Analytics -http://www.google.com/analytics/ ● Measure across entire site ● Content: which pages are slowest? ● Traffic Sources: which campaign corresponds to faster page loads? ● Geographies: where in the world is my site slowest/fastest? ● Technology: how fast does my site load in different browsers?
  • 22.
    Additional Tools ●Google Page Speed Tools https://developers.google.com/speed/pagespeed/ ● YSlow (Yahoo) http://developer.yahoo.com/yslow/ ● Which Loads Faster? http://whichloadsfaster.com/ ● ShowSlow http://www.showslow.com/
  • 23.
    How to ImproveWebsite Speed
  • 24.
    #1 Hosting Provider Whois hosting your website and how are they hosting it?
  • 25.
    #2 Utilize Caching PageCache, Database Cache, Object Cache, Browser Cache, Reverse Proxy
  • 26.
    #3 Combine CSSand JS files Load JS in the footer whenever possible
  • 27.
    #4 Use aCDN A Content Delivery Network (CDN) will 'put a rocket behind your static content'
  • 28.
    #5 Reduce andOptimize Images Use CSS3 whenever and wherever possible, save images for web http://tinypng.com http://kraken.io/ http://www.smushit.com/ysmush.it/
  • 29.
    #6 Use Compression Save bandwidth and speed up your website https://developers.google.com/speed/articles/use-compression
  • 30.
    #7 Use Sprites Oneimage, fewer HTTP-Requests and faster image loading
  • 31.
    #8 Monitor YourWebsite It is always good to know how well your server is performing
  • 32.
    #9 Optimize yourDatabase Regularly Optimizing database tables regularly will help improve website performance
  • 33.
    #10 Mobile andTablet Optimization Use CSS3 Media Queries, JS and server-side technology to speed up devices
  • 34.
    More Ways toMake Websites Faster Optimization is addictive; after one boost in speed, you'll want more... ● Redirects are expensive; reduce them ● Use a fast DNS web service ● Responsive image replacement ● Minimize CSS bloat ● Optimize server-side code and intensive database queries https://developers.google.com/speed/articles/
  • 35.
    Optimization for WordPress WordPress-specifictips to make your website faster ● Deactivate and delete unused plugins (and themes) ● Use the Latest Version of WordPress ● Delete post revisions (and deactivate) ● Delete Spam Comments http://yoast.com/40-wordpress-optimisation-tips/
  • 36.
    Website Optimization is like Losing Weight
  • 37.
    v Thank You! Questions? This presentation is available at: http://goo.gl/4jhy0