Let’s make HTML code optimization. A faster site means more views and more satisfied users, who will reach the content they want faster. As a site grows, it can be increasingly difficult to maintain acceptable performance. What I propose today are a series of useful rules to pursue this purpose:
1) delays the loading of javascript files
The use of javascript should normally be limited to utilities and events concerning user responsiveness. This language makes as little reference as possible to the starting graphics of the page.
How?
Insert any <script> javascript at the end of the page, just before the closing tag of the body: </body>
2) load fewer css files and targeted css rules
Try to limit the number of uploaded .css files. Possibly merge various small files into one that includes them all (remembering to respect any orders to be followed for the css rules contained in them).
How?
For example, if you use many libraries, it can happen that several css files accumulate, one for each library. You can take the rules and put them together in a single file that includes them all.
3) compress the images and reduce them in number with the sprites system
Images often tend to carry a lot of dirty data (eg metadata, “dirty” transparencies, etc.). As a rule, we also try to insert many icons and graphic details to embellish our site. Such situations can be harmful due to the amount of individual files that each user’s browser will be forced to download and render.
How?
We talked in depth about css sprites in the news:
Sprites tutorials and examples
If, on the other hand, you make extensive use of icons, it may be convenient to exploit the potential of CSS3 and import special fonts that contain these icons.
4) insert the css calls and the css code in the of the page
CSS rules deal with the presentation and formatting of the page. For this reason it is preferable that this formatting takes consistency as soon as possible.
How?
Just insert any <style> css or import a css file between the tags: <head></head>
5) minify the html of the pages
Tabs, carriage returns, and repeated spaces are not rendered by html. It is preferable therefore, even if you correctly indent the html, avoid the overabundance of these characters in your html code.
6) watch out for cacheable resources
Make sure that the parts of your site that your user visits are often loaded faster on the second entry.
How?
Insert the cache rules into your server configuration. We use for example an .htaccess configuration file of Apache HTTPD:
ExpiresActive On
ExpiresDefault A404800
ExpiresByType image/x-icon A600200
ExpiresByType application/javascript A600200
ExpiresByType text/css A600200
ExpiresByType text/html A3000
7) avoid CSS @import
The css gives the possibility to import other css files directly into your language. However, this functionality is widely discouraged due to the obvious reason that an import nested within another import would be created, as are normally the css codes.
The browser would be forced to download the css file first and then, once aware of the nested import, it would also be forced to download the link.
8) enable gzip compression for HTML code optimization
Make sure the files are properly compressed before arriving at the client with gzip compression, which can be enabled by an .htaccess configuration file.
These are some of many possible optimization of HTML code that you can do.
See you next time.
