Any web developer will tell you that initial programming comes with hurdles. When you’re stuck in a problem and can’t figure out why your code won’t work, you go through every possible change to figure out just how to make it work. Standards and clean code go out the window, and you bang away at the keyboard until your code works. Once it works, you don’t want to make any changes for fear that it won’t work again.
It’s a common habit to then leave messy code in place with the attitude that “it works, so let’s not mess with it.” Messy code means messy performance, and the right thing to do is go back and clean it up. If you leave the messy code in place, it turns into “spaghetti code” and makes it difficult for other programmers to maintain it. Eventually, a mole hill really does turn into a mountain when performance wanes due to poorly constructed code.
At some point, it comes time to review the backend structure and make minor changes to it. You don’t have to overhaul the entire code base to make minor tweaks, but you do need to test and QA it before deployment. Even minor changes can make a difference, and here are some that shouldn’t take too much time.
Note: these changes are general and can be applied to any web development language.
Reduce Calls to the Server
Whether you’re redirecting the user, making calls to a database, or just refreshing the browser window, all of these events tax the web server. When you’re in the midst of a problem that you can’t resolve, you often make calls or trigger unneeded events as you figure out why your code won’t work. Usually, you can combine multiple calls into one and reduce resource usage.
This problem is often created from database calls. For instance, you call a record set from the database and then loop through each record and make another call to the database to find additional information. If you have a hundred records in your data set, then you’re making 101 calls to the database for just one user. Combine them into one, and you could see an immediate improvement on speed with just this one change.
It’s hard to imagine that people still use dialup Internet, but as of 2015 CNN reported that 2.1 million users still used AOL dialup. If you remember the days of dialup, you know that anything over a few kilobytes was a terrible pain to download. Most developers think that only broadband users exist today, but plenty of people use dialup, so you need to consider these users when you create image-rich sites.
One way to combat the issue is to compress images. The images are compressed on your server and transfer to the user’s computer in a compressed state. Once it reaches the user’s computer, the browser extracts the images. This lets you have high-quality images without slowing down your website.
Don’t Override Caching
You can force the user to download your pages every time they visit, but it’s a strain on their bandwidth as well as your server resources. It makes sense to force the user to download dynamic pages that update regularly, but certain components of your site rarely change. Think of the footer, header and navigation sections. Do they change often? If not, then you can leave them cached.
You can also utilize a CDN for these components. You transfer the load times to the CDN and reduce the overhead on your internal servers.
Just like compression of images, you can minimize your external scripts. You can either use a tool for this or go through the code yourself. Google PageSpeed Insights gives you some good suggestions for minimizing the size of your code files.
Resize Images. Don’t Just Upload Huge Files
A common mistake among new developers is to upload a large 100MB image file and then use the image HTML tag to resize it when displayed in the browser. When this happens, the user downloads the large file and then resizes it during the rendering process. It doesn’t matter how small you resize the image, the user is always forced to download the larger file.
If you need to display a thumbnail image, use a thumbnail-sized file. Resize it in your favorite image editor and upload it to your site. It means you need several files for different sizes that you display, but it also speeds up load times.
Prioritize Important Content Above-the-Fold
Anything at the top of your page that doesn’t require scrolling is considered “above the fold.” Lazy loading is also an option. Lazy loading uses Ajax to load components of your site, so loading the top first would take priority while slower loading modules loaded asynchronously from the others.
Your users won’t even see the bottom section loading since they normally take a few seconds to digest the top. This method also loads the top section faster, so your perceived speed is much better than actual speed.
Most of these suggestions take little effort from your developers. Once you clean up the code, you might see an improvement without any other changes. Just make sure to test the site before releasing it to the public.