The height and width attributes of the element should match the pixel dimensions of the graphic, or the graphic should be resized to match the height and width set in the HTML. If a graphic is bigger than the assigned image attributes, you’re showing the user less than they are downloading. If the graphic is smaller than what is assigned, then the image will scale up and look pixelated. In any case, when web browsers resize images, it does not look ideal.

Font files can be very large — commonly 1MB. If your custom font does not compress well, and you do not use it much on your site, you might decide it’s not worth slowing down your page. For example, if you use a bold version of a font in only one place, consider if the cost of loading it is worth it.

Some external services can help with managing font file size sizes, and may possibly serve cached fonts. Two to consider are Google Web Fonts and Typekit.

It is not a good idea to load a custom font to make your logo — it is much more efficient to use a graphic instead. Also, you can’t really control how or if a web font is displayed.

You don’t want users staring at a white screen. Confirm that Start Render time is within 2.01 seconds. (Please remind me to justify this number I am now offering as a rule of thumb with no explanation.)

WebPageTest.org can tell you Start Render time as well as a lot of other useful information. Waterfall charts — which WebPageTest.org will generate for you — indicate Start Render time as a first vertical line, usually blue.

If Start Render time is greater than two seconds, you will need to optimize.

If a class name you have selected is very similar to an HTML element name, this often indicates that your HTML can be more semantic. Use <footer>I am a footer</footer>¬†instead of <div class=”footer”>I am a footer</div>.

Code such as <h1 class=”largeHeading”>Title</h1> is redundant since h1 means “largeHeading.” A preferable class name would be more specific and indicate how the heading is used. For example,¬†<h1 class=”masthead”>Title</h1>, would indicate both how and where the class is used.