GZip works best for text-based content, while providing little to no byte shrinkage on previously-compressed assets. SVG is a text-based image format. Minifying and GZipping SVG image and font files can greatly reduce their SVG file size. Minify first. Then Gzip.
Remove Image Metadata
Cameras and software often add metadata to images that is not seen by the web user. This metadata can actually be a security risk by exposing geographical data. There’s free software that will strip EXIF metadata from multiple images at a time.
Resize Images
Serve the smallest image file for the screen size and resolution.
Serve the smallest image size for the screen size and resolution. Images, no matter the size, should be compressed as much as possible without noticeably degrading the quality. Image compression programs include ImageOptim and ImageAlpha for pngs. Can be automated with machine learning with SmartVision.
Use the Right Image Format
Image types include SVG, GIF, JPEG, PNG, and WebP.
GIF: Palette of less than 256 colors, like a comic, for transparency and for low quality animation
SVG: Better than GIFS: Scalable, Animatable, unlimited color pallette
PNG: When you need transparency and have more than 256 colors.
JPEG: raster images
JPEG with a CSS mask: when you need transparency on a raster image and PNG-24 file size is huge
WebP: Animation, transparency, and great resolution with small file size, but only supported in Blink. Test WebP
JPEG-XR: For Edge
Reduce the Number of Images
Reduce HTTP requests with sprites. Also, consider reducing actual number of images your page requires: is your image worth 1,000 words or does your site work better without it?
Leverage CSS
Leverage CSS to reduce image size and number of images:
Image Masking: use image masking when you need a “transparent JPEG” without PNG-24 file size
CSS Effects: gradients, borders, outlines, rounded corners, shadows, etc. Create resolution-independent effects with minifiable & gZippable text
Sprites: until HTTP/2 is fully supported use image sprites and background-position to reduce number of requests
Animation: when animating GIFs, consider CSS animation using the steps() timing function and sprites as an alternative
Filters: use CSS filter effects instead of multiple versions of the same image if you want filters applied: save bytes, HTTP requests and time
Media Queries: Use media queries to serve hi-res images to hi-res devices
Note: Include an alt attribute on all foreground images, with empty alt attribute for decorative images.
Include caching headers for all requests with a future date so previously fetched responses can be reused instead of refetched.
Specify a cache validator
Specify a Last-Modified or ETag header to enable cache validation. ETags provide revalidation tokens automatically sent by client to check if there are file changes since last requested.
Minify CSS, JS & HTML
Removing unnecessary whitespace saves bandwidth
Defer parsing of JavaScript
inlcude async attribute in your <script> tags so client can continue downloading assets instead of waiting as scripts are downloaded, parsed and excecuted.
Optimize images
Choose best format and compression on a per image basis include: type of data being encoded, image format capabilities, quality settings, resolution, and more. Leverage SVG and CSS. See previous page.
Specify a character set
Including a content-type header, such as Content-Type: text/html; charset=UTF-8 reduces browser processing. Can start parsing HTML immediately when it knows which character set it has.
Remove query strings from static resources
Resources with a "?" in the URL are not cached by some proxy caching servers
Specify a Vary: Accept-Encoding header
In case client doesn't support compression, tells proxy server to store both compressed and uncompressed versions.
Avoid CSS @import
Only starts downing imported file once encountered rather than in parallel.
Avoid a character set in the meta tag
Better to include it in HTTP Content-Type header (IE8 rule)
Avoid bad requests
404 and 410 errors waste time. If requests are for blocking resources, it becomes a more serious problem.
Avoid landing page redirects
If your site requires redirects, do them server-side not client side, to reduce round trip requests. Removing HTTP redirects removes extra round trips.
Combine images into CSS sprites
Enable Keep-Alive
HTTP persistent connections allows a TCP connection to send and receive multiple HTTP requests, reducing latency for subsequent requests.
Enable compression
GZip!
Inline Small CSS & JS
Minimize redirects
Minimizing redirects removes additional RTTs and wait time for users.
Optimize the order of styles and scripts
Prefer asynchronous resources
Many JS libraries and frameworks were originally written as synchronous scripts, but now have asynchronous versions. Use the asynchronous versions.
Put CSS in the document head
Serve resources from a consistent URL
Serve scaled images
Properly sized images saves bandwidth.
Specify image dimensions
Enables rendering page before images are downloaded. Without proper dimensions, browser will need to reflow and repaint upon image downloaded.
Optimize pages to display well on mobile devices by including a meta viewport in the head of the document specifying width=device-width, initial-scale=1.
Scrolling websites vertically is Okay, but horizontally creates poor user experience. Use media queries and vh, vw and percents for width.
Size tap targets appropriately
Set a minimum tap target size of of 48 CSS pixels on a site with a properly-set mobile viewport. Make important tap targets large enough to be easy to press, ensuring there is extra spacing between smaller tap targets.
Provide equivalent alternatives to auditory and visual content
Don’t rely on color alone
Use markup (HTML) and style sheets (CSS), and do so properly
Clarify natural language usage
Create tables that transform gracefully
Ensure that pages featuring new technologies transform gracefully
Ensure user control of time sensitive content changes
Ensure direct accessibility of embedded user interfaces
Design for device independence
User interim solutions
Use W3C technologies and guidelines
Provide context and orientation information
Provide clear navigation mechanisms
Ensure that documents are clear and simple
WCAG 2.0 (2008)
Perceivable: Content & UI components
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
Time-based media: Provide alternatives for time-based media.
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
Make it easier for users to see and hear content including separating foreground from background.
Operable: UI and Nav
Make all functionality available from a keyboard.
Provide users enough time to read and use content.
Do not design content in a way that is known to cause seizures.
Provide ways to help users navigate, find content, and determine where they are.
Understandable:
Information & operation of UI
Make text content readable and understandable.
Make web pages appear and operate in predictable ways.
Help users avoid and correct mistakes.
Robust:
Content interprable by UAs, including AT.
Maximize compatibility with current and future user agents, including assistive technologies.
Consider Reading Order The reading order should be the same as the visual order.
Provide Good Contrast Be especially careful with light shades of gray, orange, and yellow. Check your contrast levels with our color contrast checker.
Use True Text Whenever Possible True text enlarges better, loads faster, and is easier to translate. Use CSS to add visual style.
Watch the Use of CAPS All caps can be difficult to read and can be read incorrectly by screen readers.
Use Adequate Font Size Font size can vary based on the font chosen, but 10 point is usually a minimum.
Remember Line Length Don't make it too long or too short.
Make Sure Links are Recognizable Differentiate links in the body of the page with underlines or something other than color alone.
Design Link Focus Indicators Ensure keyboard users can visually identify a focused link. Use the standard dotted line or other non-color designators.
Design a "Skip to Main Content" Link A link for keyboard users to skip navigation should be at the top of the page. It can be hidden, but should be visible when it receives keyboard focus.
Ensure Link Text Makes Sense on Its Own Avoid "Click Here" in link text. Other ambiguous links, such as "More" or "Continue", can also be confusing.
Motion and sound: Use Animation, Video, and Audio Carefully If used, provide a play/pause button. Avoid flashing or strobing content: It can cause seizures.
Don't Rely on Color Alone Because users often can't distinguish or may override page colors, color cannot be the only way information is conveyed.
Design Accessible Form Controls Ensure form controls have descriptive labels and instructions. Pay close attention to form validation errors and recovery mechanisms.
