Ich habe ziemlich viel Zeit damit verbracht, die Leistung dieser Site zu optimieren, und als Teil der laufenden Arbeit beobachte ich neue Technologien, die dazu beitragen könnten, die Geschwindigkeit für Besucher zu verbessern. Ich verfolge seit einiger Zeit die Einführung von Bildformaten der nächsten Generation und mit der Unterstützung durch Webbrowser, die jetzt ziemlich weit verbreitet sind, war es an der Zeit herauszufinden, wie man diese neuen Formate in WordPress nutzen kann.
Es sind mehrere Schritte erforderlich, die ich unten in Überschriften unterteilt habe
Unterstützung in nginx aktivieren
Der erste Schritt besteht darin, Ihren Webserver zu aktivieren (in meinem Fall nginx) um die Mime-Typen der neuen Formate zu erkennen. Dazu müssen Sie mime.types bearbeiten, das Sie wahrscheinlich unter /etc/nginx/mime.types finden. Ich habe den folgenden Abschnitt hinzugefügt
1 2 3 4 5 6 7 | image/heic heic; image/heif heif; image/heic-sequence heics; image/heif-sequence heifs; image/avif avif; image/avif-sequence avis; image/jxl jxl; |
Dateien automatisch bereitstellen, wo sie verfügbar sind
Der nächste Schritt besteht darin, nginx anzuweisen, Dateien automatisch bereitzustellen, wann immer sie vorhanden sind (und auf ältere Formate zurückzugreifen, bei denen keine neue Formatdatei vorhanden ist)
Bearbeiten Sie dazu zuerst die nginx-Hauptkonfigurationsdatei (normalerweise /etc/nginx/nginx.conf) und fügen Sie den folgenden Abschnitt in das http{} Abschnitt der Konfiguration
1 2 3 4 5 6 7 | map $http_accept $img_ext { ~image/jxl ‘.jxl’; ~image/avif ‘.avif’; ~image/webp ‘.webp’; default ”; } |
Beachten Sie, dass ich nur versuche, jxl . bereitzustellen (JPEG-XL) oder avif-Dateien, Sie könnten weitere Optionen hinzufügen (in der reihenfolge der präferenz!) wenn Sie wünschen.
Nächste, Sie müssen Folgendes unter dem Server hinzufügen{} Abschnitt der nginx-Konfiguration (die sich in der Hauptkonfigurationsdatei oder in einer separaten Konfigurationsdatei befinden kann, je nachdem, wie Sie Ihre nginx-Konfigurationsstruktur eingerichtet haben)
1 2 3 4 5 | location ~* ^.+\.(png|jpg|jpeg)$ { add_header Vary Accept; try_files $uri$img_ext $uri =404; } |
Jetzt sucht nginx nach image.jpg.jxl und dann nach image.jpg.avif und dann nach image.jpg.webp und schließlich nach image.jpg, wenn es von allen Browsern, die die neueren Formate unterstützen, nach image.jpg gefragt wird. Als nächstes müssen wir sie in WordPress aktivieren
Aktivieren Sie Next-Gen-Formate in WordPress
Fügen Sie Ihrer functions.php den folgenden Code hinzu (Mache dies idealerweise in einem Child-Theme, damit deine Änderungen nicht überschrieben werden, wenn du dein Theme aktualisierst)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /***************************************************\ * Enable SVG support and other modern image formats * \***************************************************/ function cc_mime_types( $mimes ) { $mimes[‘svg’] = ‘image/svg+xml’; $mimes[‘webp’] = ‘image/webp’; $mimes[‘heic’] = ‘image/heic’; $mimes[‘heif’] = ‘image/heif’; $mimes[‘heics’] = ‘image/heic-sequence’; $mimes[‘heifs’] = ‘image/heif-sequence’; $mimes[‘avif’] = ‘image/avif’; $mimes[‘avis’] = ‘image/avif-sequence’; $mimes[‘jxl’] = ‘image/jxl’; return $mimes; } add_filter( ‘upload_mimes’, ‘cc_mime_types’ ); |
Beachten Sie, dass ich auch die Unterstützung für . aktiviert habe SVG Bilder gleichzeitig
Jetzt können Sie Bilder im Next-Gen-Format hochladen und sie direkt in WordPress verwenden, wenn Sie möchten, aber ich empfehle dies nicht, da viele ältere Browser sie noch nicht unterstützen – und wir haben nginx bereits eingerichtet, um sie intelligent zu bedienen, also sollten wir das nutzen. Was wir tun möchten, ist, die neuen Formate automatisch zu generieren, wenn wir Bilder hochladen (es gibt bereits Plugins, die dies für webp tun, aber noch nichts was es für jxl oder avif tut).
libheif installieren
Dieser Schritt erfordert Zugriff auf die Befehlszeile Ihres Webhosts, was einfach ist, wenn du a läufst VPS, Dies ist jedoch möglicherweise nicht so einfach, wenn Sie auf Shared Hosting arbeiten. In diesem Fall müssen Sie möglicherweise Ihren Host um Unterstützung bitten
Führen Sie die folgenden Bash-Befehle aus (diese sind ausgewählt für Centos 8, andere Distributionen können etwas anders sein)
1 2 | dnf -y install –nogpgcheck https://download1.rpmfusion.org/free/el/rpmfusion-free-release‑8.noarch.rpm https://download1.rpmfusion.org/nonfree/el/rpmfusion-nonfree-release‑8.noarch.rpm dnf -y install libheif |
Benutzerdefinierte Funktion zu WordPress Functions.php hinzufügen, um alle hochgeladenen Bilder zu komprimieren (und ihre Thumbnails) zum avif-Format
Wie beim vorherigen Schritt functions.php empfehle ich, dies in einem Child-Theme hinzuzufügen
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | /*****************************\ * Convert png and jpg to avif * \*****************************/ add_filter( ‘wp_generate_attachment_metadata’, ‘jps_compress_img’, 10, 2 ); function jps_compress_img( $metadata, $attachment_id ) { // get filepath from id $filepath= get_attached_file($attachment_id); // is the file a png or jpeg if(pathinfo($filepath, PATHINFO_EXTENSION)==“jpg” || pathinfo($filepath, PATHINFO_EXTENSION)==“jpeg” || pathinfo($filepath, PATHINFO_EXTENSION)==“png”) { // If so, run compression of the main file to avif shell_exec(“heif-enc $filepath ‑o $filepath.avif ‑q 50 ‑A”); $parts = preg_split(‘~/(?=[^/]*$)~’, $filepath); // Then run compression of the thumbnails to avif $thumbpaths = $metadata[‘sizes’]; foreach ($thumbpaths as $key => $thumb) { $thumbpath= $thumb[‘file’]; $thumbfullpath= $parts[0] . “/” . $thumbpath; shell_exec(“heif-enc $thumbfullpath ‑o $thumbfullpath.avif ‑q 50 ‑A”); } } // give back what we got return $metadata; } //dont forget to delete the avifs if the attachments are deleted function jps_delete_avif($attachment_id) { $all_images= get_intermediate_image_sizes($attachment_id); foreach($all_images as $each_img) { $each_img_det= wp_get_attachment_image_src($attach_id,$each_img); $each_img_path= ABSPATH.‘wp-content’.substr($each_img_det[0],strpos($each_img_det[0],”/uploads/”)).’.avif’; shell_exec(“rm ‑f $each_img_path”); } } add_action( ‘delete_attachment’, ‘jps_delete_avif’ ); |
Derzeit ist es soweit – alle hochgeladenen Bilder werden in Avif-Kopien umgewandelt (unter Beibehaltung der Originale). Sie können alle Ihre Bilder regenerieren, um die Avif-Dateien zu erstellen, indem Sie ein Plugin verwenden using. Hinweis – Ich habe es noch nicht eingerichtet JPEG-XL-Komprimierung als Unterstützung dafür ist in Mainstream-Browsern noch nicht verfügbar (Obwohl es sich in Prerelease-Browsern befindet, wird es sehr bald kommen).
Während ich mich mit Formaten und Optimierung der nächsten Generation beschäftige, habe ich einen letzten Tipp – Komprimieren SVG Bilder mit gzip (oder noch besser zopfli und brotli). Dazu ist eine weitere benutzerdefinierte Funktion erforderlich…
Bonus: SVG Kompression
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /*************************************************\ * Compress SVG images more with brotli and zopfli * \*************************************************/ add_filter( ‘wp_generate_attachment_metadata’, ‘jps_compress_vectors’, 10, 2 ); function jps_compress_vectors( $metadata, $attachment_id ) { // get filepath from id $filepath= get_attached_file($attachment_id); // is the file an svg if(pathinfo($filepath, PATHINFO_EXTENSION)==“svg”) { // If so, run compression of it using zopfli and brotli shell_exec(“zopfli –gzip $filepath”); shell_exec(“brotli –best –output=$filepath.br $filepath”); } // give back what we got return $metadata; } |
Beachten Sie, dass in Ihrer nginx-Konfiguration gzip_static und brotli_static aktiviert sein müssen.
Selbstkompilieren für eine neuere Version
Ich habe festgestellt, dass auf Centos die neueste Version von heif-enc ist 1.7 was einige Fehler beim Erstellen von Avifs hat. Also habe ich mich entschieden, mein eigenes neueres zu kompilieren (1.12) baue und verwende das stattdessen. Dies war etwas kompliziert, da der aom-Codec als gemeinsam genutzte Bibliothek erforderlich war. Führen Sie dazu die folgenden Bash-Befehle aus. Stellen Sie sicher, dass Sie sie als normaler Benutzer ausführen, nicht als Root-Benutzer. Beachten Sie auch, dass einige dieser Befehle möglicherweise nicht unbedingt erforderlich sind, Es hat eine Weile gedauert, bis es funktionierte, und ich habe mir nur notiert, was funktioniert - ich bin keineswegs ein Linux-Experte!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | dnf install x265 x265-devel svt-av1 export CXXFLAGS=”$CXXFLAGS ‑fPIC” cd ~ git clone https://aomedia.googlesource.com/aom mkdir -p aom_build cd aom_build cmake ~/aom -DBUILD_SHARED_LIBS=true make sudo make install cp ./libaom.so.3 /usr/bin/local/libaom.so.3 cd ~ export PKG_CONFIG_PATH=~/aom_build/ LD_LIBRARY_PATH=$LD_LIBRARY_PATH:~/aom_build/ export LD_LIBRARY_PATH git clone –recurse-submodules –recursive https://github.com/strukturag/libheif.git cd libheif ./autogen.sh ./configure make sudo make install LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/bin/ export LD_LIBRARY_PATH |
Sobald du das getan hast, Stellen Sie sicher, dass es funktioniert, indem Sie es ausführen php -a und den folgenden Befehl ausführen
1 | shell_exec(“/usr/local/bin/heif-enc ‑A”); |
Sie sollten eine vollständige Ausgabe erhalten, nicht nur a 1 Leitungsfehler. Angenommen, das funktioniert in Ordnung, können Sie Ihre functions.php so ändern, dass jede der Shell-exec-Referenzen auf /usr/local/bin/heif-enc statt nur auf heif-enc verweist
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | /*****************************\ * Convert png and jpg to avif * \*****************************/ add_filter( ‘wp_generate_attachment_metadata’, ‘jps_compress_img’, 10, 2 ); function jps_compress_img( $metadata, $attachment_id ) { // get filepath from id $filepath= get_attached_file($attachment_id); // is the file a png or jpeg if(pathinfo($filepath, PATHINFO_EXTENSION)==“jpg” || pathinfo($filepath, PATHINFO_EXTENSION)==“jpeg” || pathinfo($filepath, PATHINFO_EXTENSION)==“png”) { // If so, run compression of the main file to avif shell_exec(“/usr/local/bin/heif-enc $filepath ‑o $filepath.avif ‑q 50 ‑A”); $parts = preg_split(‘~/(?=[^/]*$)~’, $filepath); // Then run compression of the thumbnails to avif $thumbpaths = $metadata[‘sizes’]; foreach ($thumbpaths as $key => $thumb) { $thumbpath= $thumb[‘file’]; $thumbfullpath= $parts[0] . “/” . $thumbpath; shell_exec(“/usr/local/bin/heif-enc $thumbfullpath ‑o $thumbfullpath.avif ‑q 50 ‑A”); } } // give back what we got return $metadata; } |
Haben Sie ein paar Gedanken des eigenen? Lassen Sie sich unten durch die Kommentierung! Wenn Sie bitte abonnieren möchten den Link oben rechts auf dem Menü abonnieren verwenden. Sie können auch unten unter Verwendung der sozialen Bindungen diese mit Ihren Freunden teilen. Prost.
Dhev auf Beheben von Google Rich Snippets Testing Tool Fehler: “Vielen Dank, dass Sie diese Informationen geteilt haben ... Ich würde diese Methode auf jeden Fall ausprobieren.”
Hinterlasse eine Antwort