Skip to content

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

#design #html

Page last modified: 2024-11-13 09:17:00