website performance optimization andy killen · “if we can get 10% more performance, we...
TRANSCRIPT
![Page 1: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/1.jpg)
Website Performance OptimizationAndy Killen
Owner, Phat Reactionphat-reaction.com
Creator, Share and Follow pluginshare-and-follow.com
CTO, SpeckyBoy Design Magazinespeckyboy.com
[email protected] / [email protected]
http://nl.linkedin.com/in/andykillen
![Page 2: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/2.jpg)
Don't be shy!
Got a question that relates to the current slide, don't be shy to ask. Pop up your hand to let me know.
If you are feeling “hard core” offer your site for analyses at the end, if we have time
![Page 3: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/3.jpg)
Why Worry About Performance?
Google says“an extra 500ms in latency costs them 20% of their search traffic”
Amazon states“for every 100ms of latency, they lose 1% of their sales”“1 second slower is equal to 1.6billion in lost sales per year”
Forrester reports“40% of consumers will not wait more than 3-seconds for a page to load before abandoning a site”
Reddit says“If we can get 10% more performance, we immediately see 10% more traffic.”
Shopzilla found“Better performing website (speed improvements) increased revenue by 7-12%, increased page views by 25%, and reduced hardware by 50%.“
![Page 4: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/4.jpg)
Why Worry About Performance?
Performance optimized sites● Get more trust● Cost less in hardware and network● Get more revenue● Keep their customers● Get more page views● Provide a mission critical environment● Are more suited to mobile usage● Get talked about more● Since August 2011Google take it into account for
organic rankings
![Page 5: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/5.jpg)
What effects the performance of a website most (desktop clients)
When talking about mobile computing, it is more like 90% is front end based
0% 10% 20% 30% 40% 50% 60% 70% 80%
Network
Server Config
Back end
Front end
![Page 6: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/6.jpg)
The Front End is where you should focus most
![Page 7: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/7.jpg)
Before we talk about code and configurations some wise words
![Page 8: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/8.jpg)
Remember there are many types of page speed
● What a page speed monitoring service thinks● What the page speed analysis tool or search
engine thinks your page speed is● First load page speed● Second load page speed● What the user viewing the site thinks your
page speed is
THEY ARE DIFFERENT!
![Page 9: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/9.jpg)
Common reasons people give not to optimize.
The internet is so much faster today!
● Depends on where you are in the world
– Sub-Saharan Africa anyone?
● Depends on your client
– iPad is slower than a standard laptop
– smartphones tend to be slower still, and often have datarate limitations
● Depends on your network connection
– Wifi is not as fast as wired
– ADSL is not as fast as cable
– Lots of people have mobile phones only
But I have an intranet, we run at 1GB network speeds
● Un-optimized code will still take longer to render even with all the speed in the world
● Once you get over 4Mbps network speed it is more or less the same speed to load a page.
![Page 10: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/10.jpg)
What things make the biggest difference to loading times?
![Page 11: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/11.jpg)
The usual suspects
Too many connections
Too many KB's
Out of control
code
Iframes
3rd party content
![Page 12: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/12.jpg)
Understanding how a browser works
![Page 13: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/13.jpg)
Browser connections limitations
● Browsers only have to support 2 concurrent connections per DNS name. Most support 6 or more
● Every separate file request is a separate connection
● Each new DNS name requires a DNS lookup first
● Servers only allow a finite number of concurrent connections
![Page 14: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/14.jpg)
How to reduce/improve connections
● Use CSS sprites● Use more CSS to create screen layout, remove
images where possible● Use a static domain or CDN to deliver content● On mobile use Data URI images in the CSS● Combine files and compress them
![Page 15: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/15.jpg)
Some CSS Sprite Examples
Best CSS sprite maker
Project Fondu http://spritegen.website-performance.org/
Example sprite
as used to create 4 types of sprite implementation http://phat-reaction.com/specky/sprites-styles.htm
CSS sprites does not have to be icons, buttons and menus. They can also be gradients and other screen elements. http://phat-reaction.com/specky/horizontal-test.htm
![Page 16: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/16.jpg)
Reducing the overall footprintUse Adobe Fireworks for images for the web. http://phat-reaction.com/specky/my-cat-jack.htm
![Page 17: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/17.jpg)
Using the right image for the job
JPG : Photos and Gradients
GIF : IE6 only transparencies, blank images, under 256colors, good for animations
PNG8 : All images for the web under 256 colors, transparencies allowed.
PNG24 : High quality images, not a useful file size
PNG32 : High quality images with transparencies
Photoshop labels PNG32 as PNG24 + transparency.
In general, use PNG for design (try PNG8 first), JPEG for authoring.
![Page 18: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/18.jpg)
Don't forget to Crush & Compress
Image crushing can save up to 90% on image size.
There are many on-line or off line crushing tools for each file type● Online : smush.it, punypng● Offline: pngcrush, ImageOptim
Again many online/offline compression tools for javascript● Closure-compiler, YUI
Don't forget to test against all browsers
![Page 19: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/19.jpg)
Writing Better CSS
● Most sites do not have efficient CSS.
● Clean CSS will render quicker
● Less conflicting rules will load quicker
● Less descendent selectors will load quicker
● Zero usage of !important will cause the page to load quicker
● Well made CSS rarely needs hacks
● CSS under 25k in size will cache on most devices
![Page 20: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/20.jpg)
The Biggest Time Waster In CSS
Decedent Selectors Usageul#id li ul li a {/* css rules */} (super slow & wasteful)
#id ul li a {/* css rules */} (better but still wasteful)
#id ul a {/* css rules */} (better still)
.sub-menu a {/* css rules */} (even better still)
a.nav-style{/* css rules */} (best so far)
.nav-style{/* css rules */} (best, and smallest!)
There are many more things that can be done to CSS to make it faster, but today is about WordPress.
![Page 21: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/21.jpg)
A Quick code sample of bloated and non-bloated CSS
Most sites have between 10 and 25K of useless or bloated CSS
![Page 22: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/22.jpg)
Main things to consider with HTML
● iFrame cause the browser to stop loading the rest of the page until the iFrame has loaded. ● Easy fix is to “late load” the iframe via javascript● Easy way to implement in WordPress is to use my
plugin: Easy iFrame Loader
http://wordpress.org/extend/plugins/easy-iframe-loader/
● Always have height and width set in IMG so that page space can be rendered before image loads
● Try to reduce your nested elements as much as possible.
![Page 23: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/23.jpg)
So that was the basics, lets move on to the WordPress specifics.
![Page 24: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/24.jpg)
Enhancements to the wp-config.php
Reduce the number of revisions
define('WP_POST_REVISIONS', false );
define('WP_POST_REVISIONS', 6);
Changing the autosave
define('AUTOSAVE_INTERVAL', 180 );
Define singular cookie domain
define('COOKIE_DOMAIN', 'www.mysite.com');
Enable caching
define('WP_CACHE', true);
Emptying trash
define('EMPTY_TRASH_DAYS', 10 );
![Page 25: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/25.jpg)
Debug your Plugins or Theme
Debug mode in WordPress is easy to setup in wp-config.php
Or setup “always available debug” with this code
![Page 26: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/26.jpg)
Example of “always available debug”
![Page 27: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/27.jpg)
Remove what you don't use
WordPress has a great system for Themes and Plugins. However......● It's always listening for upgrades, even when
disabled● Entry point for hackers, even when disabled
Remove all Themes and Plugins you are not using. ● Maybe keep a default theme live for problem
resolution
![Page 28: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/28.jpg)
Defining a data strategy
● Work out what needs to be loaded and where
Questions to ask– Do this need to load on the homepage, blog page, 404
page, search page, post or page?– Which exact page is this script or css used?
● Use deregister script/style with conditional statements to reduce load
● Combine javascript or CSS where possible
![Page 29: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/29.jpg)
Scripts & Stylesheets in WordPress
Managing Scripts
wp_deregister_script()
wp_register_script()
wp_enqueue_script()
Managing Stylesheets
wp_deregister_style()
wp_register_style()
wp_enqueue_style()
![Page 30: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/30.jpg)
Where should register/enqueue be used?
WordPress core coders suggest either in your plugin or in the functions.php
I say use it where it gives you most benefit● Page template before get_header();● Header.php before wp_head();● Or in your plugin/functions.php
Keeping your functions.php light will improve overall performance
![Page 31: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/31.jpg)
Code Examples for Scripts and Stylesheets
![Page 32: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/32.jpg)
Setting up a CDN or Static Domain
Why use a Static Domain?● Cheap, depending on your DNS configuration free● Uses your existing server to a fuller degree
Why use a CDN?● Puts the data closer to the customer ● Reduces server loading
Both situations will reduce overall network load as cookie information will not be sent when requesting images
![Page 33: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/33.jpg)
Example of configuring WordPress for a Static Domain
![Page 34: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/34.jpg)
P3 Profiler for plugin testing
P3 Plugin Performance Profiler● http://wordpress.org/extend/plugins/p3-profiler/
Well worth installing and running to see what takes up most time. Can help you to find where problems lie.
Maybe will help you make the choice over a plugin. Keep or reject it.
![Page 35: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/35.jpg)
WordPress Transients API
The transients API allows for storage in the database of data for a period of time. It is a cache system. When the timer runs out the data is automatically deleted.
The 3 commands to learn● set_transient()● get_transient()● delete_transient()
![Page 36: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/36.jpg)
Get and Set in Tandem
![Page 37: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/37.jpg)
A Question of Data or Information?
● The idea of caching is to reduce to number of 'expensive' database requests.
● Should you save the database returned data or the HTML presented output (information)?● Most times information will be smaller to save than
the returned data● Less total server processing is needed for cached
information
![Page 38: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/38.jpg)
Code examples of data and Information and transients strategy
![Page 39: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/39.jpg)
Key Points
● Use Fireworks for creating images for the web● Static domains are cheap and easy to setup● Your CSS is bloated!● Late load iFrames● Reduce connections wherever possible● Crush and Compress to reduce footprint● Use Transients API to reduce database load
![Page 40: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/40.jpg)
Thanks for listening to this whistle stop tour of speed techniques
Of course there is much more to it than time can provide.
![Page 41: Website Performance Optimization Andy Killen · “If we can get 10% more performance, we immediately see 10% more traffic.” Shopzilla found “Better performing website (speed](https://reader034.vdocument.in/reader034/viewer/2022051812/602beffeb3acd93e417b80ca/html5/thumbnails/41.jpg)
Questions ?
Anybody feeling risky and want their site analyzed here and now?
[email protected] / [email protected]
http://nl.linkedin.com/in/andykillen
Presentation here : http://phat-reaction.com/wordcamp-nl-2012/