Es gibt so viel über die Beschleunigung von Websites zu wissen. Es ist geradezu unglaublich. Dinge wie das Verständnis von Servern und Netzwerken, wie Browser Dinge parsen und Entscheidungen treffen, effiziente Code-Auswahl und Nuancen bei Dateiformaten machen einen Performance-Experten zu einer Vollzeitkarriere für sich allein.
Aber Sie müssen kein Experte sein, um sich um die Web-Performance zu kümmern, noch ein Experte sein, um mit der Umsetzung von Änderungen an Ihren Websites zu beginnen, um sie schneller zu machen. Selbst absolute Anfänger in der Web-Branche haben die Möglichkeit, signifikante Performance-Steigerungen an den Websites vorzunehmen, an denen sie arbeiten.
Vielleicht haben Sie das hier schon gehört?
Wenn Sie die Länge eines Arrays zuerst speichern, anstatt sie bei jeder Iteration einer for-Schleife zu berechnen, ist das schneller.
// this is faster
var l = arr.length;
for (var x = 0; x < l; x++) {
dosmth = arr[x];
}
// than this
for (var x = 0; x < arr.length; x++) {
dosmth = arr[x];
}Darüber spreche ich nicht. Haha. Entschuldigung.
Ich möchte über die "Low Hanging Fruit" sprechen. Einfache Änderungen, die große Auswirkungen auf die Web-Performance haben.
Ich habe einige eigene Ideen. Als Frontend-Entwickler und jemand, der das Web für eine ziemlich großartige Sache hält, bin ich für jede Idee zu haben, die es besser macht. Vor ein paar Jahren habe ich einen ganzen Vortrag über 10 Dinge gehalten, die man tun kann, um seine Website schneller zu machen, die alle ziemlich "Low Hanging Fruit" sind.
Aber vor kurzem habe ich auf Twitter gefragt, und viele Leute hatten eigene Ideen.
Ich werde das alles zusammenquetschen und eine Liste erstellen! Denken Sie daran, dass dies keine umfassende Liste von Performance-steigernden Taktiken ist. Die Voraussetzungen, um auf dieser Liste zu stehen, sind, dass sie relativ einfach durchzuführen sind und große Performance-Erträge haben.
1) Anfragen reduzieren
Dies ist mein Lieblingspunkt. Jedes Mal, wenn ich etwas von einer Seite entfernen kann, ohne etwas zu opfern, fühlt es sich großartig an. Gibt es CSS-Dateien, die Sie kombinieren können? Tracking-Skripte, die Sie entfernen können? Teilen-Buttons, die einfache Links sein könnten?
Dave Rupert empfiehlt, ein Inventar aller Dinge auf Ihren Seiten zu führen, damit Sie wissen, warum sie dort sind und welchen Zweck sie erfüllen.
Sie sollten auch das Konzept eines Performance-Budgets in Betracht ziehen. Ein Performance-Budget könnte lauten: Sie haben X Anfragen für Y Gesamtdateigröße und Z Sekunden Ladezeit, und niemand kann etwas tun, um diese zu überschreiten. Machen Sie es zum Teil der Kultur rund um Ihre Website!
2) Assets optimieren
Ihre Bilder können wahrscheinlich viel kleiner sein, als sie bereits sind, ohne Qualitätsverlust oder mit geringem Qualitätsverlust. Laden Sie eine App wie ImageOptim herunter und ziehen Sie die Bilder darauf, bevor Sie sie im Web verwenden.
Das gleiche Konzept gilt für alle möglichen anderen Dateitypen. Anstatt das von Hand geschriebene "rohe" JavaScript zu verlinken, sollte es durch einen Minifier laufen, um seine Dateigröße zu reduzieren. Dies entfernt Dinge wie Leerzeichen und sogar ausgefallene Dinge wie das Umschreiben von Funktionsnamen und Aufrufen in kürzere Versionen. Dasselbe gilt für CSS, es sollte minimiert werden.
Es gibt viele Möglichkeiten, dies zu tun, die jeder Build-Prozess handhaben kann. Als Beispiel zeige ich, wie ich CodeKit verwende und sicherstelle, dass die Ausgabe meines SCSS komprimiert wird.
Für SVG-Dateien, schauen Sie sich SVGOMG an!
Google Performance-Experte Das Surma sagt, das Komprimieren/Optimieren von Bildern sei die "Low Hanging Fruit" überhaupt für die Web-Performance. Für Bilder und Videos speziell würde ich auch Dienste wie Cloudinary oder Imgix empfehlen, die sich auf die Optimierung und Bereitstellung von Bildern in sehr performanten Weise spezialisieren.
3) Stellen Sie sicher, dass Sie Gzip verwenden
Machen Sie zu Testzwecken den Netzwerk-Tab in Ihren Entwicklertools auf und wählen Sie eine CSS-Datei aus. Schauen Sie unter "Response Headers" (Antwort-Header) und prüfen Sie, ob "content-encoding" auf "gzip" steht.
Wenn nicht, gibt es massive Einsparungen, die Sie erzielen könnten, indem Sie einfach sicherstellen, dass die Gzip-Kodierung auf Ihrem Server aktiviert ist. Ihr Hoster sollte Informationen dazu für Sie haben. Hier bei MediaTemple, auf einem Apache-Server, finden Sie hier einige Informationen dazu. Es geht darum, sicherzustellen, dass mod_deflate aktiviert ist, was das Gzipping durchführt.
Sie könnten sogar Brotli in Betracht ziehen, das noch besser als Gzip sein kann, und ich bemerke, dass es hier bei MediaTemple über die Securi-Firewall unterstützt wird.
4) Stellen Sie sicher, dass Sie Browser-Caching verwenden
Sehen Sie den zweiten Pfeil im obigen Screenshot? Er zeigt auf ein Ablaufdatum für diese CSS-Datei. Beachten Sie, dass sie im Jahr 2037 abläuft. Das bedeutet, der Browser behält diese Datei im Wesentlichen für immer und muss sie nicht erneut herunterladen, wenn sie wieder benötigt wird. Das ist ein massiver Performance-Booster. Müssen Sie die Datei ändern? Ändern Sie ihren Namen! style.css?v=16.4
Apropos Caching... das allgemeine Konzept des Cachings ist ein wichtiger Teil der "Low Hanging Fruit" der Web-Performance. Ihr Webhoster kann hier wahrscheinlich Empfehlungen geben. Zum Beispiel kann er vielleicht Nginx Reverse Caching für Sie aktivieren. Oder wenn Sie etwas wie eine WordPress-Website betreiben, können Sie vielleicht ein Plugin wie W3 Total Cache installieren und die Vorteile davon nutzen.
5) Verwenden Sie ein CDN
Wie Tim Murtaugh sagt... richten Sie ein CDN ein.
Content Delivery Networks (CDNs) dienen dazu, Ihre statischen Dateien (wie Bilder, CSS und JavaScript) von extrem schnellen Servern bereitzustellen, die speziell für diese Aufgabe optimiert sind (z. B. sind sie "cookieless", was etwas Netzwerk-Daten-Overhead spart). Außerdem stellen sie diese Dateien von Servern bereit, die geografisch so nah wie möglich am Benutzer sind, der diese Datei anfordert. Große Gewinne!
Dies ist "Low Hanging Fruit", da es sich in der Regel um eine einmalige Einrichtung handelt und Ihnen für immer Vorteile bringt. Schauen Sie sich an, wie Sie Cloudflare für Ihre Website einrichten, oder etwas wie Stack Path oder KeyCDN.
Media Temple bietet einen praktischen eine CDN und Web Application Firewall, alles in einem.
6) Lazy Load und verzögertes Laden von Dingen
Die Idee des Lazy Loadings besteht darin, dass Sie das Asset (wie ein Bild oder Video) erst anfordern, wenn es benötigt wird. Stellen Sie sich vor, Sie besuchen einen Blogbeitrag mit 6 Bildern, aber 5 davon befinden sich weit unten auf der Seite, und Sie scrollen nie nach unten. Warum die anderen 5 anfordern?
Es gibt viele Techniken für Lazy Loading, daher erlauben Sie mir, Sie einfach auf Jeremy Wagners Artikel auf Google Fundamentals zu verweisen, der das Konzept behandelt.
Die Idee, das Laden von JavaScript zu verzögern, ist einfach. Es gibt ausgefallene Wege, dies zu tun, wie z. B. Code-Splitting, aber die "Low Hanging Fruit" ist vielleicht, das Laden eines Skripts zu verzögern, indem man es am Ende der Seite platziert oder tatsächlich das defer-Attribut verwendet.
7) Responsive Bilder verwenden (oder zumindest vernünftige Größen)
Zak Nicola sagt, er habe "Home Runs" für lokale Geschäftskunden erzielt, indem er einfach die Bilder auf ihren Websites auf vernünftige Größen reduziert hat. Sie hatten riesige 4k-Bilder, die in einen 120x60px-Bereich eingefügt wurden. Igitt. Es ist häufiger als Sie denken.
Die Verwendung von Bildern in vernünftigen Größen ist ein schneller Erfolg. Schauen Sie sich Dave Ruperts Überlegungen zu 1,5x Bildern an. Das könnte ein guter Standard für alles sein.
Für etwas mehr Aufwand, schauen Sie sich die Verwendung von responsiven Bildern an, das ist spezielles HTML für Ihre Bilder, das den Fokus hat, das bestmögliche Bild für die jeweilige Situation zu liefern.
<img src="small.jpg"
srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah"><picture>
<source
srcset="examples/images/extralarge.jpg"
media="(min-width: 1000px)">
<source
srcset="examples/images/art-large.jpg"
media="(min-width: 800px)">
<img srcset="examples/images/art-medium.jpg"
alt="…">
</picture>
Erwägen Sie auch Dinge wie die Verwendung von stummgeschalteten, automatisch abspielenden Videos anstelle von GIFs.
8) Achten Sie auf Ihre Schriftarten
Die Verwendung von benutzerdefinierten Web-Schriftarten kann genauso viel zur Performance-Belastung beitragen wie die üblichen Verdächtigen: Bilder und JavaScript.
Benötigen Sie sie überhaupt? Wenn Sie ohne benutzerdefinierte Web-Schriftarten auskommen oder einige/alle der vorhandenen entfernen können, werden Sie sicherlich Performance-Gewinne erzielen. Schauen Sie sich vielleicht die Verwendung eines System-Font-Stacks an.
Wenn Sie sie verwenden müssen (ich verurteile Sie nicht, Typografie macht Spaß und verleiht einer Website viel Leben), haben Sie immer noch Optionen zur Verbesserung ihrer Performance. Die "Low Hanging Fruit" ist, die Verwendung von CSS in Ihren @font-face-Deklarationen für diese benutzerdefinierten Schriftarten in Form von font-display: optional; /* oder swap */ auszuprobieren. Damit werden die benutzerdefinierten Schriftarten niemals das Laden der Seite blockieren, sodass Sie FOUT (Flash of Unstyled Text) erleben können, aber niemals FOIT (Flash of Invisible Text). Die "unsichtbare" Situation wirkt sich am stärksten auf die Web-Performance aus. Seiten ohne Text sind ziemlich nutzlos.
Wie Brian P. Hogan sagt, geht es dabei um wahrgenommene Performance ebenso wie um tatsächliche Performance.
Wenn Sie sich mit der Performance des Ladens von Schriftarten intensiver beschäftigen möchten, werfen Sie einen Blick auf Zach Leathermans umfassenden Leitfaden zu Schriftarten-Ladestrategien.
9) Gutes Hosting / HTTP2 / PHP7
Es gibt einige "Low Hanging Fruit" für die Performance in Ihrem Webhosting selbst. Wenn Ihre Website unter langsamer Antwortzeit leidet, ist es vielleicht an der Zeit, auf etwas Leistungsfähigeres als Shared Hosting umzusteigen. Geld für ein Geschwindigkeitsproblem auszugeben, funktioniert nicht immer und ist nicht immer eine Option, aber manchmal ist es die perfekte Lösung. Und es ist definitiv "Low Hanging Fruit", da der Aufwand minimal ist.
Apropos Hosting, Ihr Webhoster kann Ihnen wahrscheinlich helfen, Ihr Hosting zu aktualisieren oder zu konfigurieren, um die besten verfügbaren Technologien zu nutzen.
Fragen Sie Ihren Hoster nach der Möglichkeit, HTTP/2 zu nutzen, und wenn Sie ein klassisches CMS wie WordPress oder CraftCMS verwenden, steigen Sie auf die neuesten Versionen von PHP und MySQL um, die in den letzten Jahren massive Performance-Verbesserungen erfahren haben.
10) Turbolinks
Dieses Turbolinks-Zeug ist ein kleiner Wildcard in dieser Liste, aber ich mag es, weil es, wenn es für Sie funktionieren kann, eine Leistungssteigerung mit wenig Aufwand bringt (wiederum "Low Hanging Fruit").
Haben Sie von SPAs (Single Page Apps) gehört? Die ganze Idee ist, dass, sobald die Website geladen ist, auch wenn Sie klicken, interagieren und zu anderen Seiten der Website navigieren, die Website niemals neu lädt. Zum Beispiel bauen Sie eine React-Website mit React Router. URLs ändern sich immer noch und alles Mögliche, aber der aufwändige Prozess eines vollständigen Seitenumbruchs findet nie statt. Alles sind Ajax-Anfragen und Neu-Rendering. Gut gemacht, sehr cool.
Turbolinks bringt diese Art von Verhalten auf eine Website, die ursprünglich nicht so aufgebaut war. Anstatt die Seite neu zu laden, holt es beim Klicken auf einen Link die Seite und rendert das, was auf der aktuellen Seite benötigt wird, neu.
Ressourcen
- 3 einfache Performance-Erfolge für Designer von Una Kravets
- Machen Sie die Dinge, die Lighthouse Ihnen sagt zu tun, wenn Sie es auf Ihrer Website ausführen.
- Lara Hogans Buch Designing for Performance
- Andrew Del Pretes Web Performance Basics
- Speed-Checkliste
- Essential Image Optimization von Addy Osmani