Website speed is an important factor to overall website success. A slow website will have a higher bounce rate and will not rank as high on Google. Here are the top 5 website speed optimization tips we came up with here at Host Little.
Something important to remember, is that if your hosting is not fast to start with – or if you are sharing resources with many websites – your website performance will suffer.
#5 — Eliminate render-blocking JavaScript and CSS in above-the-fold content
Before the browser can render a page it has to build the DOM tree by parsing the HTML markup. During this process, whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. In the case of an external script the parser is also forced to wait for the resource to download, which may incur one or more network roundtrips and delay the time to first render of the page.
You should avoid and minimize the use of blocking JavaScript, especially external scripts that must be fetched before they can be executed. Scripts that are necessary to render page content can be inline to avoid extra network requests, however the inline content needs to be small and must execute quickly to deliver good performance. Scripts that are not critical to initial render should be made asynchronous or deferred until after the first render.
Quick Fix — By default JavaScript blocks DOM construction and thus delays the time to first render. To prevent JavaScript from blocking the parser we recommend using the HTML async
attribute on external scripts. For example:
<script async src="my.js">
See Parser Blocking vs. Asynchronous JavaScript to learn more about asynchronous scripts. Note that asynchronous scripts are not guaranteed to execute in specified order and should not use document.write
. Scripts that depend on execution order or need to access or modify the DOM or CSSOM of the page may need to be rewritten to account for these constraints.
#4 — Optimize Images
Images often account for most of the downloaded bytes on a page. As a result, optimizing images can often yield some of the largest byte savings and performance improvements: the fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render content on the screen.
Finding the optimal format and optimization strategy for your image assets requires careful analysis across many dimensions: type of data being encoded, image format capabilities, quality settings, resolution, and more. In addition, you need to consider whether some images are best served in a vector format, if the desired effects can be achieved via CSS, and how to deliver appropriately scaled assets for each type of device.
Quick Fix — For your convenience, you can download the optimized images directly from PageSpeed Insights.
#3 — Enable Compression
All modern browsers support and automatically negotiate gzip
compression for all HTTP requests. Enabling gzip
compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages.
Quick Fix — Enable gzip compression from your web host’s control panel.
#2 — Leverage Browser Caching
Fetching resources over the network is both slow and expensive: the download may require multiple roundtrips between the client and server, which delays processing and may block rendering of page content, and also incurs data costs for the visitor. All server responses should specify a caching policy to help the client determine if and when it can reuse a previously fetched response.
Quick Fix — Add the following code to your .htaccess file:
## EXPIRES CACHING ##ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days"## EXPIRES CACHING ##
#1 — Use a Content Delivery Network (CDN)
Content Delivery Networks (CDN) can be effective for serving up static content, including images, multimedia and file downloads. They’re known for providing high availability and high performance. Their distributed nature means that content is being served up “closer” to the end user.
These are just 5 quick tips to optimize your website. Take a look at our website speed optimization services for professional help. To test our speed on a live site, check out Eco Clean Madison’s new website!