Servage Magazine

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

Some simple web-performance tricks

Monday, June 30th, 2014 by Servage

Web Page Performance Optimization

Here, in the user experience era, our fundamental responsibilities are to maximize convenience and deliver excellence for each aspect of our website projects. The most prominent measure of website performance is that it loads rapidly, or loads just before our cherished visitors lose their patience.

Diligently, web designers and developers make every effort to reduce the weight of loading documents while and increasing visual optimization. Our community of web designers handles the optimization aspect collectively and continuously, while web programmers aim for increased performance among dozens of other tasks.

Web programmers are able to reduce document loading times by utilizing clean, compact, and comprehensive coding techniques. This includes adopting standard coding methods, where they eliminate non-essential characters, excessive indentations, and over-use of white spaces. Or they avoid repetitive codes to not only save time, but to reduce document weight. In this article, I note a few simple performance tricks to accomplish optimization. Some of these tips are fairly common, while others are less known in the web developer community.

HTML Optimization

HTML is the core part of any web page. The first 10 percent of load time, at minimum, is for HTML and CSS documents; and the remaining time belongs to other elements like graphics, images, and multimedia content if they are included. By removing unnecessary code from HTML documents, like Div tags, we can reduce file size considerably.

Reduce Both HTTP Requests and File Size

Frequent HTTP requests are also a hindrance for rapid loading performance. Server-client interactions, bandwidth limits, and connectivity all play crucial roles in modern days, tiny browsers and the CPU of mobiles. There are many ways to reduce HTTP requests, such as creating CSS sprites for combining multiple images, avoiding inline or embedded code, etc.

For instance, if you define CSS inside a “style” attribute of HTML tags, or JavaScript inside an “onClick” attribute of a HTML tag, you will increase file size. While inline or embedded code reduces the frequency of HTTP requests, they are really only practice in cases where you have limited assets.

Other tags, such as the “script” tag of HTML where you embed JavaScript, and “style” tag when externally loading CSS from a “link” tag, or even JavaScript from “src” attribute of a “script” tag of HTML, create large file sizes and lower performance rate. The external loading of CSS and JavaScript rely on cache which has limited size or capacities. However, HTML5 cache mechanism has solved this to some extent; so, external loading is advisable when you have large files and tons of pages, where interactions matter more.

Other HTML-CSS Coding Techniques

Additional HTML recommendations include putting style sheets in the “head” section.  Progressive loading helps in keeping your visitors engaged with initial content. Furthermore, placing JavaScript at the bottom or lower section of a web page provides relief from the blocking properties of scripts, during page loading. If you do place scripts in the lower portion, it isn’t possible to add an “async” tag within a script tag of HTML to make loading of scripts asynchronous and allow other elements to load first without blocking the download at all.

For CSS, minify your style sheets with standard, yet compact coding, as discussed initially. If you are a smart web developer, you might have knowledge of separating modular components, where each component exerts a new HTTP request. Combining CSS is a healthy coding practice for seasoned web programmers.

References & More Reading

Some simple web-performance tricks, 4.3 out of 5 based on 4 ratings
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.