GREEN CODING Guide
by VAST FORWARD

• Do not embed images larger than necessary for display.
• Responsiveness through the use of the ‘Picture Element’ or ‘srcset’
• Adjusting image qualities. If the system allows, let the adjustment be automatic.¹
• Use current image formats like ‘WEBP’.²
• Load images only when needed (Lazy Load), and limit the number of images overall.
• Combine icons into a sprite to minimize server requests.
• Use a ‘CDN’ for a large number of users.³
• Use videos in ‘MP4’ or ‘WebM’ with current codecs while paying attention to small file sizes.
• Avoid autoplay in videos

Note: The CMS Wordpress automatically generates different sizes of embedded images, which are often not needed or used – these can be disabled.
Through plugins like Better-Image-Sizes, required image sizes can be generated on the fly and only in the needed sizes.

• Merge and minimize JavaScript (goal ≈ 100 kB). To achieve this, it can also be split up and only included where it is needed – code splitting.⁴
• Remove unused JavaScript, e.g., via tree shaking.⁵
• Check if there are smaller libraries for the use case that simplify the complexity of the code or enable the desired function in another way.
• Avoid having multiple instances of modules in JavaScript.
• Switch the system if too many scripts are necessary for simple functions.

• Merge and minimize CSS files into a single file.
• Load CSS late and insert critical CSS into the head section.⁶
• Bootstrap and similar libraries are helpful for fast development but are rarely fully utilized. Cut unnecessary definitions or define styles yourself. E.g. CSS Grid is now supported by all common browsers.

• Ideally, use system fonts.
• Reduce the number of web fonts and check which ones are actually necessary.
• Icon fonts are often unnecessarily large. Reduce to only needed icons and deliver these as SVG or Sprite (also reduces loaded CSS, since in addition to the font, extra CSS is loaded).
• Webfonts can be reduced to the necessary characters through font subsetting, saving up to 80%.⁷

• Switch to a “green”, sustainable operating host.
• Caching can reduce server load for static files. Static files should be held for at least 1 year with appropriate caching policies.
• Most CMS can hold a static version of the page or through plugins, so servers don’t have to process them anew each time. This could also be resolved through Server-Caching.⁸
• Text compression on the server (configure the use of GZIP and ideally Brotli on the server).
• Reduce/minimize server requests

• Reduce DOM-size. Onepagers often have larger data amounts and thus longer loading times. Evaluate whether dividing content into subpages is sensible.
• Do not neglect SEO. Content that is easier to find uses fewer resources.