Recently, we’ve covered a lot of the things you can do to optimize your website’s performance. So far, however, we haven’t talked about two vital components of most modern websites – JavaScript and CSS. Without them, a lot of what makes the modern web so awesome wouldn’t be possible, but they can also impact your site’s performance.

The fact is, any scripts or additional code you add to your website can slow it down. However, there are ways you can ‘optimize’ the code to minimize the impact it has on your website from a performance standpoint. That way, you get the best of all worlds without deteriorating the User Experience (UX).

In this article, we’ll briefly talk about what JavaScript and CSS are and how they impact your website’s speed. Then we’ll discuss three ways you can optimize the way your site uses both. Let’s get to it!

A Quick Overview of What JavaScript and CSS Are

Unless you’re visiting a website that’s all black text on a white background, we’re willing to bet there’s at least some CSS working its magic under the hood. The same goes for JavaScript, which is broadly used on most websites to power a lot of cool features.

If you’re a regular to the ManageWP blog, you’re probably already familiar with both JavaScript and CSS. However, it’s always worth checking out some of the amazing things both languages enable you to implement.

For example, when it comes to JavaScript, there are plenty of cool libraries with advanced functionality you can check out, such as anime.js. This enables you to implement a broad range of microinteractions, plenty of which also rely on CSS:

As far as CSS goes, some people are making literal art with it. If you have some time to burn, take a tour along CodePen and check out some of the incredible effects users have accomplished using ‘simple’ CSS:

The main takeaway is, modern websites need both JavaScript and CSS. However, the way you implement them also matters, particularly if you care about website optimization (which you should!).

Why JavaScript and CSS Impact Your Website’s Speed

Simply put, any code you add to your website will have an impact on its loading times. With JavaScript and CSS, for example, your server has to render the code so visitors can see the result. In addition, the more code you add, the larger your page files will get.

In some cases, the impact the code has can be small. However, when it comes to loading times, every millisecond counts. To keep track of your site’s performance, you can use services such as Pingdom Tools, which enables you to monitor page sizes and their loading times:

Another great option is to run stress tests using tools such as Load Impact. With this particular service, you can simulate how your website handles when multiple users try to access it simultaneously, which can give you a more accurate assessment than speed tests alone:

Even if you use external CSS and JavaScript libraries, they can still impact your site’s performance because they need to be ‘fetched’ first. In other words, unless you plan on using plain HTML for everything (which is bad), you’ll need to look for optimization methods that will enable you to lessen the impact of using JavaScript and CSS.

3 Ways to Optimize Your Website’s Use of JavaScript and CSS

There are several ways you can go about optimizing your website to lessen the impact that JavaScript and CSS have on your loading times. For the best possible results, we recommend you implement all of them.

1. Defer the Parsing of JavaScript

When you visit a website, your browser fetches the code and renders it. This includes HTML, CSS, JavaScript, and any other code within your page files. However, sometimes your browser won’t render a page until it’s ‘done’ fetching the JavaScript, which can take a while with external code.

The easiest way to fix this problem is to configure your website to defer loading JavaScript files until after the rest of the page renders. This way, less time will pass by before users see the full page, while their browser deals with the JavaScript in the background. It’s a nifty little hack that can give the impression of faster loading times, and it’s not hard to implement.

To defer JavaScript, you’ll need to edit your theme’s header.php file. For the best possible results, you’ll do this using a child theme. To access the file, navigate to the public_html/wp-content/themes/yourchildtheme directory using your favorite FTP client and open it, so you can add the following code before the <body> tags:

<script type="text/javascript">

function parseJSAtOnload() {
  var element = document.createElement("script");
  element.src = "script_to_be_deferred.js";
  document.body.appendChild(element);
}

if (window.addEventListener)
  window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
  window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;

</script>

This code tells WordPress not to load a particular JavaScript file until after it renders the rest of the page’s content. Note that this code example uses a placeholder – script_to_be_deferred.js. For it to work, you’ll simply replace this with the file name and path of the script you want to defer. When you’re done, save the changes to header.php and you’re good to go!

2. Inline Small JavaScript and CSS

In most cases, it’s considered good practice to use separate files for your JavaScript and CSS code, then call upon those from your HTML file. After all, this results in much cleaner and easier to maintain code.

However, when we’re talking about very simple (or small) code snippets, the rule doesn’t hold up. If you only need to add a few lines of codes, you can do so manually within your HTML file, which is what we call ‘inlining.’

Inlining your JavaScript and CSS might not result in the prettiest code, but it can improve performance on your website, since it will minimize the number of additional files it needs to load.

Keep in mind, though – you should only use this approach for very short code snippets. In addition, make sure to comment your code so you don’t forget what each snippet does.

3. Minify Your CSS and JavaScript

The concept of minification is pretty simple – you take a snippet of code and remove all of the superfluous characters, such as white spaces. This might not make for the prettiest code, basically because you’re also removing the readability factor. However, a computer can still make sense of it, and it can help reduce page loading times.

Take this simple CSS code snippet, for example, which modifies the spacing for your H1 and H2 subheadings:

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

After we minify this code, it should look something like this:

h1{word-spacing:10px}h2{word-spacing:-5px}

Depending on how far you want to take minification, you can also replace variable names with shorter alternatives to reduce filesizes even further. The more CSS and JavaScript you add to your website, the more the code will add up. This means minification can go a long way, particularly for websites with a lot of complex functionality.

As you might imagine, minifying code by hand is not what you’d call a fun activity. Fortunately, there are a ton of tools you can use online where you input your code, and they’ll take care of minifying everything for you – so take advantage of them!

Conclusion

The more features and styling you add to your website, the longer it may take to load. This means JavaScript and CSS can have a direct impact on your website’s performance. However, that’s no reason to avoid either of them, since they’re incredibly powerful languages.

However, what you can do is optimize the way you use both JavaScript and CSS to make sure they don’t slow your website down. This article has looked at three main ways you can accomplish it:

1. Defer the parsing of JavaScript files.
2. Inline small JavaScript and CSS.
3. Minify your CSS and JavaScript.

Do you have any questions about how to optimize your use of JavaScript and CSS? Let’s talk about them in the comments section below!

Image credit: Pixabay.