Un guide pas inutile des sites web durables

Lassen Sie uns den Mund halten über den Planeten, all die Weltuntergangspanik und beginnen wir mit der Frage, warum Sie Ihre Website nachhaltig gestalten möchten? Sie erstellen die Website oder bezahlen dafür, was haben Sie davon?

Mehr Leistung, mehr besser. Es wird Ihre Website beschleunigen und Ihre Produktivität steigern, Ihre Besucher werden die schnelle Website lieben, was zu einer höheren Konversion führt und Google gibt Ihnen SEO-Bonuspunkte. Bei stark frequentierten Websites kann es sogar Geld sparen.

Oh ja, es wird den Planeten glücklich machen. Da die IT einen immer größeren Einfluss auf die Erde hat, weil sie viel Energie verbraucht. Wenn wir uns alle engagieren, können wir viel bewirken.

Sie helfen nicht nur dem Planeten. Es ist ein gültiger Geschäftsfall.

Grünes Hosting! Benutze ich das?

Die Nutzung nachhaltiger Energie für Ihre Anwendungen und Websites hat große Auswirkungen, da Server viel Energie verbrauchen und Tag und Nacht eingeschaltet sind. Es ist ein guter Anfang.

Neugierig, ob Sie nachhaltige Energie nutzen? Die Green Web Foundation verfügt über ein großartiges Tool, um das zu überprüfen: den Green Web Check.

Wenn nicht, verfügt dieselbe Stiftung über ein Green Web Directory. Dort finden Sie viele nachhaltige Hosting-Anbieter, sowohl lokal als auch global.

Ist meine Website durch Green Hosting nachhaltig?

Es ist ein toller Anfang, aber es steckt noch mehr dahinter. Eine ressourcenfressende Website für klobige Jungen wird viel Energie verbrauchen und langsam übertragen, selbst bei grünem Hosting.

Sollen wir zum Aufführungsteil kommen, wo all die interessanten Dinge passieren?

Anlagen optimieren, klein ist schnell

Bei vielen Projekten können Sie hier einen großen Unterschied machen. Assets können umfangreich sein und viel Bandbreite und Ressourcen verschwenden. Ein paar Tipps:

• Minimieren Sie die Anzahl der Schriftarten, die Sie benötigen, und laden Sie sie. Diese werden hart getroffen (versuchen Sie, maximal 3 zu verwenden, aber weniger ist besser).
• Verwenden Sie SVGs, wo Sie können, sie sind klein und lassen sich gut skalieren.
• Skalieren und beschneiden Sie Bilder auf die von Ihnen benötigte Größe. Systeme wie WordPress verfügen über Tools dafür und das srcset-Attribut kann dabei helfen, die Größe zu ändern.
• Verwenden Sie moderne Formate für Bilder und Videos, wie WebP und WebM/AV1. Diese bieten eine verbesserte Komprimierung und Qualität.
• Zum verzögerten Laden von Bildern verwenden Sie „loading="lazy". Laden Sie einfach das, was Sie benötigen. Sie benötigen hierfür keine Skripte mehr.
• Verwenden Sie für Videos die automatische Wiedergabe nur, wenn Sie es wirklich benötigen.
• Verwenden Sie die Komprimierung (als nächstes) und laden Sie keine Dinge, die Sie nicht benötigen :)

Bonus für Tag Manager-Benutzer: Überprüfen Sie alle Skripte und Tools von Drittanbietern, die Sie haben. Benutzt du sie? Haben Sie irgendeinen Wert daraus? Regelmäßige Pflege ist notwendig. Es geht nicht nur um die Assets, die Sie laden, die Verarbeitung großer Datenmengen erfordert auch viel Energie.

Servieren Sie es schnell und klein: Cache und Komprimierung

Komprimierung aktivieren. Alle modernen Webserver verfügen über es. Stellen Sie sicher, dass Sie es verwenden. Moderne Optionen wie Brotli sind besser, aber auch GZIP oder Deflate können einen großen Unterschied bei der Bandbreite machen. Mobile Besucher werden es Ihnen noch mehr danken.

Caching hängt vom Projekt ab, aber versuchen Sie, Daten so nah wie möglich am Besucher zwischenzuspeichern. Für statische Assets wie CSS/JS könnten Sie mit einem richtigen Cache-Header für den Browser beginnen und die heruntergeladene Datei immer wieder verwenden.

Haben Sie eine Inhaltsseite, die mehr Lesevorgänge als Aktualisierungen aufweist? Stellen Sie es statisch von der Festplatte oder vom CDN bereit. Ein Framework wie Astro kann statisch zu einem CDN generieren oder ein Plugin wie W3 Total Cache kann WordPress-Seiten von der Festplatte bereitstellen.

Halten Sie Ihre Freunde nah, aber Ihre Daten näher

Apropos CDNs. Denken Sie an Ihre Besucher: Woher kommen sie? Benötigen Sie ein global verteiltes Mehrzonen-Setup mit Edge-Workern, um die Website Ihrer lokalen Bäckerei zu bedienen?

Wahrscheinlich, aber das ist der Geek in dir, der Spaß hat. Verwenden Sie nicht zu viele Lösungen und halten Sie Ihre Server in der Nähe Ihrer Benutzer. Es spart Ressourcen sowohl für die Berechnung als auch für die Übertragung und hält die Latenzen niedrig.

Hören Sie auf, JavaScript zu verwenden, CSS ist großartig!

Viele Entwickler lieben es, JavaScript zu schreiben und alle möglichen ausgefallenen Animationen, Seitenübergänge und andere Spielereien zu machen. Verwenden Sie kein Vanilla JS oder CSS, sondern große Frameworks oder Bibliotheken. Dazu gehört jQuery. Sie benötigen kein jQuery, um ein DOM-Element abzurufen und eine Klasse umzuschalten! Lassen Sie mich gar nicht erst mit Next.js anfangen.

Ich habe mich aufgeregt, tut mir leid. Und ehrlich gesagt können diese Websites wunderschön sein. Die Sache ist, dass Vanilla JS und CSS heutzutage großartig sind. Voller Funktionen, mit denen Sie alle Arten von coolen interaktiven Komponenten, Animationen und sogar Seitenübergängen erstellen können.

Mit diesen können Sie weniger Code schreiben, versenden und ausführen. Alles wird von Ihrem Browser erledigt. Noch flüssigere Animationen, ohne den Hauptthread zu blockieren.

Tu n'es pas obligé de rendre ça ennuyeux

J'ai vu beaucoup d'articles parlant de l'utilisation de couleurs sombres, de polices système et disant que vous devriez laisser tomber chaque petite cloche ou sifflet.

Cela ressemble à un message d’intérêt public destiné à rendre la vie ennuyeuse. Je ne veux pas de ça. Les sites Web, les applications, le design, la technologie doivent être amusants, inspirants et vivants.

Je ne dis pas que vous devez créer des fonctionnalités stupides sans aucune valeur qui utilisent beaucoup de ressources, soyez attentif, mais ne soyez pas ennuyeux.

D'accord, au revoir.

C'est tout pour l'instant, mais c'est un sujet qui m'intéresse. Attendez-vous à plus d’articles sur les moindres détails. Des questions ou des conseils ? N'hésitez pas à laisser un commentaire ou à m'envoyer un DM sur Xwitter ou LinkedIn !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!