14 Tips To Improve Your Website Performance
Improving your website should always be at the top of your priority list for any site you manage. Without it, your site is going to be dinged by search engines for not performing up to par, and customers are also going to quickly get frustrated by the slow browsing speed and how long everything takes to load.
Here are 14 tips to get your website on the right track.
1. Reduce Image Size
Images are one of the biggest culprits of a slow website. An image heavy site will result in slow loading and browsing speed. Most web experts will agree that image optimization is the biggest mistake many website developers overlook.
Here are some tools to optimize your images and keep your site moving smoothly:
- Third-Party image optimization tools:TinyPNG
Kraken.io
Optimizilla - Desktop software:ImageAlpha (Mac)
Riot (Windows)
Another problem that many people overlook is serving scaled images. You should resize your images using Photoshop or any other software of your choice to be a perfect match for your site. If they are too big - you are wasting precious bandwith, too small - your images look pixelated and ugly.
2. Enable Gzip Compression
When it comes to compression, Gzip is another excellent option for HTML content, CSS, and JS files. This compresses at the server level before sending anything to the browser. You can check if your site can be further compressed using the Gzip compression checking tool. It's simple to enable and you will notice a big difference.
3. Reduce Latency With Content Delivery Network
You can reduce latency on your website using a Content Delivery Network, or CDN. It works by caching your static content (images, JS, CSS) on datacenters distributed around the world, so it is always close to your visitors.
Here's a list of CDN services to consider:
- MaxCDN (Uptimia is using it)
- Cloudflare - a very popular choice
- OVH CDN solution
4. Infrastructure
A good web host is essential to your website's performance - even more important than all the other things covered so far. With a cheap, shared host, everyone on the server is sharing the limited resources. You need to be on a private host where your website will not need to share anything with noisy neighhbors. Go with a VPS or a managed host if your website is using Drupal or Wordpress.
VPS stands for "virtual private server". Here are some good providers:
- Digital Ocean - starts from $5/mo.
- Linode - starts from $10/mo.
- Vultr - you can choose from 14 locations
Managed hosting is a cost-effective and simpler option for those less experienced or in need of less resources/dedication than others. If you're just starting out, managed hosting will be what you need to get your site moving smoothly. Here are some popular options:
5. Reduce The Number Of HTTP Requests
Every time a browser fetches data from a server, it makes an "HTTP Request". This stands for "Hypertext Transfer Protocol" and it's a request/response between a web client and a host. In general, the more HTTP requests a web page makes, the longer it will take to load - and that's a problem for you and your users.
Luckily, there are countless tactics you can use to reduce the number of requests:
- Use CSS Sprites
- Reduce assets, like third-party plugins that use lots of external requests.
- If your Javascript is very small, inline it.
- Don't use any third-party frameworks unless it is critical to your website's design.
- Combine your JS and CSS files.
Basically, use only what is really important. Unnecessary requests are eating away at your site's speed!
6. Minify CSS and JavaScript
Minifying means taking away everything that is not necessary for the computer to read the code. That means removing new line characters, whitespace characters, comments, and block delimiters.
This may seem simple, but depending on how many files are on the frontend of your site, this can be a huge boost for your performance. It reduces the amount of code overall that needs to be requested from your server, speeding things up.
Here are some plugins to do this:
- JavaScriptJSCompress.com
Javascript-minifier.com
- CSS:CSSMinifier.com
CSSCompressor.com
Wordpress also makes it easy with the "WordPress Cache Enabler", for those running their site on Wordpress CMS.
7. Minimize Render Blocking Resources
This goes for JS and CSS.
Basically, your website will not be rendered (displayed in the screen) until all JS and CSS files will be loaded, that is why they are called "render blocking" resources.
Here are some recommendations for stopping CSS and JS from blocking the DOM:
- JavaScriptMove your scripts to the bottom of the page, placing it right before the