Process HTML

It's likely you'll need some kind of HTML processing to turn templates, layouts, partials, and data into full HTML documents you can use.

Principles

Commit only authored files to the repo
Minify production code

Relevant Tools

With Static Site Generators like Eleventy, Jekyll, and Hugo you handle this rather directly.
With JavaScript Framework Site Generators like Gatsby, Next, Nuxt, VuePress, and Gridsome, the HTML is created as part of piecing together components.

Process CSS

It's likely you'll use some kind of CSS processing on a site.

This site will assume a Sass setup, but it could be all PostCSS, or Stylus and Autoprefixer, Tailwind and PurgeCSS and cssnano, etc.

Principles

Lint & Prettify authored files
Commit only authored files to repo
Concatenate & minify production code
Create sourcemaps

Relevant Tools

Linting: Stylelint
Code Formatting: Prettier
Preprocessors: Sass, Less, and Stylus.
Preprocessors meant to run last like PostCSS/Autoprefixer
Minifiers: cssnano, clean-css, uglifycss, csso, or node-minify.
Unused CSS removers: PurgeCSS, PurifyCSS

Process JavaScript

You may want to preprocess your JavaScript, allowing for use of modern features that may not be supported in as many browsers as you'd like to support. But you may also want to split up your authored JavaScript for readability.

Principals

Only commit authored files to repo
Concatenate & minify production code
Create sourcemaps
Code splitting (only load what is needed at the time)
Tree shaking (remove unused code)

Relevant Tools

Linting: ESLint
Code Formatting: Prettier
Preprocessor: Babel
Bundlers like Rollup, Parcel, and webpack.
Post-install Snowpack.

Optimize Images

Images are often the heaviest assets on any website, and are notoriously served under optimized, despite the fact that optimizing images isn't particularly difficult. Beyond optimization, serving the correct size and format image for the circumstance can go a long way.

Principals

Keep the highest quality images around (but not in repo itself)
Optimize every single production image
Use responsive image syntax in the HTML
Lazy loading
Serve the best image formats that are supported (e.g. create and serve .webp when possible)
Use muted, autoplaying, looping <video> instead of GIFs

Relevant Tools

Optimizing raster images: sharp or imagemin
Optimizing SVG images: svgo for .svg
APIs: Imgix ImageOptim
Image hosting + API: Cloudinary

Run Unit Tests

Make sure your JavaScript is doing what you wrote it to do, by writing unit tests and making sure those tests pass.

Principals

Run your unit tests on every commit
Don't deploy Pull/Merge requests if the tests fail
Notifications for failures

Relevant Tools

Testing frameworks: Jest, Mocha, Karma, AVA, Jasmine, Tape
Assertion libraries: Chai

Run End-to-End Tests

Make sure your website is doing all the important things it should be doing. End-to-end tests are great for testing whole usage flows like visiting a URL, clicking a button, and making sure a certain modal is open with the correct text in it. Or going through a sign up process.

Principals

Run your end-to-end tests on every commit
Notifications for failures

Relevant Tools

Testing frameworks: Cypress, jest-puppeteer, WebdriverIO, TestCafe, Nightwatch.js
Browser automation: Puppeteer, Selenium, Playwright, SlimerJS

Run Accessibility Tests

You should prevent yourself from shipping any easily preventable and detectable accessibility problems by running automated accessibility testing tools.

Principals

Run your accessibility tests on every commit
Notifications for failures

Relevant Tools

Accessibility Testing Tools: Axe, pA11y, accessibilityjs, Tenon.io

Run Visual Regression Tests

Prevent yourself from making unwanted visual changes to a site by comparing screenshots and ensuring that the changes you made are the changes you want.

Principals

Run your visual regression tests on pull requests coming into Master.
Notifications for failures

Relevant Tools

Visual Regression Testing Services: Percy, Chromatic, diff.io, Axcept, Applitools
Visual Regression Frameworks: BackstopJS, Wraith (Pair with Spectre)

Test Against Performance Budget

Make sure your website doesn't regress in performance by testing all changes against your established performance budget.

Principals

Run your performance tests on every commit
Notifications for exceeding budget

Relevant Tools

Hosted services: SpeedCurve (CLI) and Calibre (CLI)
Frameworks: Build Tracker

Build a sitemap

If your site is large/complex (over 500 pages), search engines like Google suggest a sitemap so they can more intelligently crawl your site.

Principals

Produce sitemap files only for production
Check for broken links

Relevant Tools

Something that makes site maps
broken-link-checker

Send Notifications

Principals

When important things happen in a build process, notify the right people.

Relevant Tools

Slack, Discord
Email sending APIs like Sparkpost, Mailgun, etc.
SMS sending APIs like Twilio