Web Eco Design¶
Best Practices¶
Feature Reduction and Optimization¶
- Eliminate non-essential functionalities
- Quantify the need precisely
- Optimize the user journey
- Remove unused functionalities
- Limit the number of HTTP requests
- Avoid API calls unless necessary
- Optimize queries to databases
- Only connect to a database when necessary
- Limit the use of animated GIFs
- Avoid autoplay of videos and sounds
- Avoid long-running JavaScript processes
- Use modular application architecture
- Adapt the quality of service and availability
- Implement a site end-of-life plan
- Have a content end-of-life strategy
- Ensure that user journeys allow them to achieve their intended actions
- Remove unnecessary features and extensions in CMS
Design and User Interface¶
- Favor a simple, clean, and web-adapted design
- Prefer mobile-first or adaptive loading
- Use pagination instead of infinite scrolling
- Avoid JavaScript/CSS animations
- Prefer CSS over images
- Write efficient CSS selectors
- Group similar CSS declarations
- Use shortened CSS notations
- Provide print-friendly CSS
- Limit the number of CSS files
- Replace official social media sharing buttons
- Use glyphs instead of images
- Use static error pages
- Favor simple icons and fonts
- Validate pages with W3C
- Ensure proper metadata (title, metadescription)
- Ensure compatibility with older devices and software
Performance and Resource Management¶
- Propose asynchronous processing when possible
- Store static data locally
- Use static pages when feasible
- Use forks focused on performance
- Use only essential parts of JavaScript libraries and CSS frameworks
- Cache frequently accessed JavaScript objects
- Reduce access to the DOM through JavaScript
- Minify CSS, JavaScript, HTML, and SVG files
- Compress CSS, JavaScript, HTML, and SVG files
- Combine CSS and JavaScript files
- Optimize images
- Use lazy loading
- Use partial reloading of content zones
- Optimize database queries
- Avoid SQL queries within loops
- Cache frequently used computed data
- Compress documents
- Use service workers for bandwidth saving
- Employ HTTP/2 over HTTP/1
Caching and Load Distribution¶
- Use a CDN
- Use HTTP caching
- Set Expires or Cache-Control headers
- Cache Ajax responses
- Utilize managed services for load management
- Prefer “Request collapsing”
- Implement “Circuit breaker” patterns
- Optimize cache by keeping the cache in RAM (opcode and key-value stores)
Media and File Management¶
- Preprocess and optimize media before importing to CMS
- Use proper audio and video encoding outside the CMS
- Adapt videos and sounds to viewing/listening context
- Provide text alternatives to multimedia content
- Validate media formats and sizes
- Use vector graphics when possible
- Avoid resizing images on the client side
- Use appropriate data formats
- Optimize PDFs
- Limit the size of emails and data transfers
- Ensure all multimedia formats are correctly adapted to the platform
Energy Efficiency and Hosting¶
- Choose an eco-friendly hosting provider
- Prefer virtualized servers
- Optimize server energy efficiency
- Install minimal server requirements
- Store data in the cloud
- Use cookie-free domains for hosting CSS/JS resources
- Disable unnecessary logging
- Disable DNS lookup on Apache
- Optimize Apache Vhost settings
- Use asynchronous servers
- Limit server logs
- Use HSTS Preload lists over 301 redirects
Data and Privacy Management¶
- Limit the number of domains serving resources
- Optimize cookie size
- Limit heavy and redundant emails
- Use double opt-in for emails
- Minimize analytics tools and data collection
- Implement a data expiration and deletion policy
- Store only necessary data
- Secure access to administration panels
- Avoid large data transfers for processing
- Implement an elastic architecture to scale resources dynamically
Content Delivery and Interaction¶
- Use assisted input over autocomplete
- Prefer Progressive Web Apps (PWA) over native mobile apps
- Avoid infinite scrolls by using pagination
- Ensure content is appropriately designed for user actions
- Use appropriate technologies for content delivery
- Implement a lightweight sitemap for efficiency
- Regularly maintain and update the website
Page last modified: 2024-09-30 10:01:12