Understanding Low Bandwith and High Latency
- introduce tools to emulate network
- Use timeouts to handle intermittent connectivity
Optimizing Content Efficiency
Eliminating Unnecessary Downloads
TL;DR
- Inventory your own assets and third-party assests on your pages.
- Measure the performance of each asset:its value and its technical performance
- Determine if the resources are providing sufficient value
Eliminate unnecessary resources from application.
- you've always included resource x on your pages,but doest the cost of downloading and displaying it offset the value it delivers to the user? Can you measure and prove its value?
- Does the resource(especially if it's a third-party resource) deliver consistent performance?Is that resource in the critical path,or need to be?If the rescource is in the critical path,could it be a single point of failure for the site?That is,if the resource is unavailable,does it affect performance and the user experience of your page?
- Does this resource need or have an SLA?Does this resource follow performance best practices:compression,caching,and so on.
Too often,pages contain resources that are unnecessary,or worse,that hinder page performance without delivering much value to the visitor or to the site they're hosted on.This applies equally to first-party and third-party resources and widgets.
Optimizing Encoding and Transfer Size of Text-Based Assets
1. Data compression 101
TL;DR:
- Compression is the process of encoding information using fewer bits.
- Eliminating unnecessary data always yields the best results.
- There are many different compression techniques and algorithms.
- You will need a varity of techniques to achieve the best compression.
2. Minification:preprocessing & context-specific optimizations
TL;DR:
- Content-specific optimizations can significantly reduce the size of delivered resources.
- Content-specific optimizations are best applied as part of your build/release cycle.
3. Text compression with GZIP
TL;DR:
- GZIP performs best on text-based assets:CSS,JavaScript,HTML
- All modern browsers support GZIP compression and will automatically request it.
- Your server must be configured to enable GZIP compression.
- Some CDNs require special care to ensure that GZIP is enabled.
- Apply content-specific optimizations first: CSS, JS, and HTML minifiers.
- Apply GZIP to compress the minified output.
Enabling GZIP is one of the simplest and highest-payoff optimizations to implement, and yet, many people don't implement it. Most web servers compress content on your behalf, and you just need to verify that the server is correctly configured to compress all the content types that benefit from GZIP compression.
A quick and simple way to see GZIP in action is to open Chrome DevTools and inspect the “Size / Content” column in the Network panel: “Size” indicates the transfer size of the asset, and “Content” the uncompressed size of the asset.
Image Optimization
Eliminating and replacing images
TL;DR:
- Eliminate unnecessary image resources
- Leverage CSS3 effects where possible
- Use web fonts instead of encoding text in images
Vector vs. Raster images
TL;DR：
- Vector images are ideal for iamges that consists of geometric shapes
- Vector images are zoom and resolution-independent
- Raster images shoud be used of complex scenes with lots of irregular shapes and details
Implications of high-resolution screens
TL;DR
- High resolution screens have multiple device pixels per css pixel
- High resolution images require significantly higher number of pixels and bytes
- Image optimization techniques are the same regardless of resolution
prefer vector images wherever possible.
if a raster image is required,deliver and optimize multiple variants of each imagewith of help of srcset and picture.
Optimizing vector images
TL;DR
- SVG is an XML-based image format
- SVG files shoud be minified to reduce their size (tool:svgo)
- SVG files to compressed with GZIP
Optimizing raster images
TL;DR
- A raster images is a grid of pixels
- Each pixel encodes color and transparency information
- Image compressors use a variety of techniques to reduce the number of required bits per pixel to reduce file size of the image
Lossless vs loosy image compression
TL;DR
- Due to how our eyes work,images are great candidates for lossy compression
- Image optimization is a function of lossy and lossless compression
- Differences in image formats are due to the difference in how and which lossy and lossless algorithms are used to optimize the images
- There is no single best format or "quality setting" for all images:each combination of particular compressor and image contents produce a unique output
Selecting the right image format
TL;DR
- Start by selecting the right universal format:gif,png,jepg
- Experiment and select the best settings for each format:quality,palette size,etc
- Consider adding WebP and JPEG XR assets for modern clients
1. Do you need animation? If so, GIF is the only universal choice
1. Do you need to preserve fine detail with highest resolution? Use PNG.
1. Are you optimizing a photo,screenshot,or a similar image asset? Use JPEG.
WebP and JPEG XR :
- Some CDNS provide image optimization as a service,including JPEG XR and WebP delivery.
- Some open-source tools(for example,PageSpeed for Apache or Nginx) automate the optimization,conversation,and serving of approriate assets.
- You can add additional application logic to detect the client,check which formats they support,and serve the best availlable image format.
Tools and parameter turning
- gifsicle:create and optimize GIF images
- jpegtran:optimize JPEG images
- optipng:lossless PNG optimization
- pngquant:lossy PNG optimization
Deliver scaled image assets
TL;DR
- Deliver scaled assets is one of the simplest and most effective optimizations
- Pay close attention to large assets as they result in high overhead
- Reduce the number of unnecessary pixels by scaling your images to their display size
Image optimization boils down to two criteria: optimizing the number of bytes used to encode each image pixel, and optimizing the total number of pixels: the filesize of the image is simply the total number of pixels times the number of bytes used to encode each pixel. Nothing more, nothing less.
As a result, one of the simplest and most effective image optimization techniques is to ensure that we are not shipping any more pixels than needed to display the asset at its intended size in the browser. Sounds simple, right? Unfortunately, most pages fail this test for many of their image assets: typically, they ship larger assets and rely on the browser to rescale them - which also consumes extra CPU resources - and display them at a lower resolution.
**you should ensure that the number of unnecessary pixels is minimal, and that your large assets in particular are delivered as close as possible to their display size.**
Image optimization checklist
- __Prefer vector formats__
- __Minify and compress SVG assets__
- __Pick best raster image format__
- __Experiment with optimal quality settings for raster formats__
- __Remove unnecessary image metadata__
- __Serve scaled images__
- __Automate__:invest into automated tools and infrastructure that will ensure that all of your image assets are always optimized