Web Development Checklist
This checklist is to be used once development begins, during development, and routinely while a site is maintained.
| Checklist Item | Categories | Importance | Automated | |
|---|---|---|---|---|
| 1. | Assets are gzipped
gzipping assets is one of the simplest and most effective things you can do to make your web site faster. gzip compresses text files especially well. Taking a 2MB JavaScript file as an example, it compressed down to 463K — that’s around 80% savings! However, file size savings with gzip are variable because of the way gzip compression works. It uses an algorithm which replaces repeated occurrences of data with references. Therefore the more text you have repeated in the file, the more file size savings gzip will give you. (This is not an excuse to copy and paste a bunch of code!) For text files we are sending over networks, gzip is a big win and a no-brainer. However, images and other binary files should already be aggressively compressed, and you usually won’t benefit from gzipping them. In fact, binary files can increase a tiny bit in size because of added gzip headers. See this post for more details. |
Performance | Highest | |
| 2. | CSS is linked first in <head> | CSS, Performance | Highest | |
| 3. | Site has no broken links | Automated, Content, HTML | Highest | ✔ |
| 4. | JavaScript files are concatenated and served singly
This should be done to reduce HTTP requests. Also, if scripts are included in concatenating them is key, because multiple scripts have a blocking behavior. |
JavaScript, Performance | High | |
| 5. | Inline scripting and styling is made external
There are edge cases where you may be justified inlining JavaScript and styles, but in most cases it should be avoided. Extract and move JavaScript and styles into external files. |
CSS, JavaScript, Performance | High | |
| 6. | Expires headers are used advantageously
If a component is rarely updated, leverage browser caching. |
Performance | High | |
| 7. | Start Render time is under two seconds
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. |
Mobile, Performance | High | |
| 8. | Character set declared
The HTML5 character set is very elegant: . Failing to include a character set is a security risk. While this is important, it is uncommon to forget it. |
Content, Security, Uncommon, Validation | High | |
| 9. | Specific HTML5 input types are used
This is especially important for mobile devices that show customized keypads and widgets for different types. |
HTML5, Mobile, Validation | High | |
| 10. | Images are used as sparingly as possible
Images are HTTP requests that slow down rendering and should be minimized. Unless your HTML document is something as primitive as an HTML email, images should not be used for layout. Replace corners, single pixel spacer gifs, shadows, gradients…etc. with CSS3. Very complicated and detailed patterns can be created with CSS. If the images cannot be replaced with CSS — that is, if it absolutely must be a graphic — collect images into image sprites or consider using using a font face as a library of icons. |
Content, CSS, Performance | High | |
| 11. | JavaScript is included at the bottom of the page
There is a habit of putting script elements in the head of HTML documents, but scripts usually do not need to be loaded first, and they block content rendering. Whenever possible include JavaScript at the bottom of the page. |
HTML | High | |
| 12. | HTML is properly semantic
This is an important and loaded checklist item. If the site is HTML5 (first line is <!DOCTYPE html>), tags like <header>, <footer> and <nav> should be used. Menu items should be marked up as an ordered list. Common things that should be avoided are using the <br> tag for formatting, using <b> when you mean <strong>, or worse, using <b> when the content is a heading. |
HTML | High | |
| 13. | A label element is associated with each form input
Guidance from 456 Berea Street, Use the label element to make your HTML forms accessible:
|
Accessibility, HTML | Medium | |
| 14. | CSS @import is avoided
Include external css files with <link> instead of @import, directly after the open <head> tag: <head><link href=’/css/styles.css’ rel=’stylesheet’ />… |
CSS, Performance | Medium | |
| 15. | CSS files are concatenated and served singly
This should be done to reduce HTTP requests. |
CSS, Performance | Medium | |
| 16. | Flash content has HTML5 fallback
iOS does not support Flash. If you want your site to work on mobile devices, replace Flash with HTML5 or at least include an HTML5 fallback to support that ever-growing group of users. |
Content, HTML5, Mobile, SEO | Medium | |
| 17. | Single pages are smaller than 500K
It’s true that the average web site’s size has surpassed 1MB. But it is also true that most web sites are excruciatingly slow and unusable on mobile — mobile being the future of web browsing. Be among the best. Keep your pages smaller than 500K. |
Mobile, Performance, SEO | Medium | |
| 18. | Google Library APIs are used when possible
To benefit from common scripts cached by browsers, you should use the Google Library APIs whenever possible. As an example, over 85% of sites use JQuery, and this 20K-ish script does not need to be re-downloaded for every single site. However, always have a local fallback when linking external scripts that may be included locally. |
JavaScript, Performance | Medium | |
| 19. | All images have height and width set
Height and width are not officially required attributes for <img>. However, including them guarantees faster content download. That information also helps the browser determine the viewport space for the image, making page rendering visually smoother. |
HTML, Performance | Medium | |
| 20. | Element-level styles are minimized
While you may have a good reason to write styles inline using the “style” attribute, generally it is not a good practice. In this case styles are not reusable, too specific, and the code becomes bloated and difficult to maintain. We suggest identifying common styles and including them with a style sheet. |
CSS, HTML | Medium | |
| 21. | Analytics software is monitoring site
Google Analytics or some other web analytics software should be included and used. The priority of this item depends on the type of site, but it is essential for most. |
Optimization, SEO | Medium | |
| 22. | PNGs are used instead of GIFs
PNG image format was created to improve upon and replace GIF images; they compress better in most cases.* Additionally, there are patent issues around using GIFs. We suggest PNG-8 for non-transparent images, PNG-24 for transparent images, JPEG for photos, and GIF for animated web graphics. *An image would need to be very small for GIF to be the better choice. |
Content, Optimization | Medium | |
| 23. | Site is HTML5, the evolving standard
If this is a site under development, versus a retired page of content, confirm it is an HTML5 page, using the HTML5 doctype: <!DOCTYPE html> |
HTML5 | Medium | |
| 24. | Content prints well or a print style sheet is included | Content, CSS | Medium | |
| 25. | CSS reset is used
CSS resets remove inconsistent default styling, making all browsers style page elements the same way. If you want to achieve a predictable look across browsers, and save time testing and tweaking, we suggest using a CSS reset. Here’s a collection of css reset options. |
CSS | Medium | |
| 26. | <noscript> is included on pages that do not work without JavaScript
|
Accessibility, HTML, JavaScript | Low | |
| 27. | Ajax is cached | Performance | Low | |
| 28. | ETags are configured | Performance | Low | |
| 29. | CSS expressions are not used
It’s unlikely your code has this boogeyman. However, if your front-end code is from 2005, you might want to check under the bed for it. I’m not going to explain why it should not be used because I don’t even remember. |
CSS, Performance, Uncommon | Low | |
| 30. | Site has no duplicated code
Are external scripts and CSS files included more than once? JavaScript does not have overloaded functions; one function name, one function. Remove duplicate functions as well as any re-declared CSS. |
CSS, JavaScript, Optimization | Low | |
| 31. | Pages do not have avoidable redirects
A redirect might make a URL such as http://treefrogs.com into http://www.treefrogs.com or http://treefrogs.com/ (simply adding the forward slash). Redirects slow down web sites, so remove any redirects that are not required. |
Performance | Low | |
| 32. | All elements have correct cursor on hover
If something is clickable it should be styled with cursor: pointer so that the user knows they can click on it. An element does not have the proper cursor by default when you make something active with JavaScript and jQuery, and so this is a very common issue. |
CSS, HTML | Low | |
| 33. | IDs are unique to a page
IDs must be unique to an HTML document. |
Automated, HTML, JavaScript, Validation | Low | ✔ |
| 34. | JavaScript files are minified
We recommend that JavaScript files larger than 5K have whitespace removed. Search “minify JavaScript.” |
JavaScript, Optimization | Low | |
| 35. | CSS files are minified
We recommend that CSS files larger than 5K have whitespace removed. Search “minify CSS.” |
CSS, Optimization | Low | |
| 36. | Custom fonts are lightweight and justified
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. |
CSS, Optimization | Low | |
| 37. | No class attribute values resemble HTML element names
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. |
Automated, HTML, SEO | Low | ✔ |
| 38. | All images have alt tag values
Missing the alt attribute for an image may seem like a small thing, but it is important for accessibility and it is required. |
Accessibility, Automated, SEO | Low | ✔ |
| 39. | !important is avoided | CSS | Low | |
| 40. | Avoid using images that have text content
That is, don’t create graphics of text that your users will read. Images make pages slow; by using them you are adding http requests and files that need to be downloaded. Avoid using graphics for menu list items, for example. Logos that include text are the exception to this rule because the rendering of a logo needs to be precise for branding. The FrontendTest logo is a graphic, for example. |
Content, Optimization, SEO | Low | |
| 41. | document.write() is avoided | JavaScript, Performance | Low | |
| 42. | Legacy XHTML close tags are removed
They are harmless, but if you’d like to reduce and clean up your code a bit, you can remove XHTML close tags (” />”) from elements. |
HTML5, Optimization | Lowest |