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

Dustin Nay from Eighty and Eight was the final speaker in the Big Leap room breakout session.  He quickly warned us that he is an enormous fan of memes and that his slidedeck would be littered with them...little did we know.
According to a
post on the Google Analytics blog
, the average site speed globally is 6.2 seconds on Desktop and 10.2 seconds on Mobile.  In the same blog post Google Recommends that your site load in 1 second on all devices.  Dustin outline three reasons that site speed is crucial for:

1. Conversion

Dustin showed us several examples of how site speed boosts conversion.  Among the notable examples, Amazon saw a 1% drop in conversion for every 100ms in website load time and conversions on Walmart.com doubled when they increased the site speed from 3 seconds to 1 second.

2. User Experience

3. Search Rankings

Site speed has also become a noticeable conversation in recent years as the industry discusses its impact as a ranking factor within Google’s ranking algorithm.  Google has stated that its emphasis will likely increase over time as the top results deliver a higher level of performance for Google’s users.
All of these reasons mean money.
Dustin then outlined several ways for beginners and advanced users alike to make sure their websites are achieving optimal load times.

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 as they typically have redundancies built-in for traffic spike, etc
• VPS
• USe a CDN (Content Delivery Network)

Optimize Your Server

• Setup server caching
• Be aware that many Wordpress caching plugins can actually slow down your site
• Enable gzip compression (talk to your webhost)

 Image Compression

• Use proper file types as it relates to your CMS
• Minimize use of .gif
• Use “Save for Web” in Photoshop and Illustrator to reduce images size
• Automatic Compression tools for beginners
  • TinyPng
  • Compressnow
  • Comperssion.io
  • JPEG-Optimizer
  • Image Optimizer
• Tools 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

Why is image compression so important?   Automated tools can save you 15-30% in file size.  Manual tools can usually save you 50-80% which can translate into SECONDS off your website load time.

Optimize WordPress

• Eliminate uneccessary plugins
• If ecommerce or large site, consider a separate database server
• Remove unused files, pages, drafts, etc
• Use light themes
• Understand what your Javascript is doing

Combine and Minify all the code

• Javascript
• CSS
• HTML

Remove query strings from static resources

• This means resources with a “?” in the URL

Cache and CDN

• Server Cache
• Leverage user’s browser cache

Minimize slow or heavy scripts & plugins

• Avoid Flash and Silverlight at all costs
• Minimize reliance on Javascript

Minimize use of external content

• Examples: Videos, Social Feeds, and Ads
• Install fonts locally if possible
• Never use image files that load from another site (hotlinking) and block others from doing the same from your site.

Optimize how a page renders.  Things to look at include:

• CSS in the header
• Javascript in the footer
• Loading Javascript asynchronously
• If the site has a lot of images, use Lazy Load (JS)

Here is a link to
Dustin’s slide deck
if you desire to see the full layout of memes that he used or reference other resources that he talked about.