A slow website can harm your SEO efforts, as Google uses page speed as one of its most important ranking factors. Moreover, speed affects the overall user experience (UX) – statistics show that 40% of users will abandon a website that loads for more than three seconds.
JS files add to a page’s size, prolonging its loading process. They can also delay site indexing, as some search engines have difficulty reading and rendering them. Consequently, too many JS files can affect overall SEO performance.
Code minification removes unnecessary characters such as spaces, tabs, line breaks, and comments without modifying the code’s functionality. This results in a smaller web page size and improved page load time.
UglifyJS is an excellent solution for minifying JS code. It packs several usage tools, such as a parser, compressor, and mangler.
Alternatively, WordPress site owners can use Autoptimize to automatically minify the site’s JS code.
- Go to Settings -> choose Autoptimize.
- Click on the Show advanced settings option.
Once done, check your page speed and see if it improves.
This method enables site owners to reduce file sizes using the compression algorithm. It can be another great option to reduce performance issues on your website.
3. Delete Unused Code
Two types of JS code to delete include:
To identify unused code, website owners can utilize Chrome Dev Tools. Here is a quick guide:
- Open the tool from the More Options button.
- Locate More Tools -> expand -> click Developer Tools.
- Access the command menu by hitting Ctrl + Shift + P.
- Navigate to Show Coverage -> click the Reload button.
- Finally, the tool will show you the unused JS code.
A content delivery network (CDN) is a group of geographically distributed and interconnected proxy servers. Each of them stores cached content, which helps reduce network latency. A CDN loads data from the nearest server based on the users’ location.
5. Use the HTTP/2 Protocol
HTTP/2 is one of the most advanced and latest versions of the HTTP protocol that helps improve average website performance. Akamai provides a real-time HTTP/1.1 vs. HTTP/2 comparison demo, showing users that the latter loads faster.
Here are some key advantages of using the HTTP/2 protocol:
- Smaller bandwidth consumption.
- More efficiently-parsed library files.
- Less prone to errors.
Enabling HTTP/2 can only be done from the server side. So, make sure to check with your provider if you can switch to the protocol.
6. Use the Defer and Async Tags
For that reason, developers often place JS code after the main HTML code. To solve this issue, you can utilize the async tag to enable the DOM/CSSOM model to be created in parallel as the JS code loads.
Be careful in cases when you use jQuery-dependent libraries or your JS code manipulates the HTML or CSS code. Insert the following lines of code if you use bxSlider on your website:
<!– jQuery library (served from Google) –>
<!– bxSlider CSS file –>
<link href=”/lib/jquery.bxslider.css” rel=”stylesheet”>
Now, website owners can’t use the async tag as it will only cause errors. Here are the reasons:
- jQuery loads from the Google CDN, whereas bxSlider does not.
- jquery.bxslider.min.js loads before jquery.min.js.
This is where the defer tag comes into play. After the DOM/CSSOM models finish loading, every script with the defer tag will run instantly and in the correct order.
And that’s how async and defer tags can improve page load time. On a side note, keep in mind that these tags are only functional for external scripts, marked by the src=”” tag. Using them on internal scripts with <script>…</script> tags is ineffective.
- Compress JS files – this process reduces file sizes before sending them to web browsers, reducing the download time.
- Delete non-critical and dead code – the two can harm a website’s first paint score.
- Use the HTTP/2 Protocol – Tests show that this newer version is significantly faster than HTTP/1.1.
- Use the defer and async tags – both help enhance performance by ensuring the course effectiveness of the JS code.