Small Changes to a Web Application That Make Big Differences in Performance

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.

Compress Images

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.

Most of the time, you don’t need users to download CSS and JavaScript files either. New sites can have dozens of JS and CSS files for the user to download. It’s much different than older standards where a few JS files and one CSS file were all it took to stylize a site. Now, sites have several components that make up one site page.

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.

Minimize Components

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.

Some libraries already come with minimized versions. JQuery is one example, but you will need a way to minimize your custom scripts. Cssmin.js is one tool for CSS and JavaScript.  JSMin will help you with JavaScript 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.

Get the latest in Web Performance
Subscribe now to receive the latest news, tips and tricks in web performance!
The information you provide will be used in accordance with the terms of our privacy policy

No comments

Be the first to post a comment.

Post a comment