Geekly articles weekly

Wir beschleunigen Google PageSpeed ​​auf 100 und mehr

Google PageSpeed

Einfache und nĂŒtzliche Tipps, mit denen Sie Ihre Website maximieren können, ohne sich mit den Messwerten von Google PageSpeed ​​und Lighthouse befassen zu mĂŒssen.

Javascript

  • Versuchen Sie, anstelle von JavaScript hĂ€ufiger HTML5-Tags zu verwenden: <Eingabetyp = Datum>, <Eingabetyp = Zeit>, Details / Zusammenfassung usw.

    Wir vergessen sehr oft oder wissen gar nicht, welche vorgefertigten Lösungen in Browsern integriert sind, die auf verschiedenen GerÀten besser funktionieren und keinen zusÀtzlichen JavaScript-Code erfordern.
  • Verwenden Sie die Minimierung des JavaScript-Codes.
  • Versuchen Sie, Ihren gesamten JavaScript-Code in die Fußzeile zu setzen oder das Laden zu verzögern. Je weniger JavaScript in <head> vorhanden ist, desto besser ist die Leistung in Google PageSpeed.
  • <script src = "Dateipfad"> erfordert zusĂ€tzlichen Zugriff auf den Server. Denken Sie daran.

    Wenn Sie anstelle einer JavaScript-Datei den Inhalt der Datei in die Fußzeile einfĂŒgen:

    <script>   </script>

    Dann wird der erste Download schneller sein, aber die JavaScript-Datei wird nicht zwischengespeichert.

Verzögertes Laden

  • Verwenden Sie das verzögerte (verzögerte) Laden fĂŒr Bilder, Iframe, Video, Audio, Javascript und andere Ă€hnliche Objekte. Es sollte fĂŒr Elemente enthalten sein, die sich in Popups oder auf dem zweiten und nĂ€chsten Bildschirm der Seite befinden.
    FĂŒr diese Zwecke gibt es viele Bibliotheken: Lazyload, Lazysizes, Autoload usw.
  • Sie können das native verzögerte Laden in Chrome verwenden.
  • VK bietet an, eine JavaScript-Codeverbindung in <head> zu platzieren, damit das Kommentar-Widget funktioniert. Dies verringert jedoch die Geschwindigkeit von Google PageSpeed ​​und das Laden von Seiten.

    Anstelle des von VK angebotenen Codes:

     <!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="https://vk.com/js/api/openapi.js?162"></script> <script type="text/javascript"> VK.init({apiId: ID, onlyWidgets: true}); </script> <!-- Put this div tag to the place, where the Comments block will be --> <div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); </script>

    FĂŒgen Sie den leicht geĂ€nderten Code unter dem verzögerten Download ein:

     <div id="vk_comments"></div> <script onload="showvk()" data-aload data-original="https://vk.com/js/api/openapi.js?162"></script> <script> function showvk() { VK.init({apiId: ID, onlyWidgets: true}); VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); } </script>

    Als Ergebnis erhalten wir einen Code, der nur geladen wird, wenn der Bildschirm zum Widget rollt.

    Der Kartencode, den Google zum Einbetten in die Website anbietet:

     <iframe src="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

    Wenn sich die Karte im Popup oder weit in der Fußzeile befindet, lĂ€dt eine Person, die Ihre Seite besucht, sofort viel mehr aus diesem Frame und die Ladegeschwindigkeit einer solchen Seite ist sehr langsam. Google PageSpeed ​​gibt Ihnen ein Minus und ein großes!

    FĂŒgen Sie den leicht geĂ€nderten Code unter dem verzögerten Download ein:

     <iframe data-aload data-original="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

    Es kommt darauf an, den Browser nicht sofort src = "" zu geben, sondern nur, wenn eine Person ihn wirklich braucht. Und so mit all den Objekten!

Jquery

  • Wenn möglich, verwenden Sie Jquery nicht in Ihren Projekten. Dies erhöht die Geschwindigkeit Ihrer Website erheblich. Wenn Sie sie jedoch bereits verwenden, ersetzen Sie sie schrittweise durch reines natives JavaScript.
  • Wenn Sie Jquery mit <head> verbinden, wird die Anzeige der Seite blockiert, da der Browser wartet, bis alles in <head> geladen ist, und erst dann die Seite anzeigt. Da die Bibliothek selbst klein ist und das Internet fĂŒr alle schnell ist, hat dies nur geringe Auswirkungen auf die Geschwindigkeit. Wenn Google die Bewertung senkt, sind es ungefĂ€hr 0,5, obwohl es vor 10 oder 20 Punkten dafĂŒr gedreht wurde ...
  • Der gesamte von Ihnen geschriebene JQuery-Code oder die von Ihnen verwendeten JQuery-Bibliotheken werden aufgrund der blockierenden Anzeige besser in der Fußzeile der Site platziert. Wenn Sie es nicht in die Fußzeile ĂŒbertragen können, sollten Sie möglicherweise die verzögerte CodeausfĂŒhrung verwenden, einen Artikel zu diesem Thema: Verwenden Sie .ready () sicher, bevor Sie jQuery einschließen .

Schriftarten

  • Google-Schriftarten
    1. Wenn Google die Schriftart schon lange verbindet, stellen Sie sicher, dass Sie sie erneut verbinden, da das Vorhandensein von & display = swap in der URL wichtig ist. Dies ist eine neue Option, die sich auf Google PageSpeed ​​auswirkt und es Ihnen ermöglicht, Text auf der Seite anzuzeigen, bevor Sie die Schriftart laden ... nicht immer schön, aber sie nimmt zu Anzeigegeschwindigkeit der Website ... und wirkt sich auf Google PageSpeed ​​aus
    2. Wenn es möglich ist, Google-Schriftarten durch Ihre eigenen zu ersetzen, ist es besser, wenn sich die Schriftarten auf Ihrem Server befinden. Dies erhöht auch die Geschwindigkeit.
    3. Versuchen Sie bei der Auswahl einer Schriftart in Google Fonts, das Minimum an Optionen auszuwÀhlen, wÀhlen Sie nur das aus, was Sie benötigen. Wenn Sie auf der Website keine schrÀge Schriftart oder eine Dicke von 200 verwenden, wÀhlen Sie diese Option nicht in den Einstellungen aus, da dies die Download-Geschwindigkeit beeinflusst.

  • Benutzerdefinierte Schriftarten

    1. ÜberprĂŒfen Sie, ob die Schriftart im CSS-Stil angezeigt wird: swap; In Ihren Schriftarten achtet Google PageSpeed ​​darauf und unterschĂ€tzt, ob sich dieser Stil nicht lohnt:

       @font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; }
    2. Wenn Sie Schriftarten ĂŒber ein separates Stylesheet verbinden, wirkt sich dies auf den Zeitpunkt des ersten Renderns aus und verringert die Leistung von Google PageSpeed. Es ist besser, dies nicht zu tun:

       <link href="/fonts.css" rel="stylesheet">

      Wenn Sie eine Schriftartverbindung ĂŒber das <style> -Tag und nicht ĂŒber <link> in <head> einfĂŒgen, werden die Download-Geschwindigkeit und die Leistung von Google PageSpeed ​​verbessert, da der Browser nicht separat auf Ihr Stylesheet zugreifen muss:

       <head> <title>Demo</title> <style> @font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; } </style> </head>
    3. Wenn möglich, entfernen Sie alle unnötigen Dinge, die Sie nicht verwenden, aus Ihren Schriftdateien, um die Download-Geschwindigkeit zu erhöhen.
    4. Sie können die Schrift in zwei Schritten laden: Entwickeln einer robusten Strategie zum Laden von Schriftarten fĂŒr CSS-Tricks

CSS

  • Versuchen Sie, ĂŒberschĂŒssigen CSS-Code fĂŒr alte Browser zu entfernen, einschließlich der PrĂ€fixe -moz- -o- -ms- -webkit-
  • Versuchen Sie, keine Stile zu laden, die auf dieser Seite nicht verwendet werden, aber auf anderen Seiten der Site verwendet werden.
  • Wenn möglich, lohnt es sich, Teile des CSS- und HTML-Codes durch verzögertes Laden zu laden.
  • Das Laden von Stilen mit <link href = 'st.css' rel = 'stylesheet'> verlangsamt das Laden und Rendern der ersten Seite, ermöglicht es dem Browser jedoch, diese Datei zwischenzuspeichern.

    Wenn Sie fĂŒr jede Seite eindeutige Stile haben oder fĂŒr Sie wichtiger ist, dass das Laden der ersten Seite etwas schneller erfolgt, fĂŒgen wir anstelle der Datei das Stil-Tag ein:

     <style>   </style>
  • Verwenden Sie die CSS-Minimierung wie Cssresizer oder andere Ă€hnliche Tools.

HTML

  • Je mehr HTML-Tags auf der Seite vorhanden sind, desto mehr Ressourcen benötigt der Browser, um die Seite zu rendern. Dies wirkt sich auf die Leistung von Google PageSpeed ​​aus, jedoch nur, wenn Ihre Seite mit Tags zu ĂŒberladen ist.
  • Vermeiden Sie eine Überverschachtelung von HTML-Tags. Google PageSpeed ​​achtet ebenfalls darauf.
  • Es lohnt sich, Ihren HTML-Code aus dem Code fĂŒr Ă€ltere Browser zu entfernen, da dieser Code normalerweise eine große Anzahl zusĂ€tzlicher und verschachtelter Tags erstellt.
  • Die Anzahl der Tags und die Verschachtelung wirken sich besonders stark auf Google PageSpeed ​​fĂŒr Handys aus.

Bilder

  • Verwenden Sie das <picture> -Tag, um moderne Bildformate (JPEG 2000, JPEG XR und WebP) zu verwenden. Google PageSpeed ​​achtet darauf, wenn Sie Bilder nicht verzögert laden.

     <picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt=""> </picture>

    Sie können auch Medien verwenden und unterschiedliche Bilder durch unterschiedliche Auflösungen und unterschiedliche Pixeldichten ersetzen.

     <source media="(max-width: 640px)" srcset="image.png, image-retina.png 2x">

    Dies ist sowohl fĂŒr Bilder als auch fĂŒr Videos nĂŒtzlich.

    Minuspunkt: Sie benötigen viel Speicherplatz, da Sie unterschiedliche Bildformate (Videos) und unterschiedliche Auflösungen speichern mĂŒssen.
  • Verwenden Sie das verzögerte Laden fĂŒr alle Bilder, die sich in Popups oder auf dem zweiten und nĂ€chsten Bildschirm der Seite befinden.
  • Verwenden Sie die maximale Komprimierung von Bildern. Google PageSpeed ​​macht auch darauf aufmerksam. Es gibt viele Komprimierungswerkzeuge, eines zum Beispiel: compressor.io

Servereinstellungen

  • Aktivieren Sie das Zwischenspeichern statischer Dateien (Schriftarten, Skripte, Bilder, CSS usw.), wĂ€hrend Sie das Jahr des Zwischenspeicherns festlegen, andernfalls schwört Google.
  • Aktivieren Sie die gzip-Komprimierung.
  • Verwenden Sie die HTTP-Header Last-Modified und If-Modified-Since, um Seiten zwischenzuspeichern.

Kommunikation

  • Die Ergebnisse hĂ€ngen stark davon ab, wie weit Ihr Server von Ihnen entfernt ist. Wenn Sie in Hawaii sind und der Server in Moskau ist, sind die Ergebnisse fĂŒr Sie katastrophal.
  • Die Ergebnisse hĂ€ngen von Ihrem Server und Computer ab. Wenn der Server oder Computer wĂ€hrend der Tests mit etwas ĂŒberlastet wurde, ist das Ergebnis schlecht.

Fazit

Es ist unmöglich, PageSpeed ​​108 oder mehr Punkte zu drĂŒcken :)

Es ist sinnlos, auch nur 100 Punkte unter das Handy zu drĂŒcken. Wir mĂŒssen 100 anstreben und dĂŒrfen nicht in Paranoia verfallen! Dies ist nur einer von vielen Indikatoren, die fĂŒr die Site wichtig sind.

Sie können ein Beispiel einer Seite sehen, auf der die Anzeigen fĂŒr Mobiltelefone 97-98 und 100 fĂŒr einen Computer sind.

Auf dieser Seite befinden sich 2 YouTube-Videos in Popups und das Video wird nur aktiviert, wenn das Popup geöffnet ist.

Alle Bilder werden verzögert geladen.

Das gesamte JavaScript wird von <head> in der Fußzeile der Seite gerendert.

Gleichzeitig sind jedoch folgende Elemente mit <head> verbunden: Jquery-, GoogleFonts- und Yandex-ZĂ€hler (Google).

Stile werden in das <style> -Tag der Stilcodes </ style> eingefĂŒgt.

<Bild> wird auf dieser Seite nicht verwendet.

Es gibt eine Reihe von Abschnitten auf der Seite, die auf der Seite vorhanden sind, aber nur ĂŒber einen direkten Link fĂŒr Kunden zugĂ€nglich sind. Sie mĂŒssen nach Bedarf geladen werden, wodurch sich die Anzahl der HTML- und CSS-Codes verringert.

Vielen Dank fĂŒr Ihre Aufmerksamkeit!

Source: https://habr.com/ru/post/de467503/

More articles:


All Articles