How to make your Website load faster.
Notice! This article doesn’t address application code efficiency which is the most important consideration for performance.
Key ways to make your website load faster are to decrease webpage size, reduce the number of HTTP requests required and get the resources as close to the end user as possible.
Here are some tips on getting started.
Condense your scripts.
Remove whitespace, returns, and comments. Use a tool like Webpack, gulp, grunt or other. If using a tool is too much of an undertaking you can use an online tool like https://www.uglifycss.com/ + https://www.uglifyjs.net/. The effect will be a reduction in file size. Smaller file = faster data transfer.
Decrease image sizes
If you have a 1200px by 1200px image in a 500px by 500px space you are wasting data. Crop your images to the proper sizes. There are tools to optimize your images for the web. These tools can reduce the file size significantly without degrading the quality of the image to unacceptable levels.
Find an automated way to do this. An automated process is the only practical way to manage this long-term.
Reduce the number of HTTP requests per page load by combine scripts
Most projects are calling in multiple scripts and stylesheets. You can combine multiple files into one or two files. Every individual file you call is an additional HTTP request. Every HTTP request comes with overhead. Use a tool like Webpack, gulp, grunt or other.
Many of us are guilty of calling in libraries with a lot of CSS + JS that we don’t end up using in our projects. If you can remove all unused code from pages, you reduce the size of the page. I don’t have a full proof way to do this. I use this tool for CSS https://www.jitbit.com/unusedcss/. I manually prune JS within reason.
Get the resources as close to the end user as possible
Take advantage of Caching
Caching is a general term. I am going to keep my explanation general. There are many other articles that will go into depth, walk you through configuration, etc.
You want to cache assets in your user’s browsers so they don’t need to download them for every new page load. Use a tool or find an article to walk you through adding the headers to the assets you want to cache.
By default, most site builders are pulling info from a database every time a page loads, that is resource intensive. You can prerender the page and serve the result to every user without querying the database for every request.
Use a tool. I am a PHP person so I can confirm there are packages for Laravel and Plugins for WordPress (https://wordpress.org/plugins/wp-super-cache/). I’m sure other frameworks have a package, a library, or a collection of settings that are documented on StackOverflow to make this a breeze.
I hope this article serves as a general overview for someone struggling with a slow site. If you have any questions feel free to ask.