Kansas City WordCamp - Website Performance

What the hell is this?

• what is performance and who cares?• what’s dragging you down?• is WordPress slow?• what can I do on the front end?

• what are some plugins I can install that will make my life easier without having to really pay attention to you?

QUESTIONS?

Performance = Perceived Speed

V

The Two Sides of the Website Coin

back end front end(server side) (client side)

The Weight of the Front End

20%80%

WHO CARES?

The Landscape by 2015

Quadruple Traffic Globally

Devices:Desktop: 25%Laptop: 83%Smartphone: 194%EB Reader: 550%Tablet: 750%

WHAT’S DRAGGING YOU DOWN?

• network reliability• file sizes• HTTP requests• server configuration• WordPress itself

Balls, Chains, Anchors, Speed Bumps

Network Factors

• space between mobile towers

• visitor’s data plan• quality of

connection• random acts

of God• a billion

other things

File Size

HTTP Requests

Server Configuration

Balls, Chains, Anchors, Speed Bumps

• network reliability• file sizes• HTTP requests• server configuration• WordPress itself

IS WORDPRESS SLOW?

IT’S ONLY AS FAST AS YOUR THEME.

• 0 JS files(0k)

• 1 CSS files(23k)

• 2 images(53k)

• 0 iframes(0k)

80k+ download~5 requests

• 11 JS files(191k)

• 3 CSS files(43k)

• 6 images(179k)

• 2 iframes(16k)

500k+ download20+ requests

• 23 JS files(1243k)

• 6 CSS files(92k)

• 70 images(549k)

• 3 iframes(123k)

2000k+ download100+ requests

WHAT CAN I DO ON THE FRONT END?

HTML

• HTML5 is your friend• more semantic tag use, less

div soup; default WP does NOT do this

• avoid the hidden calories of iframes

• strip white space

CSS

• kill unnecessary rules• shorthand• combine• minify

JavaScript

• if you load a library, load it from Google APIs(75% less load impact)

• native JS is faster(select element by ID through jQuery = 86% slower than native)

• combine• minify• load at the bottom

Images

• CSS3 is your friend• image sprites• CRUSH THEM

How CSS is More Efficient

• Traditional:2 imagesExtra markup~ 5-6k, extra requests

div {height: 300px;width: 300px;border: 2px solid #0c9da9;box-shadow: 0 5px 10px rgba(0,0,0,.4),inset 0 0 0 2px rgba(255,255,255,.7);border-radius: 10px;background: #daf0ff;background: -moz-linear-gradient(top, #daf0ff 0%, #99cfff 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#daf0ff), color-stop(100%,#99cfff));background: -webkit-linear-gradient(top, #daf0ff 0%,#99cfff 100%);background: -o-linear-gradient(top, #daf0ff 0%,#99cfff 100%);background: -ms-linear-gradient(top, #daf0ff 0%,#99cfff 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#daf0ff', endColorstr='#99cfff',GradientType=0 );background: linear-gradient(top, #daf0ff 0%,#99cfff 100%);}

• CSS:No imagesNo extra markup740 bytes, no requests

Image Sprites

• Individually:20 images = 17k20 requests• Sprite:1 image = 4.2k1 request

Bonus Round

• content delivery network (CDN)• use your own subdomain (crap.acme.com)• gzip compression• more: HTML5 boilerplate

WHAT PLUGINS AREWORTH A SHIT?

There Are a Few

• WP Smush.it(automatic image compression)

• W3 Total Cache(complete server optimization, requires access to .htaccess)

• WP Minify(automatically minify JS and CSS)

• WP-HTML-Compression(strip white space from HTML)

• CDN Tools(helps set up a CDN i.e. Google API or MaxCDN)

HOW CAN I TEST?

GREAT QUESTION.

It’s Easy. Really.

• Plugin: Debug Queries(discover where your site is slowing down)

• Websites and Tools:– Pingdom Tools– Web Page Analyzer– Google Page Speed– Yahoo! YSlow (firefox plugin for Firebug)– Yahoo! Boomerang– Jdrop (mobile performance testing)

THANK YOU.REALLY.

@KEVINPOTTSgraphicpush.com/wp-performance