Life in the Fast Lane

Speed, Usability &Search Engine Optimization

Dana DiTomasoCEO, Kick Point

@danaditomasokickpoint.ca

We’re All Impatient Jerks

Visitors want your site to load in 2 seconds or less

Every extra second of load time causes 20% of your visitors to jump ship

Did We Forget?

Everything Old Is New Again

=

Don’t Be This Guy

Best. Website. Ever.

http://www.dolekemp96.org/main.htm

Dole/Kemp vs Basic WordPress

dolekemp96.org/main.htm142 lines of code

18 requests422ms load time85.6 kB page size

DNS – 151 msConnect – 159 ms

Wait – 11 msReceive – 13 ms

wp-themes.com487 lines of code

6 requests1.25s load time

125.7 kB page size

DNS – 169 msConnect – 282 ms

Wait – 276 msReceive – 112 ms

That’s Nice.

http://tools.pingdom.com/fpt

How Does This Affect Search Traffic?

Google has a “time budget” for how long they’re willing to spend on your site – don’t blow it.

Actually a Good Thing

What to Consider

Start Testing

• https://developers.google.com/speed/pagespeed/insights• http://tools.pingdom.com/fpt/• http://www.webpagetest.org/• http://gtmetrix.com/ (is particularly harsh)

Clean Up Your Database

• BACKUP FIRST• In phpMyAdmin:

Do You Really Need That Plugin?

• Delete any plugins you’re not using• Dump anything that isn’t updated regularly• Avoid plugins that create queries on the fly

when a flat file would do

Use Browser Caching

• Set an expiry date in your HTTP headers for static resources

• For example:Expires: Thu, 07 Nov 2022 23:00:00 GMT

• More:https://developers.google.com/speed/docs/best-practices/caching#LeverageBrowserCaching

Minimize HTTP Requests

• If you’re not using a plugin on a specific page type, see if you can avoid loading it

• Do you really need social icons everywhere?• Move JS to server-side PHP if possible

Optimize Your Images

• Don’t upload an image larger than what’s required

• Use the right file format for the job– PNGs are awesome– GIFs are for tiny images or animation– JPGs are for photographs

• Use an image compressor– WP Smush.it plugin

Compress/Combine JS + CSS

Use Sprites

• Every time an image request is made, a kitten cries

• http://spriteme.org/

Install W3 Total Cache

http://wordpress.org/extend/plugins/w3-total-cache/

Really excellent step-by-step guide here:http://gtmetrix.com/wordpress-optimization-guide.html

Does All That Really Help?

Back To The Future

=

Responsive?

display: none?It’s still loading!

Change, Don’t Hide

• Think mobile first• Progressively enhance

with JS• Read this book!

http://www.abookapart.com/products/mobile-first

Keep Paying Attention

• http://kickpoint.ca/site-performance-dashboard-for-google-analytics/

Questions? Aspirin?

You made it!

Here is a cute animal who cares about speed.

Thank you for listening.