4.3 Compress Your Files
Every file will take up a certain amount of room on a server’s hard drive, and this data will need to be sent across the wire to each visitor. Doing so will consume resources, but by using compression algorithms you can shrink each file to make its journey less impactful.
Criteria
- Server-side Compression: If using a CMS, install an applicable plugin to enable on-the-fly server-side compression, such as Brotli or GZIP. Otherwise, use the provided server configuration files to include and tweak the performance-related features to the requirements.
- Media Compression: Compress your various images, fonts, audio, and video; by reducing the quality and offering different resolutions / dimensions (sizes) before uploading to a server or content management system.
Impact
High
Effort
Low
Benefits
- Social Equity:
Reduced reliance on a high-speed connection (which in many locations is unavailable). - Accessibility:
People with accessibility needs are disproportionately affected by poverty and lower levels of income and thereby are more likely to be unable to afford either a high speed or the high cost of data plans found on cellular networks and satellite providers. - Performance:
Reduced data consumption (with a slight increase in visitor CPU decompression with server-side techniques). - Economic:
Reduced data transfer allows for savings for individuals on a monitored data plan.
GRI
- materials: Low
- energy: Low
- water: Low
- emissions: Low
Example
- Code:
Accept-Encoding: zstd, gzip, br, deflate
- HTTP compression headers can be used to control the response.
Resources
- Apache Configuration: .htaccess
- Audacity
- Cost of living: Impact of rising costs on disabled people
- Digital Eco-Design
- Does GZIP Save CO2?
- Digital sustainability audits: a de facto standard for the Internet carbon footprint
- Fast Load Times: Optimize your images
- Front-End Performance 2021: Assets Optimizations
- [GPFEDS] 1.7 – Strategy (Encryption) (PDF)
- [GPFEDS] 6.3 – Front-End (Resource Compression) (PDF)
- Handbrake
- How to Optimize Images for Faster Load Times and Sustainability
- Impact of New and Emerging Internet Technologies on Climate Change and Human Rights (PDF)
- Internet Speeds by Country 2023
- Optimizing Encoding and Transfer Size of Text-Based Assets
- Reduce web font size
- Responsive images
- Should I Use A Carousel
- Squoosh
- Supercharge compression efficiency with shared dictionaries
- SVG OMG
- Ten years of page bloat: What have we learned?
- The Carbon Impact of Web Standards (PDF)
- The Ultimate Guide to Image Optimisation
- Web Almanac: Sustainability
- Website carbon emissions
- What Does My Site Cost?
- What is page bloat?
- Who Killed My Battery: Analyzing Mobile Browser Energy Consumption (PDF)