7 Easy Ways to Speed Up Your Website
Quick Fixes for Maximum Results with Minimal Effort
As we all know, speed is important for good user experience, but did you know it is also good for SEO? Google's search ranking algorithm takes into account the load time of a page on a website. You can use Google Analytics to measure your site speed. Google has an article about how page load speed affects ranking: here. Every developer strives for optimum website performance and faster rates for page load. The following quick fixes will give you big results for minimal effort.
1. Move Assets to Separate Servers and/or Domains.
This is a two-pronged solution to increase page loading speed and reduce server load.
- Browsers set limits to the number of simultaneous connections they can make to the same server. You can bypass the browser download limit by using a CDN to host images or JS and CSS. With assets offloaded to a separate server, your browser is free to download more of your site simultaneously.
- Having assets on a CDN dedicated asset server means your application server has more resources for processing dynamic page data.
2. Optimize Images
Much of the time spent waiting for a page to render is dictated by the download speed of the user's internet connection. People with slow connections will find the site to be slow. So the download speed that they experience is out of our hands, right? Not quite. If we are able to reduce the total download size of the page they are viewing; they’ll find the site to be much faster. Much of any given page’s total size is determined by images. To make the page smaller, reduce the size of its images. There are several ways to do this: reuse the same images, use the correct image sizes, remove extraneous images, and optimize existing images.
We are going to concentrate on optimizing existing images for this post. The other methods are self-explanatory.
There are tools and services like tinypng that are able to optimize existing images and retain the same image quality. You can also use Photoshop and other similar tools that can reduce the image size of JPEGs and GIFs as well. There is no standard to what the quality should be. It depends on the image and the context they are in.
3. Obfuscate/Minify CSS and JS
Most CSS files can compress to be ¼ of their original size. Non-essential characters and comments are removed from the files. Plugins exist for many code editors that integrate minify functionality so you can minify easily while programming.
Related Links:
4. Reduce Extraneous or Duplicate Files. Consolidate Multiple CSS and JS Files into One.
Often times in a large site with a long history of updates, there will often be legacy files that are no longer being used, rules in CSS files for divs that no longer exist or have long been overruled. There are a few tools out there that can help you track down obsolete CSS files and rules. un-CSS is an online tool that helps you do just that. It allows for analyzing a single page or an entire site. Regardless of the tool you use, trimming legacy junk is important keeping your site lean and mean.
5. Put CSS Files at the Top of the Page
Putting the CSS files at the top of the HTML will make your page appear to load faster because it allows for the page to render progressively. It will give your users faster visual feedback that the page is being displayed. This is especially effective and apparent for users with slower connections.
6. Optimize Database Queries and Schema Structure
Database query load is often the biggest resource hog of any server hosting a dynamic site. Tuning your database server and optimizing your queries would not only potentially increase page load speed but also increase the capacity potential of the site. Matthew Montgomery wrote an excellent script that analyzes your MySQL statuses, logs and variables, and makes intuitive and explained recommendations based on numerous baseline factors.
7. Installing a Reverse Proxy Caching Layer
Installing a reverse proxy might not be possible for everyone and might not make sense for every site, but if you have full access to your own server and have a site that renders a lot of pages but changes only periodically, your server can benefit greatly from using a reverse proxy cache layer.
Nginx and Varnish are a few of the available reverse proxies that we have had good experiences with and would highly recommend if you are looking to scale up your sites.
Developers should always strive to improve performance. On your next project, try one or all of these high impact, low effort optimization solutions. Over time, they will just become another step in your process.