Ein Leitfaden für Anfänger zur Optimierung von Websites

Mit freundlicher Genehmigung von Pexels.

Ich bin Anfänger und konnte im Optimierungsranking von Google 99/100 erreichen. Wenn ich es kann, kannst du es auch.

Wenn du wie ich bist, magst du Beweise. Hier sind die PageSpeed ​​Insights-Ergebnisse von Google für stressfreie Abläufe, eine Website, die ich betreue und kürzlich einige Zeit lang optimiert habe:

Ein Screenshot meines PageSpeed ​​Insights-Scores.

Ich bin ziemlich stolz auf diese Ergebnisse, möchte jedoch betonen, dass ich vor einigen Wochen noch keine Ahnung hatte, wie eine Website optimiert werden kann. Was ich heute mit Ihnen zu teilen habe, ist einfach das Ergebnis einer ganzen Menge von Googeln und Fehlersuche, Schmerzen, die ich Ihnen ersparen möchte.

Dieser Artikel ist für jede Optimierung in Unterabschnitte unterteilt, falls Sie herumspringen möchten.

Ich bin kein Experte, aber ich bin zuversichtlich, dass Sie Ergebnisse erzielen, wenn Sie die folgenden Techniken implementieren!

Bilder

Bild mit freundlicher Genehmigung von Pexels (und sicherlich von Medium optimiert).

Als Anfänger im Web-Entwickeln habe ich mir nie Gedanken über Bilder gemacht. Ich wusste, dass das Hinzufügen von qualitativ hochwertigen Bildern zu meiner Website zu einem professionellen Erscheinungsbild führen würde, habe aber immer wieder über die Auswirkungen nachgedacht, die sie auf die Ladezeit meiner Seite haben würden.

Um meine Bilder zu optimieren, habe ich sie hauptsächlich komprimiert.

Rückblickend sollte dies von Anfang an ziemlich intuitiv sein, aber es war nicht für mich, also ist es vielleicht auch nicht für Sie.

Der Dienst, mit dem ich meine Bilder komprimiert habe, war Optimizilla, eine benutzerfreundliche Website, auf der Sie Ihre Bilder hochladen, die gewünschte Komprimierungsstufe auswählen und dann das komprimierte Bild herunterladen können. Bei einigen meiner Ressourcen ist die Größe um bis zu 70% gesunken, was zu einer längeren Ladezeit führt.

Optimizilla ist kaum die einzige Wahl für Ihre Bildkomprimierungsanforderungen. Eine eigenständige Open-Source-Software, die Sie verwenden können, ist ImageOptim für Mac oder FileOptimizer für Windows. Wenn Sie es vorziehen, mit Build-Tools zu komprimieren, gibt es Gulp- und WebPack-Plugins, die den Trick ausführen sollten. Es spielt keine Rolle, wie Sie es tun, solange Sie es tun. Die Leistungssteigerungen sind den minimalen Aufwand wert.

Je nach Anwendungsfall kann es sich auch lohnen, das Format Ihrer Dateien zu überprüfen. Im Allgemeinen wird jpg kleiner sein als png. Der Hauptunterschied, ob ich das eine oder das andere verwende, besteht darin, ob ich Transparenz hinter dem Bild benötige: Wenn ich Transparenz benötige, verwende ich png, ansonsten verwende ich jpg. Hier können Sie tiefer in das Für und Wider von beidem eintauchen.

Google hat auch ein ziemlich nettes Webp-Format herausgebracht. Da es jedoch noch nicht von allen Browsern unterstützt wird, zögere ich, es zu verwenden. Achten Sie auch in Zukunft auf weitere Unterstützung!

Ich habe nicht mehr getan als meine Bilder zu komprimieren, um die oben gezeigten Ergebnisse zu erzielen. Wenn Sie jedoch weiter optimieren möchten, finden Sie hier einen großartigen Artikel.

Video

Foto von Terje Sollie aus Pexels.

Ich habe in keinem meiner aktuellen Projekte Video verwendet, daher werde ich nur kurz darauf eingehen, da ich mich nicht als die beste Ressource für dieses Thema fühle.

Dies ist eine dieser Situationen, in denen ich die Profis wahrscheinlich das schwere Heben überlassen würde. Vimeo bietet eine hervorragende Plattform für das Hosten von Videos, auf der die Videoqualität für langsamere Verbindungen herabgesetzt und Ihre Videos komprimiert werden, um die Leistung zu optimieren.

Sie können Ihre Videos auch auf Youtube hosten und dann mit diesem YouTube-DL-Tool von Youtube herunterladen, während Sie die Videos entsprechend den Anforderungen Ihrer Website konfigurieren.

Weitere mögliche Lösungen finden Sie in Brightcove, Sprout oder Wistia.

Gzip

Kapiert? Postleitzahl? Mit freundlicher Genehmigung von Pexels.

Ich hatte keine Ahnung, was Gzipping war, als ich meine Website zum ersten Mal bereitgestellt habe.

Kurz gesagt, gzip ist ein Dateikomprimierungsformat, das die meisten Browser verstehen und das im Hintergrund ausgeführt werden kann, ohne dass der Benutzer überhaupt wissen muss, dass es geschieht.

Abhängig davon, wo Sie Ihre Anwendung hosten, kann gzipping so einfach sein, als ob Sie einen Konfigurationsschalter betätigen, um anzugeben, dass Ihr Server Dateien beim Versenden gzipen soll. In meinem Fall wird meine Website auf Heroku gehostet, was diese Option nicht bietet.

Wie sich herausstellt, gibt es Pakete, mit denen der Servercode explizit komprimiert werden kann, so dass Sie die Vorteile von Gzipping für nur wenige Codezeilen nutzen können. Mit dieser Komprimierungs-Middleware konnte ich die Größe meiner Javascript- und CSS-Bundles um 75% reduzieren.

Es lohnt sich zu prüfen, ob Ihr Hosting-Service eine gzip-Option bietet. Ist dies nicht der Fall, lesen Sie, wie Sie Ihrem serverseitigen Code gzipping hinzufügen.

Minimieren

Minimierte Ananas mit freundlicher Genehmigung von Pexels.

Bei der Minimierung werden unnötige Zeichen aus dem Code entfernt, ohne dass die Funktionalität beeinträchtigt wird (Leerzeichen, Zeilenumbrüche usw.). Auf diese Weise können Sie die Größe der Datei verringern, die Sie über das Internet transportieren. Es ist auch nützlich, um Ihren Code zu verschleiern, was es heimtückischen Hackern erschwert, Sicherheitslücken zu erkennen.

Heutzutage wird das Minimieren normalerweise als Teil des Erstellungsprozesses mit Webpack, Gulp oder einer anderen Alternative durchgeführt. Wenn Sie nach einfacheren Alternativen suchen, empfiehlt Google HTML-Minifier für HTML, CSSNano für CSS und UglifyJS für Javascript.

Browser-Caching

Es ist nicht ganz so, wie der Browser Daten speichert, aber so nah wie möglich. Mit freundlicher Genehmigung von Pexels.

Das Speichern statischer Dateien im Cache des Browsers ist eine sehr effiziente Methode, um die Geschwindigkeit Ihrer Website zu erhöhen, insbesondere bei wiederholten Besuchen desselben Clients. Ich wusste erst, als Google mir mitteilte, dass einige meiner Ressourcen aufgrund fehlender Header in der von meinem Server gesendeten HTTP-Antwort nicht ordnungsgemäß zwischengespeichert wurden.

Sobald meine Homepage geladen ist, wird an meinen Server eine Anfrage gesendet, um Daten über eine Reihe von Titeln abzurufen, die dann in einem Musik-Player gerendert werden. Ich aktualisiere die Titel auf dieser Website nicht sehr oft. Es macht mir also nichts aus, wenn ein Benutzer auf meine Website kommt und die gleichen Titel vom letzten Besuch sieht, wenn dadurch meine Seite für ihn etwas schneller geladen wird.

Um eine Leistungssteigerung zu erzielen, habe ich dem Antwortobjekt meines Servers (Express / Node-Server) den folgenden Code hinzugefügt:

res.append ("Cache-Control", "max-age = 604800000");
res.status (200) .json (Antwort);

Ich füge hier lediglich einen Cache-Control-Header an meine Antwort an, der besagt, dass die Ressourcen nach einer Woche (in Millisekunden) erneut heruntergeladen werden sollten. Wenn Sie diese Dateien häufiger aktualisieren, empfiehlt sich möglicherweise ein kürzeres Höchstalter.

Content Distribution Network

Reales Bild eines CDN mit freundlicher Genehmigung von Pexels.

Ein Content Distribution Network (CDN) ist ein Netzwerk, mit dem Benutzer aus der ganzen Welt geografisch näher an Ihren Inhalten sind. Wenn ein Benutzer ein großes Bild aus Japan laden muss, sich Ihr Server jedoch in den USA befindet, dauert dies länger als bei einem Server in Tokio.

Mit einem CDN können Sie eine Reihe von Proxyservern auf der ganzen Welt nutzen, sodass Ihre Inhalte schneller geladen werden können, unabhängig davon, wo sich Ihr Endbenutzer befindet.

Ich möchte darauf hinweisen, dass ich in der Lage war, die oben genannten Ergebnisse vor der Implementierung eines CDN zu erzielen. Ich wollte sie nur erwähnen, da kein Artikel über die Website-Optimierung vollständig wäre, ohne sie zu erwähnen. Es ist unerlässlich, einen dieser bösen Buben auf Ihrer Website zu haben, wenn Sie vorhaben, ein weltweites Publikum zu haben.

Einige beliebte CDNs umfassen CloudFront und CloudFlare.

Verschiedenes

Hier noch ein paar Tipps, wie Sie noch mehr Saft auspressen können:

  • Optimieren Sie Ihre Website so, dass Sie zuerst Inhalte "über der Klappe" laden, um die wahrgenommene Leistung Ihrer Website zu steigern. Eine gängige Methode ist das langsame Laden von Bildern, die nicht auf der Zielseite angezeigt werden.
  • Wenn Ihre Anwendung zum Rendern von HTML nicht auf Javascript angewiesen ist, z. B. eine mit Angular oder React erstellte Website, können Sie Ihre Skript-Tags wahrscheinlich sicher am unteren Rand des Hauptteils Ihrer HTML-Datei laden. Dies kann sich jedoch auf Ihre Zeit bis zur Interaktion auswirken. Daher ist dies KEINE Technik, die ich für jede Situation empfehlen würde.

Abschließend

Dies ist nur die Spitze des Eisbergs, wenn es um die Optimierung Ihrer Website geht. Je nachdem, wie viel Datenverkehr Sie empfangen und welchen Service Sie anbieten, kann es in vielen Bereichen zu Leistungsengpässen kommen. Vielleicht brauchen Sie mehr Server, vielleicht brauchen Sie einen Server mit mehr RAM, vielleicht könnte Ihre dreifach verschachtelte for-Schleife ein Refactoring gebrauchen - wer weiß?

Es gibt keine Einheitsgröße, wenn es darum geht, Ihre Website zu beschleunigen, und Sie müssen letztendlich die besten Entscheidungen für Ihre Situation auf der Grundlage von Messungen treffen. Verschwenden Sie keine Zeit damit, etwas zu optimieren, das nicht optimiert werden muss. Analysieren Sie die Leistung Ihrer Website, um Engpässe zu finden, und greifen Sie diese dann gezielt an.

Ich hoffe, dass Sie in diesem Artikel etwas Nützliches gefunden haben! Wie bereits erwähnt, muss ich in diesem Bereich noch viel lernen. Wenn Sie weitere Tipps oder Empfehlungen haben, hinterlassen Sie diese bitte in den Kommentaren unten!

Wenn Ihnen dieser Artikel gefallen hat, geben Sie ihm bitte ein paar Klatschen und sehen Sie sich Folgendes an:

  • Tools, von denen ich wünschte, ich hätte sie gewusst, als ich mit dem Codieren begann
  • Tools, von denen ich mir gewünscht hätte, dass ich sie kenne, als ich mit dem Codieren begonnen habe: Revisited

Folgen Sie mir auch auf Twitter.