by, Ryan Soeder, Director of Web Development | Mightily
In the first installment of our site speed optimization series (https://mightily.com/site-speed-optimization-what-you-should-know/), we looked at how server configuration plays a key role in how fast a site can load. We covered tactics such as serving next-generation image formats, enabling file compression, and using server-side caching to reduce latency. In this second installment, we turn our attention to the code itself. The way a website is written, from how scripts are loaded to how files are organized, will have just as much impact on speed as the server it runs on. This article explores how developers can write leaner, smarter code to help sites perform their best.
Clean, performing code
With a vast ecosystem of programming languages, services, and libraries to choose from when building an application, web developers are constantly making decisions about what techniques to employ and what tools to use. Some languages are easier to write than others but come with a sacrifice in performance. Some code libraries let developers create complex page interactions with just a few lines of code, but they require importing hundreds of lines behind the scenes to support those features. From a performance standpoint, less code is almost always better because every line has to be read and run by your browser when you load a page.
To deliver faster results, web developers use techniques like dynamic importing to load only the code needed for a specific page, asynchronous processes to run long tasks in the background, and writing custom features with fewer lines of code instead of relying on bulky libraries. I’ll be honest, this is my favorite part of the job and if I keep writing about it we’ll be here all day, so…
Minification and combination
After web developers have written all the code required to build a web site or application, they often use tools called task runners to remove all whitespaces and line breaks, shorten all variable and function names to 1 character, and combine every file needed to run on the site into 1 big file. The result is a file that looks like an absolute mess to a human but is much faster for a computer to read through and act upon. For example, here’s the original code shown alongside the minified and combined version created by the task runner.
It’s fun to try and figure out where the code on the left wound up in the minified file on the right but this illustrates the point that a computer doesn’t care how something looks as long as the code is technically correct. Removing unnecessary characters and white space creates smaller files for the server to load and helps your browser run the developer’s code more quickly.
Critical CSS and deferred JavaScript
Remember how the server first loads an HTML document, then parses it from top to bottom, loading all the files and images it finds along the way? We can leverage this behavior in how we write the HTML document to load only the files that we want when we want them. One way to achieve this is by using a technique called “critical CSS.” CSS files (https://www.w3schools.com/css/css_intro.asp), which style the page, are usually loaded as one large file at the top of the HTML, so the page looks polished as soon as it begins rendering.
As a user, though, you only see a small portion of the page at first. As a result, we don’t need to load all the CSS in the beginning, making the user wait longer for the page to load. We first load the styles visible on the initial screen, then load the rest once the page has fully rendered.
The same concept applies to JavaScript files (the ones that handle interaction). Since users generally don’t try to submit forms or open hamburger menus before a page loads completely, we can make sure calls to JavaScript files run last and even wait for scrolling or mouse movement in some instances. This approach loads content only when you need it, saving valuable time by focusing exclusively on visible elements.
Improving performance at the code level is one of the most effective ways to boost site speed, but the work doesn’t end there. The final piece of the puzzle is what the page actually displays. In the third and final installment of this series, we’ll explore how content structure, image choices, and layout decisions can all influence speed. Whether it’s compressing images or simplifying page design, we’ll show how content creators and marketers can play an active role in building faster, more efficient websites.