So stoppen Sie das Laden unnötiger Dateien und reduzieren die HTTP-Anforderungen der Website – WordPress-Optimierungstipps
Veröffentlicht: 2020-09-08
Auf Crunchify haben wir mehrere Tutorials zur Geschwindigkeitsoptimierung veröffentlicht, auf die Sie sich jederzeit beziehen können.
Wir verwenden MaxCDN als unseren Inhaltsanbieter. Es ist fast 4 Jahre her und bisher funktioniert es zu gut. Genesis WordPress Framework und MaxCDN sind die beste Kombination. Standardmäßig kommt Genesis Framework mit vielen Optimierungen, Google Markup Schema, mobilfreundlicher Struktur und vielem mehr.
Letzte Woche schaute ich auf mein MaxCDN-Konto und bemerkte plötzlich Top-Download-Ressourcen. Wie Sie im obigen Bild sehen, wurden die top 9 out of 10 resource files in der letzten Woche mehr als ~ 5 millions Mal heruntergeladen.
Ich war überrascht und dachte, sollte ich diese Ressourcen wirklich brauchen? Muss ich diese Dateien separat laden? So entfernen Sie diese Dateien, wenn sie nicht benötigt werden, mit Ausnahme der style.css -Datei, die zum Laden der Website unbedingt erforderlich ist.
Beginnen wir damit, wie ich all diese 9 Dateien mit einfachen Tricks losgeworden bin
Nicht für alle Leser
Diese Schritte sind nicht für alle WordPress-Leser. Auf Crunchify verwenden wir Crayon Syntax Highlighter und benutzerdefinierte themenspezifische Bilder, sodass dies nur für eingeschränkte Benutzer gilt
Schritt 1
Lassen Sie uns list all of those 9 files . Die zweite Spalte zeigt, wie oft es heruntergeladen wurde.
|
1 2 3 4 5 6 7 8 9 |
/ wp - includes / js / wp - embed . min . js 12 , 626 , 575 2.41 GB / wp - content / plugins / crayon - syntax - highlighter / themes / neon / neon . css 11 , 406 , 345 2.61 GB / wp - content / plugins / crayon - syntax - highlighter / css / min / crayon . min . css 11 , 259 , 474 4.50 GB / wp - content / themes / crunchify / images / bg . png 9 , 268 , 221 3.45 GB / wp - content / themes / crunchify / images / bg - pattern . png 9 , 135 , 288 3.41 GB / wp - content / themes / crunchify / images / h3 . png 6 , 289 , 690 1.18 GB / wp - content / themes / crunchify / images / crunchify - logo . png 5 , 476 , 295 7.05 GB / wp - content / themes / crunchify / images / crunchify - sprite . png 5 , 334 , 562 7.45 GB / wp - content / plugins / crayon - syntax - highlighter / js / min / crayon . min . js 4 , 344 , 704 2.60 GB |
Schritt 2
Lassen Sie uns Crayon Syntax Highlighter Plugin-Dateien zusammenfassen.
Es gibt 3 Dateien:
neon.css , crayon.min.css und crayon.min.js . Ich habe ein komplettes separates Tutorial mit insgesamt 7 detaillierten Schritten geschrieben, um diese Dateien loszuwerden. Gehen Sie es bitte durch und lassen Sie es mich wissen, wenn Sie ein Problem sehen.
Schritt 3
Gehen Sie nun über wp-embed-min.js . Bitte besuchen Sie das Tutorial So deaktivieren Sie das automatische Einbettungsskript für WordPress 4.4+. Das Laden der Einbettungsdatei am Frontend wird beendet.
Schritt 4
Lassen Sie uns 3 more .png -Dateien durchgehen:
bg-Muster.png
Ich habe dieses Bild im Kopf- und Fußzeilenhintergrund geladen. Ich habe es losgeworden, indem ich stattdessen Farbe #333 verwendet habe.
crunchify-sprite.png
Ich habe dieses Sprite-Bild geladen, um Social-Follow-Buttons in der Seitenleiste anzuzeigen. Ich habe sie durch fontawesome Fonts ersetzt.
h3.png
Ich habe dies geladen, um an einigen Stellen ein Häkchen für H3-Posts anzuzeigen. Ich habe sie durch fontawesome Schriftarten ersetzt. Unten ist ein Fontawesome-Äquivalent.
Schritt-5
Jetzt haben wir nur noch 2 Dateien. crunchify-logo.png und bg.png , die ich behalten wollte. Anstatt also als Bild aufzurufen, habe ich das base64 -Bildäquivalent für diese Datei hinzugefügt.
Vor:
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( images / crunchify - logo . png ) no - repeat ; } |
Nach dem:
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( data : image / png ; base64 , iVBORw0KGgoAAAANSUhEUgAAAmIAAACACAYAAAHfQjXQAABi3UlEQVR42u1dCXhVxfXPQlhcUBEEAQUheQmEPTtucV9xAcLm2r91qYraWnetkR2Sl7AoikutXbRSq9ba1qot1rpVcamKVVFBUZGEbCQkJG + 5 //O778xjMrlbFpJHmPN957vv3WXu3Llzz/zmnDPnxMVp0hQTVF6Sd3zowaONsAPrVpJomz8nuL00x3DjwsK4hM6uW1VVVdjDOcHq6upgp1WqekWu4aXBZk3cb3BnNxg1xF+oQULyPsMw4pUGM2pra0d1WqUa75/sqcHo1Jld8QWgQaz2Ec/jRv0XelmnVaiiNOdxLw0298RBzzmV09TUhIcIoAdUVlbW46F27NhhNDQ0mA8cDAYN6YHrsaXzjqYHXoTrampqkqXjgZ07dxpKA4WpJ0X3id91dXWGuFcoFDLEfvn6DicvDfbyz9K3uvSEEDVAQyAQwANsFD1DbKkhE6R9YWqok6TGeB4PTvuMtWvXJqrXogehAWh7p7TveblnYT9RIpVRJD5j3heVvZXFKc/RxeYnXVmU8qohyeVKf8qrVX7feM+NVliQ3lPwmisykgrz83tckRHZ4r/XzwcVFHIGDyAehD8fAw8u9qufndhWVFTkyo2B8uTGo3KeUD9X3v+JXA/aPieXs2tlqrF+TUZSwwqfQY0XXlsQl0hbo9rvW1J7/7jD8Nvg454abfHMLMONl87KrndptAD3GvMTlXqR4KDyHxyihy2Tz1Wvo+PredSMl/YtU89XPuPoMfQm6kF+NFRVccou2n6ABqos9tXVlZoNiPPiA/emGqH7Uo0qf8qXnhrtqhPTNnlquJnZf3EqB71I9CxlX7T3SfsS5E9HvVb8l0dI+Rx8xtxrvxafI/3vSb+/Id7OjVse2R/5JI21BYnikzTWxkXqUhDXvL50judPdImHRgPffNaYUXExRKJHicGA+D2IAgw0xH/a4xVYNjvbU8PFYqNBJNDoeYkdPNmjtGhmZshLw3XFjEAlgijoURNVeUaQY0CnVyZ7RP+XSfCT8M8yGZ+uYKm3jdCTTk2aNMUqAZ/UrcqtV/VmUb3amqMNTOp1S7Vi7ll3b16nNxjhre1i2uSiJMDMYume71mFhQleGqtyRU64K16kPG+1IlYMhDrnM6R5lpfGKivpmsbatm3bQCsNrTq/lKdge/wzLg==) no-repeat; } |
Ich habe beide Bilder in Base64-Bilder konvertiert. Der Vorteil, den wir erhalten, ist, dass wir keine weitere Verbindung öffnen und eine HTTP-Anfrage an den Server für das Bild stellen müssen.
Weniger Anfrage = Bessere Seitenladezeit
Die Verwendung von SVG (Scalable Vector Graphic) image bietet einige Vorteile, da Bilder auf jede Größe skaliert werden können, ohne an Klarheit zu verlieren (außer sehr klein), was auf Retina-Displays großartig aussieht.
Diese Data URIs sind nicht auf .png oder Bilder beschränkt, sondern auf beliebige Ressourcen. Hier ist ein einfaches Konverter-Tool von .png zu .svg, das ich online verwendet habe.
Zusammenfassung
Dieses Tutorial ist Teil des Abschnitts So beschleunigen Sie WordPress und steigern die Leistung. Dort finden Sie alle Tricks und Tipps zur WordPress-Optimierung.
Durch diese Schritte habe ich alle 9 unerwünschten Ressourcen von 10 entfernt. Das bedeutet – meine Seite wird viel schneller geladen, da auf jeder Seite 9 Anfragen weniger sein werden
Lassen Sie mich wissen, wenn Sie weitere Tipps haben, die die Seitengeschwindigkeit der Website verbessern. Bei Crunchify ist Geschwindigkeit das Hauptkriterium und das ist der Grund, warum wir sehr wenige Plugins verwenden. Alle Seiten werden within half a second geladen.
