Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation
-
Upload
devin-walker -
Category
Technology
-
view
860 -
download
1
description
Transcript of Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation
![Page 1: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/1.jpg)
Need for Speed: Website Edition
Presented by Devin Walker
![Page 2: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/2.jpg)
v
About Me - @wordimpress
● WordPress-focused Developer
● Enjoy Web Design, Blogging and Golf
● http://imdev.in
● http://wordimpress.com
● http://soundpress.com
![Page 3: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/3.jpg)
Website Optimization - What does this mean?
![Page 4: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/4.jpg)
How Fast is your website?
![Page 5: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/5.jpg)
Why is Website Performance Important?
![Page 6: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/6.jpg)
It requires 50% more concentration when using badly performing websites http://goo.gl/nDIQj
![Page 7: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/7.jpg)
The Faster the Website, the Lower the Bounce Rate and the Higher the Conversions (more leads, sales... money)
![Page 8: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/8.jpg)
Milliseconds are Money
● Google: 500ms slower = 20% drop in traffic
● Amazon: 100ms slower = 1% drop in sales
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/
● Facebook: 500ms slower = 3% traffic drop
![Page 9: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/9.jpg)
Decrease costs, improve visitor satisfaction
![Page 10: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/10.jpg)
Matt Cutts Head of Google Web Spam
![Page 11: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/11.jpg)
"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/
![Page 12: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/12.jpg)
A faster website can improve your search engine visibility
![Page 13: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/13.jpg)
How to Gauge a Website's Speed
![Page 14: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/14.jpg)
The 3-second Rule
![Page 15: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/15.jpg)
Google Webmaster Tools
![Page 17: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/17.jpg)
Webpage Test - http://webpagetest.org
● Detailed Speed Report
● Nice A-F Grading System
● Ability to Change Browser and Location of Server
![Page 19: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/19.jpg)
● Detailed test history
Pingdom Tools - http://tools.pingdom.com/fpt/
● Default tests are public*
● Commercial company
● No ability to change browser and only 3-locations
![Page 21: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/21.jpg)
● Content: which pages are slowest?
● Traffic Sources: which campaign corresponds to faster page loads?
● Geographies: where in the world is my site slowest/fastest?
Google Analytics - http://www.google.com/analytics/
● Technology: how fast does my site load in different browsers?
● Measure across entire site
![Page 22: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/22.jpg)
● YSlow (Yahoo)http://developer.yahoo.com/yslow/
● Which Loads Faster?http://whichloadsfaster.com/
● ShowSlow http://www.showslow.com/
Additional Tools
● Google Page Speed Toolshttps://developers.google.com/speed/pagespeed/
![Page 23: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/23.jpg)
How to Improve Website Speed
![Page 24: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/24.jpg)
#1 Hosting ProviderWho is hosting your website and how are they hosting it?
![Page 25: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/25.jpg)
#2 Utilize CachingPage Cache, Database Cache, Object Cache, Browser Cache, Reverse Proxy
![Page 26: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/26.jpg)
#3 Combine CSS and JS filesLoad JS in the footer whenever possible
![Page 27: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/27.jpg)
#4 Use a CDNA Content Delivery Network (CDN) will 'put a rocket behind your static content'
![Page 28: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/28.jpg)
#5 Reduce and Optimize ImagesUse CSS3 whenever and wherever possible, save images for web
http://tinypng.com
http://www.smushit.com/ysmush.it/
http://kraken.io/
![Page 29: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/29.jpg)
#6 Use CompressionSave bandwidth and speed up your website
https://developers.google.com/speed/articles/use-compression
![Page 30: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/30.jpg)
#7 Use SpritesOne image, fewer HTTP-Requests and faster image loading
![Page 31: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/31.jpg)
#8 Monitor Your WebsiteIt is always good to know how well your server is performing
![Page 32: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/32.jpg)
#9 Optimize your Database RegularlyOptimizing database tables regularly will help improve website performance
![Page 33: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/33.jpg)
#10 Mobile and Tablet OptimizationUse CSS3 Media Queries, JS and server-side technology to speed up devices
![Page 34: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/34.jpg)
More Ways to Make Websites FasterOptimization is addictive; after one boost in speed, you'll want more...
● Redirects are expensive; reduce them
● Minimize CSS bloat
● Optimize server-side code and intensive database querieshttps://developers.google.com/speed/articles/
● Responsive image replacement
● Use a fast DNS web service
![Page 35: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/35.jpg)
Optimization for WordPressWordPress-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/
![Page 36: Need for Speed: Website Edition – Website Optimization Tools and Techniques Presentation](https://reader033.fdocuments.in/reader033/viewer/2022060107/554bc390b4c9053a298b539d/html5/thumbnails/36.jpg)
Website Optimization is like Losing Weight