Many websites are loading full sets of font glyphs and weights they are not even
using. Web fonts can also present inconsistent performance due to the reliance on third party
servers for heavy font files. Try to limit your pages to 2-3 web fonts or use a
System
Font Stack for a
comfortable look to the user.
GZIP & JS/CSS Minified
GZIP is a powerful compressor for text files that can be configured in the web
server. Javascript and CSS files should be combined into one file and minified when served to
the user to reduce the impact of loading on the critical path. I suggest the tools UgilfyJS for Javascript and CSSO for CSS.
Implemented HTTP/2
HTTP/2 is the newest HTTP protocol, has good support across browsers, and makes
great improvements to load speed. Here
is a
guide for enabling HTTP/2 in Nginx.
Async & Defer Attributes Added
Tell the browser when to download and execute a script file so it doesn't block
any other resources. I like this
guide for showing what each of these script attributes does.
Resource Hinting Added
If you're using any 3rd party assets then you will have a DNS lookup attached,
both these and your own resources can block each other or be loaded out-of-order. Here is a guide for the various
values of the link attribute "rel" that tells the browser when and how to handle these
situations. This is the
W3Consortium document for Resource-Hints.
Cache Headers Set
Specify the [cache-control] header with a [max-age] directive in the web server to
avoid having the browser set poor default versions. This will provide huge performance savings
for users who see the same resources multiple times. Static assets with versioning should be
cached for as long as possible.
Consider Service Workers
Service
Workers will give you precise control over cache and allow the creation of an offline web
experience. Here are some
code examples.
Run Testing
My favorite tools are YellowLab.tools, webpagetest.org, and Lighthouse.
Make sure to test
in 4G, 3G, and Wi-Fi network environments as well as with popular devices.
SEO
Page-Specific Keywords Set
While less important than it used to be, keyword targeting is still one of the
most common suggestions towards improving SEO ranking.
Include the keyword or phrase in the:
URL - Make sure it's short and semantically clear
Title Tag - Include keyword or phrase in beginning, max 70 characters
Meta Description - Unique on every page, max 155 characters
H1 - One per page, less important to include keyword
Google Analytics & Google Search Console Setup
Google Analytics can help you target users and isolate problem areas for your
website. Philip Walton explains a GA
setup that he uses to "reap its full benefits". Remember to connect your Search Console
and Analytics! Note that Bing Webmaster Tools are more important for U.S. targeted sites.
XML Sitemap Created & Submitted
Tools such as XML-Sitemaps.com make
generating a sitemap simple. Submit a sitemap to all the search engines so they can more
intelligently crawl your website.
Robots.txt Created
A robots.txt
file instructs
robots which pages they can visit.
Scanned for Broken Links & Crawl Problems
Use a tool such as Screaming
Frog SEO Spider to crawl your website and evaluate various issues related to SEO.
Canonical Links Set
If applicable set a canonical link on each page using an absolute URL without
query strings. You should redirect traffic from www to non-www or vice-versa, lowercase, and
remove the trailing slash.
Rich Snippets & Structured Data Added
Structured
data allows search engines to better understand your HTML markup and generate rich snippets
for the results page. Rich
Snippets don't directly affect your ranking but make the results page much more
appealing and feature rich to possible visitors.
Facebook & Twitter Cards Created
Facebook's Open
Graph and Twitter's Cards allow you to
make social sharing much more appealing to people viewing the "share" on social media websites.
Both Facebook
and Twitter
have tools to preview and debug your cards.
Security
HTTPS Set Everywhere
HTTPS should be implemented not just on the login page as it is a prerequisite for
a number of other technologies in security and performance. Let's
Encrypt allows you to easily and freely create and manage a certificate. Make sure your
Cipher Suite is up to date and enable OCSP stapling on your web server. Test your page using
SSL Labs.
Security Headers Set
Taking the time to setup simple headers on your webserver will save you down the
road.
Test using: securityheaders.io
CSP header to
mitigate XSS and data injection attacks
When parsing input, remember to sanitize for data://, javascript://, and CRLF
characters. Never directly inject user content into responses or SQL
statements.
Password Hashes Stored in scrypt or bcrypt
bcrypt is much older than scrypt and has received more analysis and
implementations but many suggest that scrypt is faster and stronger.
Rate Limited Slower API paths
In order to protect yourself from Denial-of-Service attacks, implement a rate
limiter on API paths such as login or token generation.
Accessibility
Contrast Analyzed
Ensure that a contrast ratio
of at least 4.5:1 exists between text and background. This improves readability for a
majority of users and ensures the possibility of reading to a few. Here
is more explanation and some visual
indicators.
Keyboard Navigation Added
Make sure that the browser's keyboard shortcuts are not overwritten. Use the WAI-ARIA attributes which give semantic
information about the role, state, and property to assistive technologies.
Menus Analyzed
Use semantic markup and clear styling to convey the menu element and structure
that is consistent with every page. A usability tip is to ensure all pages are accessible
through three or fewer clicks from the homepage. Here
is a guide to creating
accessible menus.
Non-Textual Elements Have Alt Tags
Alt tags provide textual interpretation to visual elements. Make sure your alt
tags tell the content and function of the visual, are succinct, accurate, and do not use the
phrases "image of" or "graphic of".
Forms Analyzed
Here is a great guide
for accessibility on all different form elements. Forms should be navigable using the keyboard,
clear, and intuitive.
Allow easy and correct contact information so people can report bugs &
vulnerabilities. Limit the number of social media buttons to minimize requests and create more
focus.
Important links don't move (auto carousels or accordions)
Links not in navigation have title attribute
Created Favicon & App Icons
Use a service such as RealFaviconGenerator
to easily generate the many icons needed for various platforms. Test in development to ensure no
errors.
Created Custom 404 & Offline Pages
Create a custom 404.html page and an offline.html page and set them up on the web server to give
better feedback to the user.
Functionality
Made Compatible with Browsers & Platforms
Test on the major browsers such as Chrome, Firefox, Safari, IE/Edge, and Opera.
Utilize tools or libraries such as Modernizr to only use
features that
are available to the user.
Responsive Analysis Done
Responsive means that based on the width of the browser the CSS gives different
style rules while all the resources stay the same. The most common change is a mobile drop-down
menu. I use Chrome's device toolbar from within the
Developer Tools as well as Emmet
Re:view to test page view throughout development down to around 300px.
Inputs are Mobile Optimized
All relevant inputs have the type
attribute set for a better
user experience.