Speed Optimization for Your Website
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
Get Extensions like the Web Developer Extension for Firefox
Get a developer browser like Firefox Developer Browser
- 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 web fonts by using only the ones needed and only fonts optimized for the web.
Use the right fonts and sets
Or, better, do away with them all together – add web safe fonts.
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:
Note: HTML minification can sometimes increase download time.
Server Side Optimization Tools
Zips web assets. More information on these techniques below.
Allows for developers to allow server to send needed resources prior to being requested.
Once you’ve done the work, monitor your progress with these tools.
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