site speed 101: how to get your site to load in 1 second or less


Site Speed 101:How to Get Your Site to Load in 1 Second or Less


Average Site Speed

6.7 seconds on desktop10.2 seconds on mobile

* source

http://analytics.blogspot.com/2012/04/global-site-speed-overview-how-fast-are.html


Google Recommends:

1 second on all devices….


While [Google] noted at the time that...a small percentage of sites would see a significant change in ranking or traffic due to page speed factors, I find it likely that the emphasis will increase over time…. ...Having given webmasters fair notice...it’s reasonable to expect them to phase in greater emphasis until they feel that most of their top results deliver a high level of performance.

- Roger Dooley ….

“

http://www.forbes.com/sites/rogerdooley/2012/12/04/fast-sites/

http://www.forbes.com/sites/rogerdooley/2012/12/04/fast-sites/


Site Speed Boosts Conversion• Amazon saw 1% drop for every

100 ms increase in load time

• For Walmart, conversions doubled from 3 second load time to 1 second

• Google saw 20% decrease in search traffic with ½ second increase in load time

• Shopzilla saw 12% increase in conversions between faster and slower pages

• Mozilla saw 15.4% increase in Firefox downloads in an A/B test with speed as the only variant

• Microsoft saw .7% increase in traffic after enabling progressive rendering on Bing search pages


In Summary:• Site speed is crucial to• Search rankings• User experience (branding)• Conversion

All of these reasons mean money. Convinced?


Let’s get started


1. Take your web hosting seriously• Avoid shared hosting• Nginx outperforms Apache• Hosts running newer versions of PHP are faster (5.6!)• Use a dedicated host for your CMS• Most dedicated hosts have built-in redundancies for traffic spikes,

CDN and caching• VPS• Use a CDN


I JUST CANNAE DO IT!I DINNAE HAVE THE POWER!


• Your configuration depends on your CMS and requirements• Consult a qualified system administrator

• Consider Nginx• Use PHP-FPM (and FastCGI if using Apache)•Make sure you have server caching setup•Many WordPress caching plugins can actually slow down

your site• Enable gzip compression (talk to your web host)

2. Optimize your server


3. Image Compression• Proper file type

• Minimize use of .gif

• Use “Save for Web” in Photoshop, Illustrator, or the “Save for Web” extension for GIMP

• Other tools can help improve image compression


Some Automatic Compression Tools• TinyPng• Compressnow• Compressor.io• JPEG-Optimizer• Image Optimizer


If you’re adventurous…• jpegtran• gifsicle• optipng• pngquant• webp


Truly Automatic Compression Tools• WP Smushit

• EWWW Image Optimizer

• Kraken.io


The Best Image Compression Option:

• Manual compression in Photoshop, Illustrator, or GIMP


What’s the difference?• 15-30% average file size savings with automated tools

• Usually 50-80% savings with manual tools

• That could mean SECONDS off your load time


3.1 MB


182 KB


Results?• Original load time was 10-17 seconds on average

• After optimizations, 600 milliseconds on average


4. Optimize WordPress• Eliminate unnecessary plugins• If ecommerce or a large site generally, consider a separate

database, or a database server• Optimize your database• Remove unused files, pages, drafts, etc.• Use light themes and/or separate mobile theme• Understand what your JavaScript is doing


How well optimized is LingsCars.com?


5. Combine AND Minify all the code

• Javascript• CSS• HTML


6. Remove query strings from *static* resources


7. Cache & CDN• Server cache• Object cache• Memcache

• Leverage user’s browser cache

I DO NOT SUPPOSE YOU COULD SPEED THINGS UP?!



8. Minimize slow or heavy scripts & plugins• Avoid Flash and Silverlight at all costs

• Minimize reliance on Javascript

I THOUGHT YOU SAID THIS SHIP WAS FAST?!


9. Minimize use of external content• Embedded external content• Videos• Social feeds• Ads

• Google Fonts (not all created equal)• Install fonts locally if possible

• NEVER use image files loading from another site (hotlinking), and block others from doing the same from your site

Don’t turn your site visitors into this guy



10. Optimize how the page renders (DOM)• CSS in the header

• Javascript in the footer

• If your site has a lot of images, use Lazy Load (JS)

• Make sure Javascript loads asynchronously


Questions?


Feel Free to Ask Questions Later TooSlides: dnay.co/DeckDMC15

Tons of Resources: dnay.co/DMC15

[email protected]

@dustinnay

http://dnay.co/DeckDMC15

http://dnay.co/DMC15

mailto:[email protected]

https://twitter.com/dustinnay

site speed 101: how to get your site to load in 1 second or less

Software