Chapter 6. HTML optimization tips

 

This chapter covers

  • Positioning CSS and JavaScript in a web page for best performance
  • How CSS and JavaScript placement affects rendering
  • The impact of duplicate scripts
  • HTML5 optimization techniques

This chapter contains a collection of HTML best practices and tips that will improve the performance of your website. Some tips may seem like small changes, but they’ll go a long way toward improving the overall load time and responsiveness of your website. We’ll cover the optimal position in the HTML to place CSS and JavaScript, as well as the order in which they should appear.

You’ll learn a few HTML5 techniques and how you can apply these techniques to your application to achieve quicker load times. This chapter builds on the Surf Store application that you’ve been using thus far, and applies HTML5 techniques in different scenarios.

6.1. Where to position CSS and JavaScript in a web page to achieve the- e best performance

When you start building a new website, you may not be concerned with the order or location of the style sheets on your web page. However, their order and location play an important role in the way a browser renders a web page.

6.1.1. CSS

The position of CSS in an HTML document has less to do with download times, and more to do with how the browser reacts and renders the page. It’s all about perceived speed for the user!

Listing 6.1. Style Sheets located at the bottom of the page

6.2. How the order of styles and scripts affects rendering

6.3. HTML5

6.4. A note on HTML5 browser support

6.5. HTML5 application cache

6.6. Summary