Sehen wir uns Schritt f\u00fcr Schritt den Prozess an, um die Leistung und Geschwindigkeit einer Website zu verbessern. Unten ist der Screenshot meines Website-Scores auf Google Page Insight.<\/p>\n
Ist Ihnen schon einmal die Meldung Renderblocking JavaScript und CSS in Inhalten \u00fcber dem Falten aufgefallen? Wenn Sie CSS und JS nicht standardm\u00e4\u00dfig enthalten,<\/a> kann dies Ihre Website verlangsamen. Als Faustregel gilt, dass CSS in eine Kopfzeile und JS in eine Fu\u00dfzeile eingef\u00fcgt werden sollte. Sie sollten darauf achten, dass Ihre Website dieser Standardpraxis folgt.<\/p>\n Bilder spielen eine wichtige Rolle bei der Verbesserung der Benutzererfahrung. Auff\u00e4llige Bilder halten Ihre Benutzer mit den Inhalten in Kontakt. Aber die Verwendung von schweren Bildern t\u00f6tet fast die Geschwindigkeit Ihrer Website. Wenn Sie beispielsweise ein Bild mit einer Gr\u00f6\u00dfe von 2 MB auf die Website hochgeladen haben, ben\u00f6tigen diese 2 MB beim Laden der Seite eine zus\u00e4tzliche Zeit, um das Bild zu laden, bevor Ihre Seite dem Publikum pr\u00e4sentiert wird.<\/p>\n Hier kommt das Konzept der Optimierung von Bildern<\/strong> vor der Verwendung. Es gibt mehrere Plugins, die diese Aufgabe \u00fcbernehmen, Bilder aus Ihrer Medienbibliothek zu komprimieren. Einige beliebte Plugins sind<\/p>\n Alle diese Plugins funktionieren gut. Ich w\u00fcrde empfehlen, das TinyPNG-Plugin zu verwenden. Ich verwende dieses Plugin f\u00fcr meine Website und bin damit sehr zufrieden.<\/p>\n In einigen F\u00e4llen m\u00fcssen wir Bilder au\u00dferhalb der Medienbibliothek anzeigen. Wir erstellen ein benutzerdefiniertes Verzeichnis und laden Bilder darin hoch und verwenden diese Bilder dann auf der Website. Ich habe einen Artikel \u00fcber Optimieren von<\/a> Bildern beim<\/a> Hochladen<\/a> und TinyPNG Compress Images geschrieben<\/a>. Bitte lesen Sie diese Artikel, wenn Sie keine Medienbibliothek f\u00fcr Bilder verwenden.<\/p>\n Tipp: Beschneiden Sie die Bilder einer Gr\u00f6\u00dfe, die Sie anzeigen m\u00f6chten. Nehmen wir an, Sie haben einen Container der Gr\u00f6\u00dfe 300*250. In diesem Fall sollten Sie das Bild gem\u00e4\u00df der Containergr\u00f6\u00dfe zuschneiden. Verwenden Sie kein gr\u00f6\u00dferes Bild in einem kleinen Beh\u00e4lter. Dies wirkt sich auch auf die Site-Performance aus.<\/p>\n Lazy Load Images<\/strong> hilft, Ihre Website zu beschleunigen. Mit dem Lazy-Load-<\/a> Plugin werden Ihre Bilder nicht geladen, bis der Benutzer zu ihnen scrollt. Es hilft, die Gr\u00f6\u00dfe Ihrer Seite zum Zeitpunkt des Ladens zu reduzieren.<\/p>\n Wenn Sie Lazy-Load-Bilder ohne Plugin implementieren m\u00f6chten, lesen Sie bitte unseren Artikel zur Verbesserung der Website-Performance durch Lazy-Load-Bilder<\/a>.<\/p>\n Soweit Ihre Datenbankgr\u00f6\u00dfe klein ist, reagiert Ihr Server schnell auf Datenbankanfragen, die von der Website kommen. Sobald Ihre Datenbank zunimmt, braucht Ihr Server mehr Zeit, um zu reagieren.<\/p>\n In WordPress werden im Laufe der Zeit mehrere verwaiste Daten in Ihrer Datenbank gespeichert. Wenn Sie beispielsweise einen Beitrag oder eine Seite aktualisieren, speichert WordPress jedes Mal die \u00dcberarbeitung in der Datenbank. Ich w\u00fcrde es vorziehen, nur die letzten 3 Revisionen zu behalten, die v\u00f6llig ausreichend sind. Um \u00dcberarbeitungen bis zu dreimal aufzubewahren, m\u00fcssen Sie den folgenden Code in Ihre wp-config.php-Datei einf\u00fcgen.<\/p>\n Der obige Code begrenzt die Anzahl der Revisionen. Es gibt einige andere Tabellen, die ebenfalls optimiert werden sollten. Ich empfehle, WP-DBManager<\/a> oder WP-Sweep-<\/a> Plugins zu verwenden, um Ihre Datenbank zu optimieren.<\/p>\n Dank an Ingenieure, die das Konzept des Browser-Cache eingef\u00fchrt haben. Wenn ein Benutzer Ihre Website besucht, speichert der Browser des Benutzers Ihre Seite im tempor\u00e4ren Speicherort des Browsers. Wenn der Benutzer die Website das n\u00e4chste Mal besucht, pr\u00e4sentiert der Browser den Benutzern die Seite aus dem zuletzt gespeicherten Cache, anstatt die ganze Seite erneut zu laden. Dies reduziert die Bandbreitennutzung sowohl auf Benutzer- als auch auf Serverseite. Die Verwendung des Caches f\u00fcr Ihre Website beschleunigt die WordPress-Website erheblich. Einige der beliebtesten Cache-Plugins sind wie folgt.<\/p>\n Wenn Sie Browser-Caching nutzen, werden Ihre Webseitendateien im Browser-Cache gespeichert. Ihre Seiten werden f\u00fcr wiederkehrende Besucher viel schneller geladen. F\u00fcgen Sie den folgenden Code in die htaccess-Datei Ihrer Site ein und er erm\u00f6glicht Ihnen das Browser-Caching.<\/p>\n Hinweis: In WordPress verwenden einige Plugins externe Ressourcen. Wir k\u00f6nnen keine Ablaufheader f\u00fcr diese externen Ressourcen festlegen. Eine M\u00f6glichkeit besteht darin, diese externen Dateien auf Ihrem Server zu speichern und sie dann in Ihre Website einzubinden.<\/p>\n Ich hoffe, Sie verstehen, wie Sie die WordPress-Website beschleunigen k\u00f6nnen. Wenn ich etwas \u00fcbersehen habe oder Sie andere Techniken verwenden, teilen Sie dies bitte in den Kommentaren unten mit.<\/p>\n![\"6](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20834-60822fd29f5de.png\")
<\/a><\/p>\nSchritt 1 \u2013 CSS und JS standardm\u00e4\u00dfig einbinden<\/h3>\n
Schritt 2- Optimieren Sie die Bilder vor der Verwendung<\/h3>\n
\n
Schritt 3- Lazy Load Images<\/h3>\n
Schritt 4- Optimieren Sie die Datenbank<\/h3>\n
define('WP_POST_REVISIONS', 3);<\/code><\/pre>\nSchritt 5- Verwendung des Caches<\/h3>\n
\n
Schritt 6 \u2013 Browser-Caching nutzen<\/h3>\n
<IfModule mod_expires.c>\nExpiresActive On\nExpiresByType image\/jpg \"access plus 1 year\"\nExpiresByType image\/jpeg \"access plus 1 year\"\nExpiresByType image\/gif \"access plus 1 year\"\nExpiresByType image\/png \"access plus 1 year\"\nExpiresByType text\/css \"access plus 1 month\"\nExpiresByType application\/pdf \"access plus 1 month\"\nExpiresByType text\/x-javascript \"access plus 1 month\"\nExpiresByType application\/x-shockwave-flash \"access plus 1 month\"\nExpiresByType image\/x-icon \"access plus 1 year\"\nExpiresDefault \"access plus 2 days\"\n<\/IfModule><\/code><\/pre>\n