11 Killer Website Speed Optimization Techniques to load site faster
In the modern era of blogging the speed of a website matters a lot. Even tough the website has a good content and if it loads slowly people will close the tab and move on to another website for information. You could use the below-mentioned website speed optimization tips and techniques to improve the performance of your site.
Even a second delay in page load time can cause certain problems like:
- 18% decrease in customer satisfaction
- 5-7% loss in conversion rate
- 15% increase in bounce rate
- 10% decrease in page views
Popular websites like Amazon, Wallmart, Flipkart has increased the revenue of 1% for every 100millisecond improvement in the site speed. (Source:Amazon)
What should be the Ideal time taken to load any website?
There have been multiple types of research done on this topic by Akamai, Amazon , and Google. In 2016, the average time any website should take to load must be less than 2 seconds. Anything above 2 seconds will have a significant impact on bounce rate, search engine ranking, conversion rate failures etc.
11 Website Speed Optimization Techniques to load site faster.
Server Speed Matters a lot
The first and foremost thing is to choose a suitable hosting environment. This solves 50% of the issues caused by shared hosting server.If you have gone with the shared hosting plans I would suggest you switch to VPS hosting once you start getting more traffic on your website.
Most of the times images are the biggest culprits due to which the web page loads slower. We can overcome this issue by optimizing the images. If you are using WordPress then best plugin to optimize the images is WP Smush. Alternatively, you can optimize images over online. Check out the 5 Best Online Image Compression Tools which you could use and compress the size of the image.
Place CSS at top of the page and JS files at the bottom
CSS files should be placed in the document head section since browsers will not render your page properly without loading the CSS files. Most of the times users will see a white screen until the stylesheets loads completely.
Minify HTML, CSS and JS Files
Minification is a process which removes unwanted spaces, shortening the variable names, removing the comments and unnecessary characters without changing its functionality. Google Page Speed and YSLOW recommends every website to minify the content to reduce the file size. This will boost the website performance and loads the web page faster.
- To minify HTML, try a minifying service to generate an optimized version of your HTML code.
- To minify CSS, try YUI Compressor and cssmin.js.
Minimize the number of HTTP requests
Every request to resource files like images, CSS , JS is considered as HTTP request. For Eg: if you have 10 images and 5 JS files and 6 CSS files the total no of HTTP request to load these resource itself will be 21. This will increase the load time of the server.Minimizing the total no of requests is a great way of website speed optimization.There are many ways you can reduce the HTTP requests.
- Use CSS Sprites wherever possible. This will help in reducing the no of requests.
- Remove unwanted images. Keep only if the image is necessary.
- Combine multiple CSS files together into one file.
- Load CSS and JS files only if it’s necessary. Some of your web pages may not require all the CSS and JS files. Avoid loading them unnecessarily.
Enable gzip compression
Gzip compression allows your web server to provide compressed or smaller file size which helps to load the web page faster to the end users. Enabling Gzip compression reduces the response size by 70% approximately.
If you are using WordPress then you could use WordPress Gzip Compression plugin to enable the compression.
Avoid Broken links
Broken links cause a lot of issues and degrade the performance and results in 404 errors. There are many broken link checker tools available online. Use any of that service and fix the 404 errors. For the WordPress sites, you could use Broken Link Checker plugin to fix the issue.
Server Resource from Consistent URL
Make sure all the resources like JS, Images and CSS are servers from the same domain or from a CDN. Do not use different domains to fetch the resources. If you serve the resource from same domain then you could reduce DNS lookup overhead issues. Even loading the resource from subdomain will require DNS lookup. Leverage the caching of files by serving from consistent URL.
Use CDN to serve CSS, JS and Images
A content delivery network (CDN) is a system of distributed servers (network) that deliver web pages and other Web content to a user based on the geographic locations of the user, the origin of the web page and a content delivery server.
Hence using CDN to load the static resource files will increase the performance of the website because the resources will be requested from the nearest location and it will help the web page to load faster. Using CDN also reduces the burden on the application server. This is one of the greatest website speed optimization technique every developer must follow to load the web page faster.
Leverage Browser Caching
Adding Expire headers to the image files tells the browser to cache the resource file for a specific time. Next time when the URL request is made browser first checks the cache first to load the resource. Only if the cache is expired or deleted the request is made to the server. This will improve the performance of the page load speed significantly.
Cache the web page
Be it a blog or any other website the data which you serve on the web page comes from the database and if the data is not changing very often then you should always use data caching or memory caching. Each time when the request is made to server the web server makes a database call to fetch the data and then serves it to the browser. Caching the data will avoid the DB call ,reduce the round trips and improves the web page loading time.