Share
Wenn Sie die Leistung einer Website manuell optimieren möchten, ohne einen vorgefertigten Ansatz wie AMP zu verwenden, müssen Sie die wichtigsten Schritte ausführen?
In diesem Video aus meinem Kurs "Optimieren Sie Ihre Website ohne AMP" finden Sie eine einfache Checkliste, mit der Sie sicherstellen können, dass Ihre Website genauso schnell geladen wird wie mit AMP, wenn nicht schneller.
Hier ist die grundlegende Checkliste für die Optimierung, mit der wir arbeiten werden:
Wie Sie sehen, ist diese Checkliste Teilaufgaben, die wir erledigen müssen, Teilprinzipien, die wir befolgen müssen, und Teilziele, die wir erreichen wollen. Lassen Sie uns jeden von ihnen genauer betrachten.
Das erste, was auf unserer Liste steht, ist ein Ziel. Wir möchten, dass unsere Website genauso schnell oder schneller geladen wird wie die AMP-Version derselben Website. Es ist eine gute Idee, während des Entwicklungsprozesses immer auf Ihre Ladezeit zu achten. Dies ist, was wir tun werden, wenn wir alles durcharbeiten.
Lassen Sie uns nun auf die technischen Dinge eingehen, die wir tun müssen. Die erste Überlegung ist, dass wir alle Web-Schriftarten, die wir verwenden werden, so schnell wie möglich laden möchten.
Webfonts sind häufig relativ große Dateien und Sie können Ihren Inhalt erst dann richtig anzeigen, wenn diese Webfonts geladen werden. Wir werden also sicherstellen, dass diese Web-Fonts sehr früh im Bild geladen werden, wahrscheinlich als erstes, was mit dem Laden beginnt.
Als Nächstes stellen wir sicher, dass unser CSS sehr effizient und sehr klein ist.
Manchmal können Sie versucht sein, eine Abkürzung zu nehmen und eine umfangreiche Bibliothek mit CSS in Ihre Websites aufzunehmen, um den Entwicklungsprozess zu beschleunigen, auch wenn der Großteil dieses CSS nicht erforderlich ist.
Das Ablegen einer massiven CSS-Datei kann zwar die Entwicklung beschleunigen, wird jedoch Ihre Website verlangsamen und die Leistung Ihrer Websites in Suchmaschinen beeinträchtigen. Ich sage das, weil die Ladegeschwindigkeit jetzt ein Rankingfaktor ist. Daher ist es wichtig, dass Ihr CSS so klein und effizient wie möglich ist.
Sie werden auch das CSS nehmen und es inline in den Kopfbereich der Site laden. Dies ist eine Technik, die AMP verwendet, und es ist eine hervorragende Optimierungstechnik. Daran werden wir uns auf jeden Fall mit unserem eigenen Optimierungsprozess halten.
Obwohl unser CSS im Kopfbereich Inline sein wird, möchten wir unser CSS immer noch in separaten Dateien bearbeiten. Der Versuch, CSS direkt in den Kopfbereich einer HTML-Datei zu schreiben, ist wirklich nicht sehr praktisch. Wir werden also alles so einrichten, dass wir unsere CSS-Dateien extern bearbeiten und später in den HTML-Dateien inline einfügen können, sodass wir das Beste aus beiden Welten erhalten.
Das nächste, was wir tun werden, ist sicherzustellen, dass das von uns verwendete JavaScript so weit wie möglich kombiniert und minimiert wird.
Ein Nachteil der Arbeit mit AMP ist, dass Sie mehrere JavaScript-Dateien mitbringen müssen, und jede einzelne muss separat eingegeben werden. Wir werden unser JavaScript jedoch so weit wie möglich in einer einzigen Datei zusammenfassen, so dass wir die minimale Anzahl von Browseranfragen haben.
Um beides zu ermöglichen, extern mit CSS zu arbeiten und JavaScript zu kombinieren und zu minimieren, werden wir einen Build-Prozess einrichten, der beides automatisch bewirkt.
Wir werden Gulp dafür benutzen. Das bedeutet, dass Node auf Ihrem System installiert sein muss, und Sie müssen sich auch ein bisschen mit dem Terminal beschäftigen. Aber während des Kurses stelle ich Sie durch, was zu tun ist. Wenn Sie also noch nicht mit dem Terminal gearbeitet haben, sollten Sie damit zufrieden sein.
Als nächstes werden wir nur asynchrones (asynchrones) JavaScript verwenden. Dies bedeutet, dass die Art und Weise, wie wir unser JavaScript laden, nicht verhindern wird, dass andere Elemente auf der Seite gleichzeitig geladen werden.
Eine andere Sache, die wir mit unserem JavaScript machen werden, ist, dass wir es verschieben. Das bedeutet, dass wir unser JavaScript bis zum Ende des Rendering-Prozesses durchsetzen werden. Wir werden sicherstellen, dass alles andere auf unserer Website voll geladen ist, bevor wir überhaupt etwas mit JavaScript tun.
Wir werden auch sicherstellen, dass jedes von uns verwendete JavaScript Vanilla-JavaScript ist, und wir tun dies, um sicherzustellen, dass wir keine Abhängigkeiten haben. Wenn wir beispielsweise einen Leuchtkasten verwenden, der von jQuery abhängt, müssen wir jetzt jQuery in unsere Site laden. Dies bedeutet mehr Dateigröße und mehr Verarbeitungsaufwand für den Browser.
Es ist oft nicht notwendig, mehrere JavaScript-Bibliotheken zu verwenden. Mit Vanilla-JavaScript können Sie die gewünschte Funktionalität oft genauso gut erreichen.
Wir bevorzugen auch einfaches JavaScript. Wir werden also versuchen, die Dateigröße unseres JavaScript auf ein absolutes Minimum zu reduzieren. Wir wollen nicht viel Schnickschnack; wir wollen alles so eng und effizient wie möglich halten.
Und der letzte Punkt in Bezug auf JavaScript ist, dass wir sicherstellen möchten, dass wir Menschen, die JavaScript deaktiviert haben, so gut wie möglich unterstützen.
Mit der AMP-Version der Website, die wir erstellen werden, können Sie, wenn Sie JavaScript deaktivieren, sehen, dass wir nicht viel Inhalt sehen müssen.
Es gibt noch ein bisschen mehr, was wir mit dieser Site tun könnten, um sie rückfallfreundlicher zu machen. AMP ist jedoch zum größten Teil vollständig auf JavaScript angewiesen, um Ihnen jegliche Art von Inhalten zu bieten.
Mit unserer Nicht-AMP-Version ist unser Hintergrundbild immer noch gut dargestellt, und wir fügen auch hier einige Fallbacks für die Zeichensymbole ein, da häufig auch Personen, die JavaScript blockieren, Schriftarten blockieren.
Wir haben eine Nachricht, die die Leute darüber informiert, warum das YouTube-Video nicht angezeigt werden kann, und unter demselben Code, wo sich unser CodePen befinden würde.
Unsere Galerie zeigt sich immer noch genauso und unten im Hintergrund haben wir nur die Textversion unserer Tweets als Fallback für den Fall, dass kein JavaScript vorhanden ist.
Wir werden auch sicherstellen, dass wir Lazy Loading sowohl für Bilder als auch für Iframes verwenden. Wenn Sie eine Website haben, die ziemlich lang ist, wird die Person in der Regel zuerst nachsehen, was sich oben auf der Website befindet, und dann wird nach unten geblättert und der Rest des Inhalts betrachtet.
Sie möchten jedoch nicht, dass sie warten, bis der Rest des Inhalts geladen ist, bevor sie mit dem Inhalt des Inhalts beginnen können. Beim langsamen Laden laden Sie also nur das, was sich oben befindet, und laden Sie dann allmählich den Rest des Inhalts, wenn die Person nach unten scrollen.
Schließlich stellen wir auch sicher, dass wir das Reflow verhindern. Was Sie besonders auf mobilen Geräten häufig sehen werden, ist, dass sich langsamere Elemente wie beispielsweise Bilder in das restliche Seitenlayout um das neu geladene Bild anpassen müssen.
Das ist aus mehreren Gründen schlecht:
Im gesamten Kurs, Optimieren Sie Ihre Website ohne AMP, setzen Sie diese Checkliste in die Praxis um. Sie erfahren genau, wie Sie eine vorhandene AMP-basierte Site in andere AMP-Äquivalente konvertieren. Mit anderen Worten, Sie lernen, wie Sie Ihre Websites schnell zum Flammen bringen können, mit Optimierungstechniken, die Sie selbst entscheiden.
Sie können diesen Kurs mit einem Abonnement von Envato Elements sofort absolvieren. Für eine einmalige geringe monatliche Gebühr erhalten Sie nicht nur Zugriff auf diesen Kurs, sondern auch auf unsere wachsende Bibliothek mit über 1.000 Videokursen und branchenführenden eBooks für Envato Tuts+.
Außerdem erhalten Sie jetzt unbegrenzte Downloads aus der riesigen Envato Elements-Bibliothek mit mehr als 400.000 kreativen Elementen. Erstellen Sie mit einzigartigen Schriftarten, Fotos, Grafiken und Vorlagen und sorgen Sie schneller für bessere Projekte.
Accentsconagua