Search Suggest

Web Launch Checklist

31 min read

Web Launch Checklist



0/X








Performance






  • Images Optimized




    • Compress all your images using either web processors such as Optimizilla.com and Compressor.io, or
      desktop apps such as FileOptimizer and ImageOptim.

    • Generate the exact image size for each element instead of resizing it with CSS/HTML as this can be a heavy process for the browser to perform.

    • Utilize Image
      Sprites
      to save on HTTP requests and bandwidth.






  • Reduced Page Weight & Requests



    Here are some tips to keep your page weight under 2MB and 50 requests:

    • Limit 3rd party libraries & scripts

    • Load resources & requests asynchronously

    • Consider a CDN for static assets & pages






  • Limited Web Font Usage



    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
    Also read :DNS prfetch



    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

    • CSRF token to prevent cross site request forgery.

    • X-Frame-Options header to protect against click-jacking

    • X-XSS-Protection header to mitigate XSS attacks

    • Use HSTS responses to force TLS only access. Redirect all HTTP request to HTTPS on the server as backup

    • Cookies should be scoped by path and domain as well as utilize HttpOnly,
      SameSite, and Secure
      attributes






  • Sanitized & Limited User Input/Parameters



    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. href="https://www.w3.org/WAI/tutorials/menus/">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.






Content






  • Checked Spelling & Readability


    Remove all placeholder text and images. Split up your text into small paragraphs with a line length of 50-75
    characters. Test using WebpageFX's
    Readability Test Tool
    .




  • Contact Details & Social Media Reviewed



    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.




  • Links Analyzed





    • Links are descriptive and appear "clickable"

    • External links use the rel="noopener" attribute

    • 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.









Item Reviewed: Web Launch Checklist Description: Rating: 4.7 Reviewed By:

Post a Comment

Blog Archive / Click to See All Posts

Everyone Needs Everything!