Estelle Weyl

www.standardista.com
www.instartlogic.com/blog

@webdevtips
@estellevw
@standardista

\

GZip

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.

• <picture> element
• srcset attribute
• load small background images in CSS Internet Explorer, consider using Picturefill or JS-free Clown Car Technique.
• Serve scaled images. Resizing images means downloading unneeded pixels and take longer to decode and paint.

Optimize Images

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.

Minimize request size

GZip all requests.

Leverage browser caching.

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.

Avoid plugins

Configure the viewport

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.

<meta name=viewport content="width=device-width, initial-scale=1">

Size content to viewport

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.

Use legible font sizes

Estelle Weyl

www.standardista.com
www.instartlogic.com/blog

@webdevtips
@estellevw
@standardista