Tactics to optimize your site’s speed

No one likes a slow website, but that might not be enough to spend the time and money to optimize your website. There are three main reasons to justify the work entailed with optimizing your website.

Speed Optimization for Your Website

Why Optimize

No one likes a slow website, but that might not be enough to spend the time and money to optimize your website. There are three main reasons to justify the work entailed with optimizing your website.

The first: folks are impatient, and that equates to bouncing and a loss of conversion.

Amazon sees a 1% crease in revenue for every 100ms increase in load time

Another reason: increasing a site’s performance lowers the cost to host the site. The smaller and more efficient the website is the easier it is to serve.

Netflix saw a 43% decrease in their bandwidth bill after turning on GZip

For more statistics like these see: https://wpostats.com/

The third reason to optimize the network speed of your site is the cost to your audience. If you’ have an unlimited internet access plan, this might not occur to you, but many people in your audience may not. How much your site costs to download? Find out here: https://whatdoesmysitecost.com

What can you do?

Create a data budget

One tactic people use is to create a data budget. For example, you might set the parameter that the entire site can’t be more than 1MB. Where can we save?

Analyze current state of optimization

Google Speed Insights: https://developers.google.com/speed/pagespeed/insights/

Google has some great information on web optimization. Take the Google course: https://support.google.com/webmasters/answer/6001102?hl=en&utm_source=wmx&utm_campaign=links

Utilize tools in the browser

https://developers.google.com/web/tools/chrome-devtools/

Get Extensions like the Web Developer Extension for Firefox

https://chrispederick.com/work/web-developer/

Get a developer browser like Firefox Developer Browser

https://www.mozilla.org/en-US/firefox/58.0a2/whatsnew/#devtools

Optimize Images

In Photoshop

  • Reduce size
  • Reduce quality
  • Use the correct format

Try an image optimization service

Be sure to set the src attribute

If you have an empty src attribute in your image tag, e.g. <img src=””>, the browser looks for the file the code is on in the directory it’s in. It serves the page again.

Optimize Typography

Optimize web fonts by using only the ones needed and only fonts optimized for the web.

Use the right fonts and sets

https://fonts.google.com/

Or, better, do away with them all together – add web safe fonts.

https://www.cssfontstack.com/

Optimize CSS

One HTTP Request – No inline styles.

One caveat – make your above-the-fold content available earlier

Consider splitting your CSS into two parts: a short inline part that styles above-the-fold elements, and an external part that can be deferred.

Check it with this online tool:

https://varvy.com/tools/css-delivery/

Minify JavaScript and CSS

https://htmlcompressor.com/compressor/

Note: HTML minification can sometimes increase download time.

Server Side Optimization Tools

GZIP

Zips web assets. More information on these techniques below.

HTTP/2 PUSH

Allows for developers to allow server to send needed resources prior to being requested.

More information:

Caching

Monitor Progress

Once you’ve done the work, monitor your progress with these tools.

Tracking

Two options for monitoring site speed over time:

This can be a start for you to increase sales, reduce infrastructure overhead, and reduce the cost for your visitors, all leading to a better user experience.

For Further Reading

 

Leave a Reply

Your email address will not be published. Required fields are marked *