Fundamental principles:
More than ever, sustainable web design is needed to curtail the disastrous effects of the Internet on the environment. According to sustainablewebdesign.org, communications tech will emit more carbon by 2025 than any country except China, India, and the United States.
We can be that change. By making websites cleaner and more efficient, the environmental impact can be confronted head on. Adding accessibility to people with disabilities and slow machines will benefit communities and poor nations. Our charge is to make web content more honest, open, resilient, and regenerative, so we can heal our planet while maintaining our economic goals for e-commerce, customer interaction, and advertising efforts.
Steps:
Always be tweaking. Benchmark your website against competitors and old versions. This is the only way to eliminate waste and optimize for cleaner content, getting the most value for your money and the lowest planetary impact, all without sacrificing profits.
Follow the checklist below to stay ahead of the crowd and become a beacon of light in a time of growing pollution on the web.
Server-side (web hosting & back-end)
- Use data centers that are closer to your physical location
Check with your hosting platform to see if they have servers that are closer to you and your customers, which will eliminate the need for long communication channels that require more energy.
- Use a CDN
Content Delivery Networks can provide you with faster load times, performance upgrades, and even protect you from extra charges with bandwidth spike protection. You will also benefit from caching, high availability, low server load, and reduced time and resources needed for content delivery to end-users around the globe.
- Choose hosts with a high PUE rating
PUE is total data center power consumption divided by the amount actually used for IT equipment. The lower the better. Shop and compare so that you aren’t wasting money and energy on fancy lighting or badly designed server facilities.
- Use green hosting
Data and IT facilities that practice cleaner power use can help cut the bill and the network load. Choose a hosting plan that utilizes renewable energy and power-saving designs.
- Use server-side caching
This type of caching allows to speed up page delivery by adding the most frequently accessed data to a local cache to the server, which leads to increased performance, decreased costs, more effective use of resources as well as better UX.
- Use scalable cloud-based resources
Virtual machines, or VMs, allow multiple clients to run on the same physical hardware without the limitations of shared servers, and thus the size of a particular VM can be scaled to suit the needs of each website. It’s like having a server designed just for your website.
- Use clean well-written back-end code
Hiring an extra programmer or two might not be top on your list, but having someone to physically check the code and eliminate redundancy is always going to be cleaner and more efficient.
- Block the (bad) bots
Check your traffic sources and implement bot-blocking mechanisms to keep unwanted and wasteful traffic off your site. This will allow for more efficient use of resources, better security, and cleaner analytics data.
- Use a database with solid architecture
A properly designed database will improve the speed of data retrieval and make query responses more timely, reliable, and comprehensive. A solid back-end built on this kind of architecture reduces the load while adding infinite scalability to your project.
- Use optimized database queries and indexes
Databases can be wasteful. It’s worth the effort to ensure from the beginning that search queries and databases are optimized for the task they are expected to perform the most.
- Go server-less
Using a cloud service like Cloudflare or AWS and using backend services on an as-used basis means no servers to manage or physically handle, no expensive AC bill, and a major reduction of wasted energy by centralizing IT loads to dedicated facilities that can run more efficiently.
- Choose the right servers
Servers that run cleanly and efficiently with minimum downtime and allow scalability for your project size are always the best.
- Optimize instances
Most cloud servers will allow full control of server-side architecture and instance types designed and optimized for very specific purposes. This approach allows you to fine-tune and scale your resources to the requirements of your target workload.
- Use the right storage classes
Think of storage classes as buckets for different types of data depending on how it’s accessed, and how often. Much like you might store some things in a drawer, closet, or garage, different classes can be designed to optimize your data into categories and increase efficiency on the cloud.
- Edge computing
Edge computing adds another layer of flexibility and efficiency to your IT infrastructure and provides such benefits as better speed, security, scalability, reliability, and reduced latency. Distributed control nodes can be added to your cloud network to make sure that major access points are close to your customers, and information can be fed directly to your page in the most efficient way possible.
- Use as few integrations as possible
You don’t need to have every single plugin, module, or library that’s available. If you aren’t using an extension or integration, disable it or remove it to keep it from running in the background while doing nothing. If you are not using it efficiently and/or to the full extent – consider replacing it with custom code or with a more streamlined/lighweight version.
- Consider energy efficiency of programming languages
Not all code is equal and some programming languages are more efficient and require fewer resources than others. Consider this when deciding which tools and technologies to use and try to make things more efficient, and modern code is more user-friendly to boot.
Client-side (front-end optimization)
- Browser caching
Make sure to properly configure caching headers for your assets such as images, CSS, and Javascript, and media files. This will allow storing these files in the user’s browser and re-using them on subsequent page loads and/or website visits which means faster load times and less energy used for data transfer.
- Code Compression
Code size makes a difference on load time, which in turn contributes to better bounce rate and conversion statistics. Gzip and Deflate can be used to remove or compress repeated strings and blank lines from the end-user’s download.
- Code Minimization
If it can be done in HTML or CSS, there’s no reason to do it in Javascript. Reducing the amount of interactive code improves site performance.
- Images compression
Compressed images load faster and use less network bandwidth. Thumbnails should also be used to link to any images (such as downloadable wallpapers) that are necessarily high-res.
- Image responsive sizes
Keeping different sizes for the same image block is an active way to improve the load time for websites on mobile devices and phones.
- Optimize image formats
Make sure to use the right image format depending on the usage and end goal. JPEGs with proper compression are usually better for photos, thumbnails, etc. Vector formats such as SVG may be better for logos and other graphics that need to scale to different sizes, compressed PNGs are usually used when you need to support transparency, GIFs can be good for small graphics, logos and simple animations, and don’t forget about WebP and icon fonts.
- Decrease 3rd party embeds/widgets
Every widget included on your site is required to access another portion of the internet on a different server and can drag down the speed of a website.
- Decrease tracking scripts
Avoid loading lots of tracking snippets provided by 3rd part tools and services unless absolutely necessary and perform periodic audits and clean-ups. These scrips and consuming resources and sending data to 3rd part platforms, which can be a privacy/security risk as well.
- Use standard/system fonts, reduce the number of fonts
Cutting down on the number and type of fonts will improve site performance. Loading multiple fonts that must be downloaded by the user are wasted energy and poor design.
- Use less media (images, videos)
Image blocks are needed to break up text, but by reducing these to make use of them only when needed, you can drastically improve the performance of your site.
- Use AMP
AMP will help you create super lightweight and streamlined experiences for mobile users and will require much less resources than a regular mobile version of the website, it will also, potentially, help with SEO.
- Use PWA
PWA will allow for much better UX, cool functionality (e.g. push messages), advanced caching (e.g. off-line mode), and more efficient use of resources. It will also help to improve your website/webapp resiliency and user engagement.
- Build static web pages (look into static website generators, flat file CMSs etc.)
Static web pages that can be cached will load fast, won’t require back-end computing resources, and are much more secure, too. Best used for simple websites, blogs, and websites that aren’t updated very often.
- Reduce unused javascript/css
If you don’t absolutely need it, delete it. Make separate functions for any code blocks that will be used in multiple places to avoid code duplication.
- Avoid using heavy libraries unless necessary
Importing a standard list of libraries is bad practice and inefficient design. Import only the libraries you will be using directly.
- Use clean well-written code
Properly documented, minimalist code will reduce clutter and the chances of unnecessary extra variables and function calls.
- Reduce unnecessary page loads
Avoid automated page reloads at all costs. If some portion of the page must be reloaded, then isolate that part of the code so the refresh only applies to that block.
User experience (UX)
- Good IA and UX
User experience is key. Good information architecture and optimized UX will require fewer pages to be loaded for the user to find what he/she needs. Keeping a clean site design that doesn’t bog the user down with multiple windows to close improves the experience. Information architecture and design flow should be intuitive and easy to understand, even for new users. The key here is testing.
- Improve SEO
Proper branding and SEO doesn’t necessarily mean pages of repeated keywords. Streamline your efforts and balance your current SEO practices with better placement of SEO-friendly content. This way fewer searches and queries will be needed in order to find your website and/or the content your user is looking for.
- Streamline the content
In the writing world, short, punch sentences win out over paragraph sized details. The same is true in content. Your viewers want a piece of information, and the less fluff you can spend to convey that information, the better.
- Optimize for accessibility
Make sure you test your color scheme contract rations and tag all images and other data with proper meta information so that those with disabilities who require special code readers can access your site as easily as everyone else. There are standards, checklists, and testing tools that can guide you and help you estimate whether your interfaces are accessible and inclusive.