Website-Optimierung für GooglePage Speed ​​(alle Funktionen werden nach der Aktualisierung berücksichtigt) Teil 1

Dieser Artikel ist für alle interessant, die nach der Aktualisierung von Google PageSpeed ​​und den Behauptungen von Kunden oder dem Chef mit allen möglichen Problemen konfrontiert waren, warum der Ball gefallen ist oder es so viele Kommentare gab. Und auch für diejenigen, die die Website optimieren.
Zunächst ist zu erwähnen, dass in diesem Artikel meiner Meinung nach alles sehr kompetent und zugänglich gemalt ist.

Ich selbst werde weitere praktische Ratschläge hinzufügen, und es wird auch interessant sein, auf Ihren Standpunkt zu hören und Ihre Best Practices zu sehen.

Ich werde auflisten, worüber ich in diesem Artikel sprechen werde:

1. CSS und JS
   
   • Dateiverbindung
   • Laden von Bibliotheken
   • Tricks
   
   
2. Schriftarten
   
   • Schriftverbindung
   • Anzeigen von Schriftarten während des Ladens der Seite
   
   
3. Bilder
   
   • verschiedene Formate (jpg, png, webp, base64)
   • Sprite

Und wenn Sie bis zu diesem Moment bei diesem Artikel geblieben sind, sind Sie höchstwahrscheinlich interessiert (oder die Schaltfläche "Zurück" wurde für Sie deaktiviert). Nachfolgend finden Sie detailliertere Informationen zu den einzelnen Artikeln.

CSS und JS

Js

1. Die asynchrone Eigenschaft für Plug-In-Skripte (außer jQuery) ist erforderlich. Dies erspart Ihnen definitiv den Kommentar von GPSpeed ​​zum Laden asynchroner Skripte.
2. Der Rat ist alltäglich, aber sehr sinnvoll - versuchen Sie, komplexe und umfangreiche Bibliotheken auf ein Minimum zu beschränken.
3. Es ist besser, die Einstellungen Ihrer js-Bibliothek (Slick, Fancybox) oder kleine Codeteile, die unterschiedliche Aufgaben ausführen, mit einer Datei auf den Server hochzuladen. In meinem Fall befinden sich sowohl das Skript zum Senden von E-Mails als auch die Maske für Eingabe und Animation und alles in derselben build.js-Datei (auf die ich auch asynchron gesetzt habe.
4. Dieser Rat ist situativ, dh betrachten Sie die Situation. Wenn direkt nach dem Öffnen der Seite auf dem ersten Bildschirm eine Art Skript ausgeführt wird, ist es korrekter, sie separat zu verbinden und nicht asynchron zu machen

CSS

1. Hier etwas komplizierter. Sie müssen dem Link- Tag eine solche Eigenschaft hinzufügen.
   
   

   <link media="none" onload="if(media!="all") media="all"" rel="stylesheet" type="text/css", href= main.css> 

   
   In dieser Form werden Ihre CSS-Dateien erst nach dem DOM-Baum verbunden. Grob gesagt ist dies nur für .css dieselbe Asynchronität
2. Sehr wichtige und effektive Beratung! Er addiert garantiert 5 bis 10 Punkte. Sie müssen Ihre main.css in zwei Dateien aufteilen . Im ersten Fall werden nur die Stile für den Inhalt geladen, die unmittelbar nach dem Öffnen der Seite sichtbar sind. Dies ist die obere Leiste, die Kopfzeile, das erste Bild, das erste Formular usw. Im Allgemeinen, was Sie auf das "Gesicht" Ihrer Website setzen. Im zweiten ist alles andere schon.

Schriftarten

Ich habe eine neue CSS-Eigenschaft für Schriftarten entdeckt

 font-display 

Insbesondere der Swap- Parameter, der nicht auf das Laden Ihrer schönen und schweren Schrift wartet, zeigt Text im Browser mit der im selben Browser integrierten Schrift an (z. B. serifenlos). Dadurch wird einer der Fehler in GPSpeed ​​sofort behoben.

Es wird so aussehen

  @font-face { font-family: 'FontName'; src: local('FontName'), url('FontName.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } 

Es gibt auch ein solches Skript (Sie müssen fontfaceobserver.js für den Betrieb verbinden):

 <script> var html = document.documentElement; if (sessionStorage.fontsLoaded) { html.classList.add("fonts-loaded"); } else { var script = document.createElement("script"); script.src = "../js/fontfaceobserver.js"; script.async = true; script.onload = function() { var regular = new FontFaceObserver("FontName"); var bold = new FontFaceObserver("FontName", { weight: "bold" }); var light = new FontFaceObserver("FontName", { weight: "300" }); Promise.all([ regular.load(), bold.load(), light.load() ]).then(function() { html.classList.add("fonts-loaded"); sessionStorage.fontsLoaded = true; }); }; document.head.appendChild(script); } </script> 

Persönlich habe ich nicht wirklich geholfen, aber Sie versuchen es, vielleicht können Sie es besser kontrollieren. Immerhin habe ich ihn in der Weite gefunden, und die Leute sagten, das hilft wirklich.

Schriftverbindung

1. Grundsätzlich gibt es zwei Arten von Verbindungen: Verwenden eines Links (z. B. zum googeln von Schriftarten oder lokal auf dem Server. In Bezug auf die zweite Methode kann diese auch in zwei Teile unterteilt werden: eine separate CSS-Datei (über den Link verbinden wir fonts.css) ) und direkt über den Code (über Ihre style.css).
   Und da wir jetzt über die Optimierung der Site für GPSpeed ​​sprechen, habe ich sichergestellt, dass es besser ist, Schriftarten über Ihre CSS-Hauptdatei zu verbinden.
2. Ein weiterer hilfreicher Tipp ist, die Schriftdateien (woff, ttf usw.) neben Ihrer CSS-Datei abzulegen, die sie anfordert. Früher hatte ich einen separaten Ordner für Schriftarten auf dem Server, aber dann habe ich die Download-Geschwindigkeit für Schriftarten um das Zweifache erhöht. (Laut GPSpeed ​​habe ich 180 ms gebraucht, um die Muller-Schriftart zu verbinden, jetzt 70-90 ms)

Bilder, Bilder usw.

Ich garantiere für die nächsten 2 Tipps, sie haben nicht nur mir geholfen, sondern dem gesamten Büro und sogar meinen Freunden, die remote arbeiten.

1. Laden Sie absolut alle <img > Bilder mit Lazyloading herunter. Es wird so aussehen

 <img class="yourClass lazy" data-src="../images/image.jpg" alt=""/> 

Und vergessen Sie nicht, lazyload.min.js zu verbinden

2. Wenn die Seite viele SVG- Elemente enthält, ist es besser, sie mit sauberem Code hinzuzufügen, ohne das img-Tag unnötig zu verwenden. Darüber hinaus muss svg beispielsweise über diese Website jakearchibald.imtqy.com/svgomg (keine Werbung) gequetscht werden.

3. Trite, aber vergessen Sie nicht, ALLE Bilder auf der Website zusammenzudrücken. Sogar diejenigen, die 5kb wiegen. Obwohl diese 3 KB, die Sie gewinnen, die Download-Geschwindigkeit in keiner Weise beeinflussen, werden Sie den Fehler bei GPSpeed ​​beseitigen und sich bis zu 10 Punkte addieren.

! Der Problempunkt sind jetzt Bildformate. Wir sind nämlich besorgt über Webp, JPEG 2000, JPEG XR . In der Tat ist es jetzt eine der empfohlenen GPSpeed-Erweiterungen. Wie Sie wissen, werden sie von einigen Browsern immer noch nicht unterstützt, darunter der recht beliebte Mozila Firefox. Obwohl angekündigt wurde, dass dieses Format im März vollständig unterstützt wird , müssen wir noch ein weiteres Jahr warten, bis alle Benutzer dieses Browsers auf die neueste Version aktualisiert sind ... Ich habe eine Reihe von Websites und Skripten durchsucht, aber nichts Sinnvolles gefunden. Jetzt ist es an der Zeit, Ihnen eine Frage zu stellen: Verwenden Sie das Webp-Format oder andere neue Bildformate? Und wie machst du das?