Tips For Streamlining Website Code

The precise composition of the algorithms used by Google and Bing to calculate their search results is a closely guarded secret. However, we do know page loading times are a key factor in determining where a website will rank compared to its rivals. Fast-loading sites are viewed by the search engine giants as being efficient and mobile-optimised, and therefore less likely to be abandoned before the homepage has loaded up.

Fighting the bloat

Unfortunately, it’s easy for website code to become bloated and inefficient. This can happen as a new site is being developed, or over time as additions and plugins are bolted on. It may occur by accident, through a lack of care because the developer doesn’t understand streamlined coding processes, or for a variety of other reasons. Irrespective of its cause, the end result is a website which performs slowly – often without any benefits of additional style or functionality.

Streamlining website code is important if individual web pages are breaching the psychological three-second display times, identified by analysts as the point at which audiences begin abandoning a download. Below are UK2’s tips for ensuring that your website code is optimised and minimised:

1. Avoid intensive multimedia content.

Parallax scrolling looks stunning, but it takes a while to download and render. Autoplaying video files are one of the biggest drains on bandwidth, as well as being a leading cause of site abandonment. Even photographs will bog down a web page if they haven’t been compressed and minified. Remember that every KB of data has to be downloaded by first-time audiences.

2. Reduce plugins.

Websites constructed using WordPress are customisable with over 55,000 plugins, handling specific tasks and functions. It’s tempting to run amok in the WordPress plugin store, but these code elements quickly consume available resources. Ask yourself whether proposed (or pre-installed) plugins are absolutely necessary. If they are vital, can you find a more streamlined alternative to the existing choices?

3. Optimise CSS.

Cascading Style Sheets create structured website layouts, rather like HTML. Also like HTML, CSS can quickly become bloated if a lot of code needs to be downloaded. Useful tips include using single-line notation rather than block notation to save parsing time and adding a table of contents to simplify future editing work. Some people also like to highlight specific sections with keys such as =!font.

4. Get a second opinion.

If you’ve been involved with a website’s development from the flowchart and sketch stages, it’s often difficult to view it from a fresh perspective. Asking a trusted associate to look through the code might quickly identify areas of duplicated, superfluous or even badly-assembled programming. Act on suggestions, and don’t rule out a total website redesign if the code is too messy to resolve easily.

5. Clean up the HTML.

There are free online tools which will scan a section of HTML and clean it up. As above, this can be useful if you’re struggling to see it with fresh eyes. Websites like HTML Washer will fix or remove bad tags and attributes, convert the markup to HTML5, and reformat the text with line breaks and indents. They’ll also reduce the number of tags to essential attributes like <a href>, <h1> and <ul>.

6. Experiment and rollback.

Version Control Systems are great for beta testing site improvements, without committing you to any adjustments. If your first attempt at simplifying website code has only made loading times or functionality worse, undo the changes. For existing platforms, it’s crucial to test a shadow site rather than experimenting with a live website which your customers might be trying to access.