How to optimise website’s speed and performance
- The quality of a website’s hosting provider can have a big effect on its performance, as can the quality of the frameworks and themes chosen when it was built.
- You could make use of lazy loading and fix broken links across your site.
- Reducing the sizes of your images and the number of HTTP requests will have a positive effect on your site’s loading speed and performance.
Optimize a website’s speed and performance to enhance the user experience, amplify customer’s retention and increase ROI! In this article, you will find 20 valuable tips on how to optimize your website to load faster and improve your business.
Free website speed test tools
The first step in website speed and performance optimization is testing, detecting and analyzing overall speed issues. To do that successfully, we suggest using some or all of the recommended speed test tools:
- GTmetrix – Grades your page’s speed performance and gives you recommendations with detailed explanations on how to improve your PageSpeed and YSlow scores.
- Pingdom Website Speed Test – Besides giving you performance grade and estimated page load time, this tool can sort out files for all HTTP requests based on their size, and quickly detect bottlenecks.
- WebPageTest – This tool allows you to test your website’s performance from more than 20 locations in Chrome, Firefox and Internet Explorer. It gives you an estimated load speed, the TTFB (Time to First Byte) and lots of other useful information.
- Google’s PageSpeed Insights – This tool doesn’t give you a load time estimate but generates suggestions based on a web page analysis, to make that page faster.
20 tips on how to optimize website speed and performance
1. Choose quality hosting
The precondition of having a fast website is a quality web host and reliable DNS provider. Choose a hosting company that has servers geographically located, where your target audience is. Avoid cheap hosting solutions, and if your budget allows, choose a managed or dedicated server, over shared hosting.
2. Use quality frameworks or lightweight themes
Optimized website speed and performance should be the most important point in modern website design. Unfortunately, most website owners do not realize that every extra loading second negatively impacts their business. Versatile, feature-rich themes generate more sales, and for this reason, many WordPress developers are inclined to put performance as a lower priority.
If you’ve built your website using the wrong framework or theme, it would be very hard to optimize it, once your site is up and running. If you want to have a fast website, make sure to choose a quality, lean framework/theme, or you might regret it later.
3. Reduce the file size of your images
Unoptimized image files are the number one factor that slows down a website. If you have to choose to change only one thing to improve your website’s speed, you should go with image optimization!
Images bear 64% of an average website’s page weight ~ HTTP ArchiveCLICK TO TWEETThe best image optimization tactic is to reduce the file size before uploading by following these rules:
- choose the proper format – use JPGs for photos, PNGs for logos, illustrations and when you need transparency, use GIFs only for animations
- scale down the image to exact dimensions
- compress the image
You can compress images lossless with online tools like Tinyjpg or Compressor.io.
Lossless compression reduces the file size by removing unnecessary image metadata. With the lossless compression method, there is no quality loss.
If you have hundreds of images already uploaded on your website and don’t have time to reduce file sizes manually, you can use bulk optimization plugins such as EWWW Image Optimizer or Optimus – WordPress Image Optimizer.
4. Reduce the number of HTTP requests
Every additional HTTP request slows down your website. To reduce the number of HTTP requests you can do one or more of the following:
- combine your CSS and JSS files into as few as possible
- reduce the number of plugins and widgets
- optimize plugin usage – replace plugins which add many HTTP requests
- reduce the number of tags in your code – use Google Tag Manager to add tracking, analytics and remarketing tags to your website
- avoid using 3rd party frameworks
- host fonts locally
- use CSS sprites
5. Enable Gzip compression
Gzip is a form of compression at server level, which can save you a lot of bandwidth. You can enable Gzip compression with a plugin or manually in your .htaccess file.
7. Optimize CSS
CSS optimization is more than minifying CSS files. Here are some good practices on how to optimize CSS code:
- use fewer declarations and operators
- load CSS code inside the <head> tag
- use external CSS files
- avoid @import
- avoid inline CSS, use inline small CSS
- use as few CSS files as possible
1 in every 4 visitors abandons the website if the load speed takes more than 4 seconds!CLICK TO TWEET
8. Optimize the DOM’s critical rendering path
- use as little code as possible; compress, minify and concatenate files into fewer files, preferably only into one file
- put the CSS references in the head tag and move the scripts before closing the </body> tag
9. Use a Content Delivery Network
Use a CDN such as MaxCDN or KeyCDN to distribute your content globally, and deliver cached static content to geographic locations near your users. With CDN, your website will be faster and user experience improved.
10. Avoid 301 redirects
Redirects double the required time for the initial HTML document loading and for this reason you should avoid them whenever possible.
11. Leverage browser caching
You can leverage browser caching with a caching plugin or specify caching parameters for different files in your .htaccess file. Google recommends to set expires headers with a minimum max-age of 7 days.
12. Utilize server-side caching
If your website is high in traffic, consider utilizing server caching. You can cache commonly used data from the database
13. Enable HTTP/2
HTTP/2 does not change the HTTP fundamentals; there are still requests and responses, but the usage of network resources is more efficient. To enable HTTP/2, you need to migrate from HTTP to HTTPS and have a server that supports HTTP/2.
14. Host fonts locally
In the last few years, web fonts have become increasingly popular. The majority of websites are using custom fonts, which are great from a design point of view. Unfortunately, web fonts are render blocking and add extra HTTP requests to external resources.
In 2016, more than 63% of all websites are using custom web fonts ~ HTTP ArchiveCLICK TO TWEETIf you are a fan of custom fonts, the recommendation is to host the fonts locally and, if you are using a CDN, move them to your CDN.
15. Use lazy loading
With lazy loading, content loads only when it becomes visible on the user’s screen. For example, if the user scrolls only through the first half of your web page, the second half will not load and will save a part of server memory and bandwidth.
16. Fix 404 Errors
Regularly check for broken links in your Google Search Console account or from time to time run a quick scan with the Online Broken Link Checker. Fix all 404 errors to save server memory.
17. Optimize your database
Your database can accumulate a lot of unnecessary information and slow down your website. To prevent it from happening, remove:
- comments in the queue and unapproved comments
- post revisions
- trashed posts and pages
18. Avoid non-functional multimedia content
Reconsider the amount of graphic content you are using on your website. Avoid graphic based backgrounds and large sized images, which are not the deciding factor in driving conversions.
19. Disable pingbacks and trackbacks
Trackbacks and pingbacks are mostly spam that ends up in your comment moderation section. Too many unapproved comments can slow down your website, so it’s best to disable them. If you are not using comments on your website it’s best to remove comment fields permanently.
20. Use CSS sprites
CSS sprites is an optimization technique of combining several image files into one, which reduces the number of HTTP requests. Fewer requests = better speed and performance.
CSS sprites are very useful for social media buttons, flags or other icons that are usually displayed together.
Maintain your website regularly
Website speed and performance optimization is an ongoing process. Once you’ve managed to successfully optimize speed and performance you have to continue monitoring, testing and – most importantly – regularly maintain your website. If you fail to do so, everything you add to, or change on your website, such as code changes, new widgets, plugins, published content, revisions, comments, etc. can influence future load speed and performance.