mas web performance and responsive web
Web performance and responsive web
Summary of web performance requirements, issues and techniques from Google: 2018 edition. gives a good introduction.
Other web resources on this site
- Unclassified resources
- Accessibility
- Cookies
- CSS
- Fonts and typography
- HTML
- Libraries and training
- Search optimisation
- Security
- Spam prevention
- SVG (Scalable Vector Graphics)
- URL shortening services
- Validation and testing
- Video
- Viewport
- Workflow
Image Compression and Optimisation
- Addy Osmani on automating image optimisation.
- Background removal toolremove.bg.
- Base 64 image encoder, free online service
- Base 64 --- to encode or not?, blog entry by David Calhoun
- butteraugli estimates the psychovisual similarity of two PNG images. Discussed in Reducing JPG File size by Colt McAnlis from . smlr by Jason Moo extends the functionality to comparing JPEGs.
- Chrome offers a range of Dev Tools. The development versions (Dev or Canary) offer the widest range. Even
these have additional tools that can be enabled by enabling chrome://flags option “enable dev tools
experiments” and then Dev Tools -> Settings -> Experiments. Even when this page has been reached,
additional options can be seen by then pressing shift six times. There is a performance analysis reference by Kayce Basques.
- Lighthouse is an open-source Chrome extension that works with Dev Tools to provide reports on Performance, PWA, Accessibility, SEO, and Best Practices.
- Client-side caching can eliminate network and server load and delays. There are, however, difficulties when balancing caching with currency. The blog post Caching best practices & max-age gotchas by Jake Archibald from gives an introduction.
- Chrome browser Page Speed extension recommended whether images in a page would benefit from compression and calculated the likely improvement. The Page Speed Chrome extension has been deprecated in favour of the web-based PageSpeed Insights. ngx_pagespeed is an Nginx module developed within Google for rewriting web pages to reduce latency and bandwidth.
- Compressor.io is an online compressor offering significant reduction in file size with minimal perceptual loss. It uses open source compressors including pngquant, OptiPNG, JpegOptim, Gifsicle and Scour.
- dssim gives a numerical or visual indication of the similarity between two PNG images.
- exiftool can strip metadata from images.
- Favicon online converter takes an image, for example PNG, JPEG, GIF or BMP, and produces a .ico file in a selection of sizes and bit depth.
- Guetzli by Google is a compressor that produces optimised JPG from unoptimised PNG and JPG images. It assumes the input file, a JPEG or PNG, has an sRGB colour profile and gamma of 2.2. The output image is non-progressive to minimise file size.
- Guide to optimizing images for SEO from WooRank by Greg Snow-Wasserman, on sitepoint.
- Image Beast is a lightweight script by Dean Hume for the service worker file. It selects and caches the best image format for the browser.
- ImageMagick is a suite of programs
powerful tools for image manipulation, including
convertandmogrifyfor resizing and compression. Dave Newton suggested settings for image optimisation with ImageMagick in an article for Smashing Magazine on . - ImageOptim is a widely-recommended image optimisation tool for Macs that uses PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle. The developers recommend Trimage image compressor (see below) for other platforms
- imgmin project by Ryan Flynn. Automates image compression using mean pixel error rate
- jpegoptim for JPEG compression. Can remove
EXIF data and optimise Huffman tables. Wrapper for libjpeg. Typical lossless usage:
jpegoptim --strip-all --all-progressive --stdout input.jpg > output.jpg
Typical lossy usage (75 is a quality level that provides acceptable compression for many images and is the value used by Google):
jpegoptim --max=75 --strip-all --all-progressive --stdout input.jpg > output.jpg - jpegrescan, a wrapper for jpegtran. The
latter attempts a single optimisation of the Huffman tables. jpegrescan runs jpegtran up to 100 times and so
may achieve further lossless optimisation. A typical run is
jpegrescan -q -s -i input.jpg output.jpg - Kraken.io image optimization services available as a limited free web-based service or as a subscription service. jpeg.io, powered by Kraken.io, converts many image file formats to an optimised progressive JPEG.
- Lepton is a lossless JPEG compressor developed at Dropbox. It is relatively slow but can make worthwhile savings when storing large numbers of rarely-accessed JPEGs. Linux Magazine has a report on Lepton in issue 194/2017.
- perceptual image compression at Flickr
- PNG online lossless optimiser.
- QR-code online generator.
- Squoosh is a web app from Google Chrome Labs that can interactively apply a range of compression methods and conversions at selected levels. Fast, free, and easy.
- svgomg by Jake Archibald reduces the size of SVG files and can optionally simplify and prettify the code.
- TinyPNG.com lossy compression for PNG images that preserves full alpha transparency
- Trimage is an MIT licensed tool, developed in Github, that uses python, python-qt4, optipng, pngcrush, advancecomp and jpegoptim. It is available in the Ubuntu repositories
- Webp from Google is a candidate image format to replace both PNG and JPEG. Potopea is a useful web-based image editor that is ideal for quick image edits or transferring between image formats, especially if the source file is PSD format. Jeremy Wagner wrote a post on for CSS-Tricks on using WebP images. It includes using node.js and imagemin to create the WebP files from PNG and JPG.
- Webp online converter from PNG or JPEG.
- Website Speed Test from Cloudinary checks the images on a page for optimisation and format.
- Zopfli is a lossless zlib-compatible DEFLATE
compression algorithm by Google for reducing the size of PNG images. It is slow but does reduce image sizes by
a worthwhile percentage. Using zopflipng, size 3% to 8% smaller
than PNGout is common and some report reductions closer to 20%. A
version is often in GNU/Linux repositories but using a build from the git repository (
make zopflipng) is easy. - ZorroSVG by Mario Klingemann converts PNG-24 to SVG with a considerable saving in size.
References and resources
- Velocity Conference 2014: Advanced Image Compression Techniques - Part 1 by Tobias Baldauf, Web Performance Solutions Architect at Akamai. (Session pre-requisites; Session slides). Note, too, his adept jpg compressor
Performance
- 10 things I learned making the fastest site in the world by David Gilbertson in December 2016. Includes implementing service workers.
- Accelerated Mobile Pages (AMP) Project supports a subset of web technologies in exchange for fast download of mobile pages. AMP-enabled pages can be cached by Google*rsquo;s cache. The site includes a series of AMP tutorials and templates. Kezz Bracey’s article AMP Project: Will it Make Your Sites Faster? goes into the details. David Attard’s article Taking AMP for a Spin on CSSTricks on includes performance comparisons.
- awesome-wpo, a curated list for Web Performance Optimization by Davidson Fellipe
- Cache control is important but many browsers do not fully implement the cache-control setting as it is sometimes wrongly set. Mozilla has propose Using Immutable Caching To Speed Up The Web.
- fastclick from ftlabs removes click delays on browsers with touch UI
- Font loading performance tips from Ollie Williams on CSS-Tricks in March 2018.
- Front-end checklist.
- GTMetrix.com analyses page performance using PageSpeed and YSlow. Paid accounts are available that offer a choice of test site and browser together with historical records, scheduled tests, alerts and API access.
- How we make RWD sites load fast as heck by Scott Jehl,
- Jank Free, “Let’s make the web silky smooth!
- HTTPS and performance
- The Cost of the S, a paper by David Naylor et al looking at the performance costs to various parties of adopting HTTPS. Presented at CoNEXT ’14 in
- Enabling HTTPS without sacrificing your web performance blog article by Billy Hoffman on moz.com,
- HTTPS and web performance article by Dean Hume in the PerfPlanet Advent performance calendar 2014
- Ilya Grigorik’s blog at igvita.com, his blog at perf.fail and his Google+ feed. He makes regular conference
appearance and Google videos, including
- Making web fonts fast(er)
- Is TLS Fast Yet? slides from a presentation at Velocity
- Making HTTPS Fast(er) slides from a presentation at Nginx.conf
- Images need suitable compression and optimisation. They also need suitable alt text and consideration of the action to take if the image cannot be rendered. Styling Broken Images by Ire Aderinokun, published , discusses improving the defaults for the latter.
- NGINX performance is discussed in Tuning NGINX for Better Performance, a codeship article from by Ben Cane. In particular it looks at testing performance, increasing the number of worker threads, worker connections and open file cache.
- nginxconfig.io provides recommended configurations from user-selected options.
- perf.rocks and perf-tooling.today are annotated lists of performance tools, articles and videos
- Minimizing Reflows and Repaints to improve performance by Craig Buckler,
- Nginx tuning of TLS settings is discussed by Hayden James in an article from June 2018.
- Performance Calendar 2014. Each Advent perfplanet.com presents a series of daily web performance tips and articles
- pingdom.com provide tests for page speed and DNS configuration. Free versions are available but the results are made public.
- Preconnect to reduce latency delay. This article by Ilya Grigorik from August 2015 sets out how <link rel="preconnect" href="…"> is used. It is supported by most recent browsers. It provides an optimisation hint that connecting to a web site (including DNS lookup, TCP and, where appropriate, TLS handshakes) in advance of a client request for a resource on that site will probably be worthwhile. There is also a summary of DNS prefetch, preconnect, preload, prerender and subresources by Robin Rendle, published on CSS-Tricks on
- Preload: What Is It Good For? a Smashing Magazine article by Yoav Weiss, .
- Siege for web performance testing. A sitepoint article by Zoran Antolovic, .
- SpeedTracker by Eduardo Bouças uses GitHub to build a Website Performance Monitor.
- Steve Souder’s blog. Steve is a published expert on website performance. Also, Cuzillion browser layout speed testing. In Steve gave a talk on Design+Performance at AngularU describing a process to bring design and performance together at the outset of a project to deliver a fast and rich website.
- Text compression is important in reducing the number of bytes transferred. This has to be balanced against
CPU, memory and time needed at both ends of the link to achieve the desired compression.
- Brotli is a recent compression algorithm from Google. It offers better compression than gzip for the same decompression effort. It is only available over HTTPS to avoid difficulties when endpoints support the protocol but intermediate devices may not. KeyCDN.com provides a test page to check whether a specified server supports brotli compression.
- varvy.com by Patrick Sexton provides free services to report on web page SEO, Mobile and Speed.
- Web browsers impact performance but many modern browsers can be given clues to help them improve their performance. An article by Chris Coyier on CSS-Tricks on gives some examples and references.
- Web performance advice and mistakes from 20 experts collected by keycdn.com .
Responsive Images
- Aspect ratio boxes by Chris Coyier on CSS-Tricks, 8 June 2017.
- automating resource selection with client hints by Ilya Grigorik,
- Multiple captions and alt with responsive images by Ian Devlin,
<picture>is not usually the right answer or don’t use picture most of the time, a blog entry by Jason Grigsby on cloudfour blog- Image aspect ratio control using CSS.
- ricg.io, the website of the RICG, Responsive Issues Community
group, previously known as the Responsive Images
Community Group, includes
srcsetandsizeswith or without<picture> - Responsive Images in CSS by Chris Coyier from overviews current solutions and some possible coming improvements.
- Responsive Images in Practice by Eric Portis on AListApart,
- sizersoze.org gives indication of savings to be achieved by using responsive images
Responsive Web Design
The design of a web page so that its content can be viewed by any client regardless of its screen dimensions or capabilities. This should incorporate
- progressive enhancement. The UK GDS Service
Manual advises
First, just make it work. Make any new page or feature work with HTML alone — no images, no CSS, no JavaScript, nothing but HTML. Interactive elements are only those capable of being implemented with forms and server-side processing. … Second, make it work better, …
- accessibility considerations
Resources
- Design a responsive site with sizing based on ems by Keith Grant.
- Grid by example by Rachel Andrew. Tutorials and videos on implementing Grid Layout.
- Resilient Web Design by Jeremy Keith. Ideas and approaches.
- Responsive CSS grids by Nick Salloum on sitepoint.com,
- Responsive Design Weekly by Justin Avery, as is responsivedesign.is
- Responsive email templates using Pulp from Glitchpack.
- Responsive navigation menus. Ten Codepen snippets by Jake Rocheleau.
- Web Fundamentals from Google includes a wide range of RWD issues