Website Optimization Tips for Speed

Transcription

1 Website Optimization Tips for Speed Sothern California WordPress Meetup Microsoft HQ, Los Angeles - 3/20/2012 Belsien Thomas [email protected] S

2 Overview Of Website Optimization

3 Content Optimizations S A performance study conducted by Yahoo! found that 80% of the end user response time is spent on the front end downloading all components in a web page including images, CSS, JavaScript, Flash files, etc. S The good news is that Content Optimizations are easier to implement as opposed to complex server side changes.

4 Server Optimizations S These optimizations result in great performance once a page is loaded or primed. S The single most useful optimization is to implement a Content Delivery Network (CDN) S An easy to implement solution is MaxCDN. Amazon S3 or Edgecast are also good CDN s. Hosting providers can have their own integrated CDN where you won t have to maintain anything yourself.

5 Tools to Figure out your Performance S Yslow (Firefox Extension) - Easy to understand, A-F Grading S Firebug/Chrome Network Panel Full details on Network Activity

6 Useful Graphs & Statistics to See Make up of your Pages

7 Optimize Images to Reduce size S Images normally account for over 50% of HTTP Requests and without optimization can easily cause your web page to be over 1MB 2MB causing a very slow load time. S Make sure all your images are web optimized. For designers/developers look for Save for Web & Devices (in Photoshop). Good optimize quality setting is around 65-75%.

8 Get some Plugins! S WP SMUSH.IT - Automatic Image Optimization

9 W3 Total Cache Takes care of both Content & Sever Optimizations in 1 plugin! (written by former CTO of Mashable.com) JS/CSS Minification CDN Support Object & Full Page Caching Sets Expire Headers GZIP Compression

10 Real Word Use Case - My ecommerce Site

11 Optimization First Pass S Installed WP Smush.it ran the bulk Smush.it option to optimize all currently uploaded images. S Installed W3 Total Cache Plugin S Using Full Page (disk enhanced mode), PHP Object, and Database Caching S Enabled GZIP compression and Expire Header rules. S JS Minification and combination disabled due to conflicts with libraries (jquery library already minified) S Good Performance gains were seen, but images were still loading slow and choppy.

12 Going Further Theme Code S Look at your Theme code or Network Console of the Firebug/Chrome do you have requests to a file called TimThumb.php or Thumb.php? This script is normally thrown in by theme designers who don t want to go through the hassle of writing image size functions, they simply call TimThumb.php to resize all thumbnails in a theme.

13 Why is TimThumb bad for Performance? Poor for Performance because: 1. Generated images can t be cached or used with a CDN since images are passed through the php script on each request. 2. Uses up additional PHP resources and Server Side Memory for each request. 3. Worst of all, it is normally setup to load the FULL size image from the WordPress Media Library on every request, not the nearest cropped size. *Also there have been numerous security issues with TimThumb, if it is not patched to the latest version it could allow malicious users to upload content to your site without your knowledge.

14 A Better Solution S Replace it with the built in WordPress Image Functions. S WordPress automatically generates 3 sizes of images + saves the original image size. These settings are found under Settings -> Media and usually are: S Thumbnail: 150x150 S Medium: 300x300 S Large: 1024x1024 S But you can add custom sizes too

15 WordPress API - Image functions S Declare any custom image size you want by adding a few simple lines to your themes functions.php file. Tip: If you set custom sizes install the Regenerate Thumbnails plugin to go through and regenerate all uploaded thumbnails with your new sizes. It will preserve the default WordPress images as well if they did not change.

16 S Now write a simple function using the wp_get_attachment_image() function to output the desired image size. (example should be used within the Loop )

17 Before/After Metrics

18 Useful Performance Testing Resources S - Easiest to use, run from multiple locations. Comparison site rating can be a bit misleading. S - Also easy to use, shows Yslow and Google Pagespeed results from offsite. Can be run from Multiple locations as well. S - Most complete and detailed reports and rendering can be run by each browser! Shows a detailed Waterfall view as well as compares 1 st and 2 nd load times for Primed Cache.