Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Speed up your website – Part 4: JavaScript

Saturday, July 14th, 2018 by Servage

This is the fourth part of a simplified explanation of the “Yahoo best practices for speeding up your web site“. Read the third part here. The third part is about CSS related optimization.

Preferably place scripts at the bottom

Scripts block parallel downloads of multiple items in the browser. Therefore you might want to place the scripts at the bottom of the page, if possible. It is a problem if your scripts alter the content of your document on the initial load, since you might want those scripts at the top.

Make JavaScript (and CSS) external

Including JavaScript and CSS in the HTML document reduces the amount of requests, but also increases the page load time. Generally you should only include such elements in your HTML document if you have very few (maybe only one) page view per session. As soon as your users has multiple page views per session, it starts to become and advantage to have external JavaScript and CSS resources, because it decreases HTML page size, and those resources are available from the browser cache.

Minify script files

Minifying your scripts means that you remove all unnecessary characters form your script file, which greatly reduces size. Two popular tools for this are JSMin and YUI Compressor. Further optimization may be achieved by obfuscation. However, obfuscation is more likely to produce errors afterwards. Hence it should be done with care.

Don’t include scripts twice

Sounds like a no-brainer, but according to the YUI article this is a real problem, even with large popular websites. It’s recommended that you dynamically include your scripts, for example with a PHP function like includeScript(), which can check for duplicate inclusions (and other relevant issues, like dependencies, versions etc.).

Minimize DOM access

Script access to the content costs performance. Therefore you should avoid it where possible, and maximize the use of cached elements. Read more in “High Performance Ajax Applications” by Julien Lecomte.

Use smart event handlers

Event handlers are performance intensive, and may reduce responsiveness of your website, especially if you have many of them around the same area. Try to group them into single handlers, that identify the triggering element. Sounds complicated? Read more in “High Performance Ajax Applications” by Julien Lecomte.

Speed up your website – Part 4: JavaScript, 4.3 out of 5 based on 6 ratings
Categories: Guides & Tutorials

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.