This web ecodesign reference content has been published by Frédéric Bordage / GreenIT.fr at Eyrolles under the name:
- “écoconception web : les 100 bonnes pratiques” in 10/2012
- “écoconception web : les 115 bonnes pratiques, 2ème édition” in 09/2015
- “écoconception web : les 115 bonnes pratiques, 3ème édition” in 04/2019
- “écoconception web : les 115 bonnes pratiques, 4ème édition” in 05/2022
We would like to express our sincere thanks to all the contributors who took part in the development and evolution of this repository.
Given the continuous evolution of the web, this repository needs to be regularly updated. Any proposal or idea for improvement, modification, or removal is welcome.
Please read the contributor's guide.
To simplify your searches, don't forget to use the available filters on the discussions page.
- ♾️ List of all discussions
- ➕ List of discussions for adding BP
- 📝 List of discussions for modifying BP
- ✖️ List of discussions about BP removal
- Eliminate non-essential features
- Accurately quantify the dimensions of features and components
- Optimize the user journey
- Avoid autocomplete in favor of other techniques to facilitate user input
- Prefer a simple, clean design, adapted to the web
- Use the « mobile first» strategy and/or consider Adaptive loading
- Respect the Back/Forward cache
- Use an asynchronous process when possible
- Limit the number of HTTP requests
- Store static data locally
- Prefer a custom solution over a CMS
- Prefer static web pages
- Create a modular application architecture
- Choose the most appropriate technologies
- Use performance-oriented application forks
- Choose appropriate data formats
- Reduce the number of domains serving resources
- Replace official social networks share buttons
- Divide CSS
- Limit the number of CSS
- Use CSS instead of images
- Write efficient CSS selectors
- Group similar CSS declarations
- Use shortened CSS notations
- Provide a print CSS
- Prefer standard fonts
- Prefer glyphs over images
- Validate pages with W3C tools
- Externalize CSS and Javascript
- Avoid resizing images in the browser
- Avoid using raster images for the interface
- Optimize vector images
- Use lazy loading
- Use partial content reloading
- Avoid JavaScript / CSS animations
- Only use essential parts of Javascript libraries and CSS frameworks
- Avoid modifications during DOM traversal
- Hide DOM elements while they are being modified
- Minimize repaint (appearence) and reflow (layout)
- Use event delegation
- Modify several CSS properties at once
- Validate your code with a Linter
- Cache frequently accessed objects in Javascript
- Reduce DOM access via JavaScript
- Use all levels of CMS cache
- Optimize and generate media before importing them in a CMS
- Encode audio files outside of the CMS
- Cache often-used computed Data
- Remove all warnings and notices
- Avoid performing SQL queries inside a loop
- Avoid opening database connections when not necessary
- Optimize database queries
- Avoid transferring large amounts of data for processing tasks
- Minify CSS, JavaScript, HTML, and SVG files
- Compress CSS, Javascript, HTML and SVG files
- Combine CSS and JavaScript files
- Optimize images
- Optimize cookies size
- Use HSTS Preload list over 301 redirects
- Have an end of life strategy for the website
- Choose an eco-friendly web-host
- Choose an eco-friendly electricity provider
- Adapt service quality and availability level
- Use virtualized servers
- Optimize Server Energy Efficiency
- Install the bare minimum on the servers
- Put the whole caches in RAM (opcode and kvs)
- Store data in the cloud
- Host resources (CSS/JS) on a cookie-free domain
- Avoid redirects
- Display static error pages
- Use asynchronous servers
- Use a CDN
- Use a HTTP cache
- Add Expires or Cache-Control headers
- Cache Ajax responses
- Reduce server logs as much as possible
- Disable Apache DNS lookup
- Apache Vhost : disable AllowOverride
- Disable binary logs
- Compress documents
- Optimize PDF files
- Avoid sending heavy and redundant emails
- Only use double opt-in files
- Reduce emails size
- Adapt audio formats to listening contexts
- Adapt texts to the web
- Adapt videos to watching contexts
- Use less analytics tools and limit data collection
- Limit the use of animated GIFs
- Avoid autoplay for videos and audio content
- Use CSS containers
- Provide textual alternatives to multimedia content
- Prefer HTTP/2 over HTTP/1
- Save bandwidth with ServiceWorker
- Set up an efficient sitemap
- Ensure compatibility with older devices and software configurations
- Reduce stored data volume to the bare minimum.
- Set up a data expiration and deletion policy.
- Limit canvas use
- Make sure that user journeys allow users to carry out their intended action
- Have page titles and meta descriptions relevant to pages content
- Use the latest language version
- Only load data/code when necessary
- Delete unused features
- Prefer PWAs over native mobile applications that are similar to the website
- Avoid blocking times caused by long running JavaScript processes
- Set up an elastic architecture
- Limit HTTP API calls
- Avoid using carousels
- Set up a content end-of-life plan
- Set up a "Circuit breaker"
- Use "Request collapsing" as much as possible
- Rely on managed services
- Prefer pagination over infinite scrolling
- Take care of your website regularly
- Choose the right theme and limit CMS extensions
- Secure administration access
- Do not display documents within pages
The sources and contents of this project are protected