PageSpeed Optimierung für Webseite - SEO – revilodesign.de https://www.revilodesign.de/blog/pagespeed/ Thu, 24 Apr 2025 20:29:21 +0000 de hourly 1 https://wordpress.org/?v=6.8.2 Entferne WordPress-Emoticons „emoji“ aus dem Header https://www.revilodesign.de/blog/pagespeed/entferne-wordpress-emoticons-emoji-aus-dem-header/ https://www.revilodesign.de/blog/pagespeed/entferne-wordpress-emoticons-emoji-aus-dem-header/#respond Mon, 08 Aug 2016 11:24:15 +0000 http://wordpress-tools.develop.seekxl.de/?p=184 Der Beitrag Entferne WordPress-Emoticons „emoji“ aus dem Header erschien zuerst auf revilodesign.

]]>

Leider sind nicht alle Funktionen die WordPress bei einem Update mit sich bringt sinnvoll. Eines davon ist aus meiner Sicht WordPress-Emoticons „Emoji“. Seit der WordPress Version 4.2 werden die Styles und die Javascript automatisch im Header geladen und das sieht dann wie folgt aus.

html
				<script type="text/javascript">
	window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/revilodesign.de\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.1"}};
	!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55358,56794,8205,9794,65039],[55358,56794,8203,9794,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
	img.wp-smiley,
	img.emoji {
	    display: inline !important;
	    border: none !important;
	    box-shadow: none !important;
	    height: 1em !important;
	    width: 1em !important;
	    margin: 0 .07em !important;
	    vertical-align: -0.1em !important;
	    background: none !important;
	    padding: 0 !important;
	}
</style>
Mehr anzeigen

window._wpemojiSettings aus dem Header entfernen – so geht’s

Der Code lässt zum einen die Punkte beim Google Pagespeed Test nach unten gehen und zum anderen benötigen vor allem seriöse Webseiten keine Smileys.

Also alles Gründe die dafür sprechen, dass der Code aus dem Header entfernt werden muss. Solange dies nicht von WordPress bei einem seiner nächsten Updates automatisch passiert müssen wir uns selbst helfen und window._wpemojiSettings manuell entfernen.

emoji-Codes entfernen

Kopiert den folgenden Code einfach in Eure functions.php und schon sollte Euer Header von den unnötigen emoji-Codes befreit sein.

php
				remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
Mehr anzeigen

Der Beitrag Entferne WordPress-Emoticons „emoji“ aus dem Header erschien zuerst auf revilodesign.

]]> https://www.revilodesign.de/blog/pagespeed/entferne-wordpress-emoticons-emoji-aus-dem-header/feed/ 0 Entfernung überflüssiger WordPress Dateien im header https://www.revilodesign.de/blog/pagespeed/entfernung-ueberfluessiger-wordpress-dateien-im-header/ https://www.revilodesign.de/blog/pagespeed/entfernung-ueberfluessiger-wordpress-dateien-im-header/#respond Wed, 06 Jul 2016 08:13:21 +0000 http://wordpress-tools.develop.seekxl.de/?p=152 Der Beitrag Entfernung überflüssiger WordPress Dateien im header erschien zuerst auf revilodesign.

]]>

Manchmal möchte man einfach einen sauberen Header haben oder man muss Javascript Dateien in den Footer bekommen. Leider bindet WordPress und beinahe jedes Plugin seine Dateien über die wp_head() in den Header ein.

Das führt teilweise dazu, dass der Header kaum noch zu durchschauen ist oder teilweise einige Plugins jQuery laden und sich somit überschreiben oder behindern.

Ein weiterer Nachteil ist, dass der Pagespeed drunter leidet wenn Javascript Dateien „above the fold“ geladen werden. Also das Rendern blockiert und vor dem Inhalt geladen werden.

Das heißt: Optimal sind Javascript Dateien daher im Footer aufgehoben.

Ich habe mir daher einige Funktionen zusammengesucht, die den Header so gut wie möglich bereinigen. Den folgenden Code einfach in die functions.php einfügen.

php
				// Remove WordPress metas
function disable_metas() {
	remove_action( 'wp_head', 'wp_generator' );
	remove_action( 'wp_head', 'wlwmanifest_link' );
	remove_action( 'wp_head', 'rsd_link' );
	remove_action( 'wp_head', 'index_rel_link' );
	remove_action( 'wp_head', 'feed_links_extra', 3 );
	remove_action( 'wp_head', 'feed_links', 2 );
	remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
	remove_action( 'wp_head', 'start_post_rel_link', 10, 0 );
	remove_action( 'wp_head', 'adjacent_posts_rel_link', 10, 0 );
	remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
	remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
	remove_action( 'wp_print_styles', 'print_emoji_styles' );
	remove_action( 'admin_print_styles', 'print_emoji_styles' );	
	remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
	remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );	
	remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
}
add_action( 'init', 'disable_metas' );
Mehr anzeigen

Natürlich hat das auch einen Haken, denn jede Datei, die man so aus der Header entfernt, muss manuell in den Footer eingebaut werden.

Das kann dann dazu auch mal dazu führen, dass ein Plugin nach dem Update nicht mehr richtig funktioniert, da die Ordnerstruktur Beispielsweise verändert wurde und dann beginnt das Gesuche und Debugge. Daher bin ich auch ein großer Freund von so wenigen wie möglichen Plugins in WordPress.

Auch beim hinzufügen neuer Plugins kann es sein, dass man die Zeilen erst einmal wieder auskommentieren muss, um die Javascript und Styles in den Footer zu kopieren.

Das kann natürlich lästig sein. Daher empfehle ich dies auch nur fortgeschrittenen WordPress Nutzern. Zudem würde ich dies auch erst dann einbinden, wenn die Seite fertiggestellt ist und man für Pagespeed optimieren möchte.

Entfernt jQuery aus dem Header

php
				// Remove automatic jQuery include
add_action( 'wp_print_scripts', 'de_script', 100 );
function de_script() {
	wp_dequeue_script( 'jquery' );
	wp_deregister_script( 'jquery' );
}
Mehr anzeigen

Warum es wichtig ist, jQuery aus Performance-Gründen im Footer zu laden

Das Laden von jQuery im Footer anstatt im Header kann die Performance Ihrer Website erheblich verbessern. Da jQuery häufig für interaktive Elemente und Animationen verwendet wird, ist es wichtig, dass die Website-Inhalte zunächst geladen werden, bevor zusätzliche Bibliotheken geladen werden. Hier sind die Vorteile:

  1. Schnellere Ladezeiten: Da jQuery erst nach dem Seiteninhalt geladen wird, kann der Benutzer die Hauptinhalte schneller sehen, ohne auf das Laden zusätzlicher JavaScript-Dateien warten zu müssen.
  2. Reduzierte Blockierung von Ressourcen: Wenn jQuery im Header geladen wird, kann es den Aufbau der Seite blockieren, was den “First Contentful Paint” (FCP) und die Ladegeschwindigkeit negativ beeinflusst. Das Laden im Footer vermeidet dies.
  3. Verbesserte Benutzererfahrung und SEO: Kürzere Ladezeiten tragen zur besseren User Experience bei und können sich positiv auf das SEO-Ranking auswirken, da Suchmaschinen schnell ladende Seiten bevorzugen.

Hier der Code, um jQuery in den Footer zu verschieben:

php
				add_action( 'wp_default_scripts', 'move_jquery_into_footer' );
	function move_jquery_into_footer( $wp_scripts ) {
		if( is_admin() ) {
			return;
		}
		$wp_scripts->add_data( 'jquery', 'group', 1 );
		$wp_scripts->add_data( 'jquery-core', 'group', 1 );
		$wp_scripts->add_data( 'jquery-migrate', 'group', 1 );
	}
Mehr anzeigen

Der Beitrag Entfernung überflüssiger WordPress Dateien im header erschien zuerst auf revilodesign.

]]> https://www.revilodesign.de/blog/pagespeed/entfernung-ueberfluessiger-wordpress-dateien-im-header/feed/ 0 Ablaufdatum für Dateien festlegen – FTP Server – Cache TTL optimieren https://www.revilodesign.de/blog/pagespeed/ablaufdatum-fuer-dateien-festlegen-ftp-server/ https://www.revilodesign.de/blog/pagespeed/ablaufdatum-fuer-dateien-festlegen-ftp-server/#respond Wed, 06 Jul 2016 08:03:43 +0000 http://wordpress-tools.develop.seekxl.de/?p=147 Der Beitrag Ablaufdatum für Dateien festlegen – FTP Server – Cache TTL optimieren erschien zuerst auf revilodesign.

]]>

Wenn man den Pagespeed Test von Google durchführt wird man unweigerlich mit der Tatsache konfrontiert, dass man kein Ablaufdatum für die Bilder und andere Dateien festgelegt hat. Nur was machen, wenn man keinen Server hat, sondern nur einen Webspace mit FTP Zugang? Wie kann man Cache TTL optimieren?

Ablaufdatum auf FTP Server einstellen - Cache TTL optimieren

Um auf einem FTP Server das Ablaufdatum festzulegen muss folgender Code an erster Stelle in die .htaccess Datei, die im Root Ordner liegt, kopiert werden. Schon erkennt Google, dass ein Ablaufdatum für Bilder und andere Dateien eingestellt wurden und der Pagespeed meckert nicht mehr – bzw. sollte nicht mehr.

accesslog
				<ifmodule mod_deflate.c="">
	AddOutputFilterByType DEFLATE text/html text/css text/javascript application/x-javascript application/x-httpd-php text/plain
	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/xml
	AddOutputFilterByType DEFLATE text/css
	AddOutputFilterByType DEFLATE application/xml
	AddOutputFilterByType DEFLATE application/xhtml+xml
	AddOutputFilterByType DEFLATE application/rss+xml
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
	AddType x-font/otf .otf
	AddType x-font/ttf .ttf
	AddType x-font/eot .eot
	AddType x-font/woff .woff
	AddType font/ttf .ttf
	AddType font/eot .eot
	AddType font/otf .otf
	AddType font/woff .woff
	AddType application/vnd.ms-fontobject .eot 
	AddType application/x-font-ttf .ttf
	AddType application/x-font-opentype .otf
	AddType application/x-font-woff .woff
	AddType application/x-font-woff2 .woff2
	AddType image/x-icon .ico
	AddType image/png .png
</ifmodule>

<ifmodule mod_expires.c="">
	ExpiresActive On
	ExpiresDefault "access plus 3 month"
		
	# Images
	ExpiresByType image/gif "access plus 1 year"
	ExpiresByType image/jpeg "access plus 1 year"
	ExpiresByType image/jpg "access plus 1 year"
	ExpiresByType image/png "access plus 1 year"
	ExpiresByType image/webp "access plus 1 year"
	ExpiresByType image/svg "access plus 1 year"
	ExpiresByType image/svg+xml "access plus 1 year"
	ExpiresByType image/x-png "access plus 1 year"
	ExpiresByType image/x-icon "access plus 1 year"
	
	# Video
	ExpiresByType video/mp4 "access plus 1 year"
	ExpiresByType video/mpeg "access plus 1 year"
	
	# CSS, JavaScript
	ExpiresByType text/html "access plus 6 hours"
	ExpiresByType text/css "access plus 8 days"
	ExpiresByType text/javascript "access plus 7 days"
	ExpiresByType application/x-javascript "access plus 7 days"
	ExpiresByType application/javascript "access plus 7 days"
	
	# Fonts
	ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
	ExpiresByType font/woff2  "access plus 1 year"
	ExpiresByType application/x-font-ttf "access plus 1 year"
	ExpiresByType application/x-font-opentype "access plus 1 year"
	ExpiresByType application/font-woff "access plus 1 year"
	ExpiresByType application/x-font-woff "access plus 1 year"
	ExpiresByType application/font-woff2 "access plus 1 year"
	ExpiresByType application/x-font-woff2 "access plus 1 year"
</ifmodule>

<ifmodule mod_headers.c="">
	Header set Connection Keep-Alive
	Header append Cache-Control "public"
</ifmodule>

# BROWSER CACHING USING CACHE-CONTROL HEADERS
<ifModule mod_headers.c> 
	# One year for image and video files
	<filesMatch ".(flv|gif|ico|jpg|jpeg|mp4|mpeg|png|svg|swf|webp|woff2)$">
		Header set Cache-Control "max-age=31536000, public"
	</filesMatch>

	# One year for JavaScript and PDF files
	<filesMatch ".(js|pdf)$">
		Header set Cache-Control "max-age=31536000, public"
	</filesMatch>

	# One week for CSS files
	<filesMatch ".(css)$">
		Header set Cache-Control "max-age=604800, public"
	</filesMatch>
</ifModule>
Mehr anzeigen

Ich habe versucht alle Dateiformate anzugeben und die Liste so umfangreich wie möglich zu gestalten. Sollten dennoch welche fehlen, so würde ich mich freuen, wenn Ihr mich in den Kommentaren darauf hinweist. Ich werde die Liste dann stetig erweitern.

Der Beitrag Ablaufdatum für Dateien festlegen – FTP Server – Cache TTL optimieren erschien zuerst auf revilodesign.

]]> https://www.revilodesign.de/blog/pagespeed/ablaufdatum-fuer-dateien-festlegen-ftp-server/feed/ 0