meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		Previous revision
ixc2024:tech:wfrontend:criteria:greencode [2024/05/22 14:17] – created rubenhuygensixc2024:tech:wfrontend:criteria:greencode [2024/05/22 15:38] (current) – alesta
Line 1: Line 1:
-Here are 20 best practices derived from the concepts in the "Green Code" book: +==== Green Code Suggestions ==== 
-  * Unordered List ItemMinimize Data Traffic: Reduce the amount of data transferred by optimizing images, compressing files, and utilizing efficient formats. This includes using formats like WebP for images and minifying CSS, JavaScript, and HTML files. + 
-  * Implement Efficient Caching: Use browser caching to store static resources locally on the user's device. This reduces the need for repeated downloads. +Here are ~20 best practices mostly derived from the concepts in the "Green Code" book: 
-  * Optimize Images and Videos: Compress images and videos using tools like ImageOptim or HandBrake. Serve images in next-gen formats like WebP and videos in optimized formats like MP4. + 
-  * Lazy Loading: Implement lazy loading for images and videos to ensure that they are only loaded when they enter the viewport. This reduces initial load times and data usage. +Reduce emissions: 
-  * Reduce Unused Code: Regularly audit and remove unused CSS, JavaScript, and other resources. Tools like PurifyCSS can help identify and remove unused CSS classes. +  * **Minimize Data Traffic:** Reduce the amount of data transferred by optimizing images, compressing files, and utilizing efficient formats. This includes using formats like WebP for images and minifying CSS, JavaScript, and HTML files. 
-  * Efficient Font Loading: Use only the necessary font weights and styles. Consider using system fonts to reduce the need for external font loading. When using web fonts, ensure they are loaded asynchronously and consider subsetting fonts to include only the characters needed. +  * **Implement Efficient Caching:** Use browser caching to store static resources locally on the user's device. This reduces the need for repeated downloads. 
-  * Simplify Design: Focus on minimalistic design to reduce the amount of CSS and JavaScript required. Simplified designs are often more user-friendly and faster to load. +  * **Lazy Loading:** Implement lazy loading for images and videos to ensure that they are only loaded when they enter the viewport. This reduces initial load times and data usage. 
-  * Responsive Design: Use responsive design principles to ensure that your website adapts to various devices and screen sizes efficiently. This includes using media queries to load only the necessary resources for each device. + 
-  * Efficient Animations: Use CSS animations instead of JavaScript for better performance and lower energy consumption. Avoid heavy animations that can drain device battery and processing power. + 
-  * Optimize for Accessibility: Ensure your website is accessible, reducing user errors and the need for repetitive actions. This not only improves user experience but also reduces unnecessary data transfer and processing. +  * **Optimize Images and Videos:** Compress images and videos using tools like ImageOptim or HandBrake. Serve images in next-gen formats like WebP and videos in optimized formats like MP4. 
-  * Reduce HTTP Requests: Combine files where possible (e.g., CSS sprites, combined JavaScript files) to minimize the number of HTTP requests required to load a page. +  * **Use SVGs:** Where appropriate, use SVGs instead of raster images. SVGs are scalable and often smaller in size compared to bitmap images, leading to faster load times and less data transfer. 
-  * Use Content Delivery Networks (CDNs): Utilize CDNs to serve static resources from locations closer to the user, reducing latency and improving load times. +  * **Optimize Forms and User Inputs:** Reduce the size of user-uploaded images and videos by cropping and compressing them before upload. Implement client-side validation to reduce unnecessary server requests. 
-  * Implement Dark Mode: Offer a dark mode option for OLED screens, which can save battery life for users. Ensure that dark mode is implemented efficiently without duplicating resources. +  
-  * Use Efficient JavaScript Libraries: Choose lightweight JavaScript libraries and frameworks that offer the required functionality without excessive overhead. For instance, consider using Preact instead of React for smaller applications. +  *   **Implement Dark Mode:** Offer a dark mode option for OLED screens, which can save battery life for users. Ensure that dark mode is implemented efficiently without duplicating resources. 
-  * Optimize Forms and User Inputs: Reduce the size of user-uploaded images and videos by cropping and compressing them before upload. Implement client-side validation to reduce unnecessary server requests. + 
-  * Static Site Generation: Consider using static site generators for websites that do not require dynamic content. This can significantly reduce server load and improve performance. + 
-  * Progressive Web Apps (PWAs): Develop your site as a PWA to take advantage of offline capabilities and background syncing, reducing the need for constant data transfer. +  * **Efficient Font Loading:** Use only the necessary font weights and styles. Consider using system fonts to reduce the need for external font loading. When using web fonts, ensure they are loaded asynchronously and consider subsetting fonts to include only the characters needed. 
-  * Use SVGs: Where appropriate, use SVGs instead of raster images. SVGs are scalable and often smaller in size compared to bitmap images, leading to faster load times and less data transfer. +  * **Efficient Animations:** Use CSS animations instead of JavaScript for better performance and lower energy consumption. Avoid heavy animations that can drain device battery and processing power. 
-  * Monitor and Optimize Performance: Regularly monitor your website's performance using tools like Google Lighthouse. Continuously optimize based on insights to ensure your site remains efficient. + 
-  * Educate and Collaborate: Ensure that all team members are aware of and implement these sustainable practices. Collaboration and continuous education can help maintain a focus on sustainability throughout the development process.====== Headline ====== + 
-  * +  * **Reduce HTTP Requests:** Combine files where possible (e.g., CSS sprites, combined JavaScript files) to minimize the number of HTTP requests required to load a page. 
 +  * **Energy Efficient Content** Design the content to be as energy efficient as possible, while still taking care of it staying informative and valuable to the user. 
 +  * **Monitor and Optimize Performance:** Regularly monitor your website's performance (using Google Lighthouse). Continuously optimize based on insights to ensure your site remains efficient. 
 + 
 +  
 +Accessibility:  
 +  * **Simplify Design:** Focus on minimalistic design to reduce the amount of CSS and JavaScript required. Simplified designs are often more user-friendly and faster to load. 
 +  * **Responsive Design:** Use responsive design principles to ensure that your website adapts to various devices and screen sizes efficiently. This includes using media queries to load only the necessary resources for each device. 
 +  * **Optimize for Accessibility:** Ensure your website is accessible, reducing user errors and the need for repetitive actions. This not only improves user experience but also reduces unnecessary data transfer and processing. 
 + 
 + 
 +Increase maintainability:  
 +  * **Reduce Unused Code:** Regularly audit and remove unused CSS, JavaScript, and other resources. Tools like PurifyCSS can help identify and remove unused CSS classes. 
 + 
 + 
 +Finally: 
 +  * **Holistic approach:** Understand both the business logic behind the solution that you are implementing and the user's experience or expectations of your application. Try to solve these potentially conflicting requirements efficiently.