We all want to perform well, especially when it comes to attracting customers. These days, with so much business conducted on the Internet, the performance of your website is absolutely critical. Ask yourself, "Are my web pages slow to load?" If your website loads slowly or incorrectly, it can cause you to lose leads! None of us wants that, right?
Over the years, the expectation that every web page will load quickly and efficiently has grown significantly. But this isn't just true for desktops viewing; your visitors expect pages to load just as quickly on their mobile phones or tablets.
When you throw into the mix that Google takes page load time into consideration when ranking your website, it's easy to feel overwhelmed.
Don't worry—we've got your back! Below are 5 things you can do to reduce load times and keep your visitors happy. These tricks aren't ranked in any specific order - they're all important.
Optimize & Size Your Images
First, we'll start with the easiest way to increase your page load time, and that's by optimizing and correctly sizing all of your images. Uploading large, uncompressed images will significantly increase your page load time. If you're using WordPress, the best way to optimize your images is with the plugin WP Smush.it.
This plugin will optimize all your current and future uploaded images to the smallest possible file size while retaining the highest image quality. If you're not using WordPress, the best way to optimize your images is with a third-party solution like TinyPNG.
Speaking of size, make sure your images have been scaled down to the smallest appropriate size. By this I mean don't upload a 3500 x 3500px image to only be viewed on a 320 x 560px iPhone. If I know my images are going to be viewed on many different devices, I usually scale my images so that the longest side is no more than 1920px.
Limit the Number of HTTP Requests
When someone visits your website, the browser they're viewing it on has to request information from the server where your website is hosted - these are HTTP requests. This information includes anything the browser needs to render your website, including stylesheets, scripts, and images. When the browser is loading your web page, it will start at the top of the document and work its way down.
As the browser encounters each element that requires this kind of additional information, it sends a request to the server saying, "Hey, I need this file." Until it receives a response from the server, the browser can't continue to load the page. Once it does, it continues moving down the document. If your website server receives a lot of requests, you can imagine what happens to your load times.
To limit the amount of initial requests, try combining all your stylesheets into one stylesheet and all your scripts into one script. This way, the browser can request 1 or 2 stylesheets and get all the information it needs (ditto for scripts).
What about the images? Well, it depends on whether your images are "above the fold" (the view you see without scrolling). If they are, then you just have to make sure the images are optimized to help requests process quickly. If they're below the fold, you can "lazy load" the images, or wait to load each image until the user has scrolled down to it. In the past, I've used a great plugin called Lazy Load by Mike Tuupola for this.
According to Google Developers, "minification" is "the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser." In other words, minification gets rid of white space and comments in the document to reduce processing time.
When a human is looking at the document, white space and comments make it easier to read - but that's not the case with browsers. In addition, this unnecessary data adds to the size of these files, which also increases page load time.
The best time to implement minification is at the very beginning of development. This will ensure that the minified files render properly without breaking the web page. If you minifying these types of files after development, it's possible that they may break website pages, so proceed with caution! If you choose to minify a website that is already live, there are many resources available to help you. Refresh-SF is just one resource I've used when minifying already developed websites.
Enable GZip Compression
Enabling GZip compression on your server will compress the size of the page content, resulting in smaller file sizes and quicker transmit times. GZip is a modification that's made on the server, so you may need to contact your hosting company to make sure your server is able to run it.
Leverage the Power of Caching
Caching resources like images, CSS, and JS files on the user's end can greatly increase your page load speed. When the user's browser caches these files, they are able to load the web page faster when they return to view the site. Instead getting downloaded again, these resources are stored on the user's computer and can be retrieved locally. To see if your caching controls are set up correctly, talk to your developer.
With these 5 tips, you'll be able to optimize your website to load as quickly as possible. Please keep in mind that if your website is hosted on a slow server or is behind a slow connection, all the optimization in the world can't increase your page speed. I'll leave you on that happy note, but keep an eye out for my future blog posts - I'll be giving you much more detailed information about how to implement these strategies, both for new users and more experienced developers.