website performance optimization andy killen · “if we can get 10% more performance, we...
TRANSCRIPT
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
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
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%.“
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
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
The Front End is where you should focus most
Before we talk about code and configurations some wise words
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!
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.
What things make the biggest difference to loading times?
The usual suspects
Too many connections
Too many KB's
Out of control
code
Iframes
3rd party content
Understanding how a browser works
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
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
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
Reducing the overall footprintUse Adobe Fireworks for images for the web. http://phat-reaction.com/specky/my-cat-jack.htm
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.
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
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
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.
A Quick code sample of bloated and non-bloated CSS
Most sites have between 10 and 25K of useless or bloated CSS
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.
So that was the basics, lets move on to the WordPress specifics.
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 );
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
Example of “always available debug”
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
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
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()
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
Code Examples for Scripts and Stylesheets
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
Example of configuring WordPress for a Static Domain
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.
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()
Get and Set in Tandem
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
Code examples of data and Information and transients strategy
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
Thanks for listening to this whistle stop tour of speed techniques
Of course there is much more to it than time can provide.
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/