Post on 20-Aug-2015
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.