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:
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
- 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)
- 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
- Image Optimizer
- Tools if you’re adventurous
- Truly Automatic Compression Tools
- WP Smushit
- EWWW Image Optimizer
- The Best Image Compression Option
- Manual compression in Photoshop, Illustrator, or GIMP
- Eliminate uneccessary plugins
- If ecommerce or large site, consider a separate database server
- Remove unused files, pages, drafts, etc
- Use light themes
Combine and Minify all the code
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 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
- 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.