Wie erreicht man 100/100 bei Google Pagespeed Insights

... und macht seine Website wirklich schnell!

// navigation

Blog


// content

So erreichen Sie 100% bei Google Pagespeed Insights und machen ihre Typo3 Website wirklich schnell

Caching vom Browser und Server nutzen

Nutzen Sie das Caching für alle Ressourcen, insbesondere Javascript und Cascading Stylesheets. Dies machen Sie zum Einen über die .htaccess Datei (Apache Webserver). Zum anderen bieten auch Content Management Systeme wie Typo3 die Möglichkeit Ressourcen zu cachen. Dies ist bereits standardmäßig aktiv und der Cache kann zum Beispiel über die Blitz Icons in der oberen Leiste Ihres Backends geleert werden. Nutzen Sie dieses Cache Flushing aber nur, wenn es wirklich nötig ist und am besten nur für einzelne Seiten statt global. Das Leeren eines Caches für einzelne Seiten finden Sie im Page Modul beim Klick auf die entsprechende Seite ganz oben rechts (ebenfalls ein Blitz Symbol).

Beispielhafter Eintrag einer .htaccess Datei:

htaccess

# turns cache on for 1 month
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresByType text/css "access plus 1 month"
 ExpiresByType text/javascript "access plus 1 month"
 ExpiresByType text/html "access plus 1 month"
 ExpiresByType application/javascript "access plus 1 month"
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/x-icon "access plus 1 month"
</IfModule>
<ifmodule mod_headers.c>
 <filesmatch "\\.(ico|jpe?g|png|gif|swf)$">
  Header set Cache-Control "max-age=2592000, public"
 </filesmatch>
 <filesmatch "\\.(css)$">
  Header set Cache-Control "max-age=604800, public"
 </filesmatch>
 <filesmatch "\\.(js)$">
  Header set Cache-Control "max-age=216000, private"
 </filesmatch>
</ifmodule>

Externe Ressourcen cachen und Ablaufdatum ändern

Um beispielsweise Google Analytics und deren Javascript Bibliothekn ga_analytics.js und gtm.js richtig zu cachen, können Sie diese Bibliotheken bequem mit PHP herunterladen:

Typo3 Controller Cronjob zum Download von Google Analytics Javascript

php

public function execute() {
$ganalytics = file_get_contents('https://www.google-analytics.com/analytics.js');
file_put_contents($this->analyticsDir.'analytics.js', $ganalytics);
$gtm = file_get_contents('https://www.googletagmanager.com/gtm.js?id=GTM-N37X92M');
// Replace the resource of analytics.js with a local one
$gtm = str_replace('www.google-analytics.com/', 'www.IHREDOMAIN.tld/typo3conf/ext/IHREXTENSIONKEY/Resources/Public/js/', $gtm);
file_put_contents($this->analyticsDir.'gtm.js', $gtm);

//$logMessage = 'Class: ' . get_class($this) . ', UID: ' . $this->getTaskUid() . ' (message: pulled resources successfully)';
$logMessage = "Analytics pulled successfully";
$this->scheduler->log($logMessage);

return true;
}

Das Snippet oben zeigt eine Funktion in einem Controller, der per Scheduler inkl. Cronjob alle 15 Minuten die beiden JS Dateien herunterlädt und in gtm.js die Ressource für ga_analytics.js mit der lokalen austauscht und anschließend diese Datei speichert. Danach müssen Sie nur noch in Ihrem Analytics Snippet auf die lokale gtm.js verweisen und Google Pagespeed Insights wird keinen Fehler mehr anzeigen, sofern Sie für alle JS Dateien auf Ihrem Server ein entsprechendes Browser Caching gesetzt haben.

Nutzen Sie die Komprimierung mittels gzip

Um Ressourcen "on the fly" zu komprimieren, können Sie ebenfalls in Ihrer .htaccess Datei die serverseitige Komprimierung aktivieren, sofern Sie das gzip Modul installiert haben. Falls dieses fehlt, fragen Sie bitte bei Ihrem Hoster oder Serveradministrator nach. Sie sollten es auf jeden Fall installieren lassen.
Hier die Einstellungen der htaccess Datei für Ressourcen Kompression:

htaccess

# Deflate Compression by FileType
<IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/atom_xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/x-shockwave-flash
</IfModule>

Wie Sie sehen, können Sie die Komprimierung für jeden Dateityp einzeln bestimmen. Dabei hängt es natürlich von Ihrem System ab was Sie komprimieren, aber generell gilt: je mehr, desto besser.

CSS Auslagern und richtig priorisieren

Das Schwierigste ist sicherlich ein ordentlich aufgeräumtes CSS zu besitzen. Google empfiehlt hierbei nach "above the fold" und "below the fold" aufzuteilen. Das bedeutet im Endeffekt nichts anderes als das gesamte CSS für den sichtbaren Bereich in eine Datei zu packen und alles was danach kommt in eine andere. Den sichtbaren Bereich ermitteln Sie am besten mithilfe der responsiven Ansicht der Chrome Entwicklertools. Wenn Sie alle Geräte auswählen, die Sie unterstützen möchten, ist der sichtbare Bereich genau der, den Sie sehen ohne in der Y-Achse nach unten zu scrollen (die meisten Webseiten nutzen kein Scrollen der X-Achse mehr, aber hierfür würde dasselbe gelten).

Hierbei wäre es bspw. möglich den Header und die ersten Inhaltselemente und deren Layout in eine Datei zu packen und alles andere in eine zweite. Ob Sie nun die Typographie (das Layout Ihrer Schrift) sofort laden möchten oder es auch nachgeladen wird, sobald der DOM fertig geladen ist, bleibt dabei Ihnen überlassen. Umso weniger Sie in die erste Datei packen - also umso schlanker sie ist - desto besser.

Der größte CSS Trick - im Footer laden

Um nun wirklich den maximalen Wert zu erhalten, können Sie auch einfach Ihr gesamtes CSS im Footer laden. Das führt zwar dazu, dass Ihre Seite beim Laden quasi keinen Stylesheet besitzt und dementsprechend merkwürdig aussieht, aber Bots wie Google oder Tools wie Pagespeed Insights interessiert dies wenig. Und zum Anderen können Nutzer ohne fertig geladene Seite ohnehin nicht mit dieser agieren; zum Beispiel ist das Scrollen blockiert etc.

Um dies z.B. in Typo3 zu erreichen, gehen Sie wie folgt vor:

Gehen Sie in Ihr DefaultTemplate.html

Fügen Sie den folgenden Code ganz am Ende vorm Schließen des letzten Elements hinzu:

html

<link rel="stylesheet" type="text/css" href="/typo3conf/ext/IHREXTKEY/Resources/Public/sass/dist/style.min.css?v=1.0.1" media="all">

Nun können Sie sich einen Gruntjob bauen, der alle Ressourcen in diese Datei schreibt und dann über den Parameter v=1.0.1 das Caching der Ressource steuern. Wann immer Sie also wichtige Änderungen vorgenommen haben, drehen Sie die Versionsnummer hoch (v=1.0.2, v=1.0.3, v=2.0.0 etc.).

Sie können natürlich ebenfalls mit footerData arbeiten. Wenn Sie keinen Gruntjob o.ä. einrichten möchten oder einfach zu unerfahren sind, können Sie auch die minifizierte Ressource von Typo3 herunterladen, im Projekt speichern und diese manuell einbinden.

Denken Sie aber daran die ursprünglich geladene Ressource von Typo3 zu entfernen, da Sie ansonsten doppelt geladen wird!

Bilder optimieren

Nutzen Sie Tools wie bspw. kraken.io oder Google selbst zum Optimieren Ihrer Bilder. Wenn Sie z.B. die Pagespeed Insights nutzen, können Sie ganz unten am Ende der Seite Ihre komprimierten Ressourcen (Bilder, Javascript, CSS) herunterladen. Dies eignet sich auch für den Abschnitt zuvor, um das CSS zu minimieren. Generell gilt: Nutzen Sie für Bilder nur die Auflösung, die Sie auch im Web anzeigen. Ein 4k Bild nutzt nichts, wenn Ihre Webseite eine maximale Breite von 1024px hat. Beachten Sie auch Framework Klassen wie Bootstrap, die Ihr Bild evtl. immer nur in halber Breite anzeigen. Wenn dies der Fall ist, sollte es auf jeden Fall genügen Ihr Bild in max. 960px Breite zu speichern (1920px für Full-HD Monitore und davon 50%, da Sie Ihr Bild nie größer anzeigen).

Nutzen Sie webp - das neue Standardformat für Bilder im Web. Zum Beispiel CloudFlare bietet Ihnen hier eine einfache Möglichkeit sämtliche Bilder als webp umzuwandeln und on the fly auszuliefern. Das Ganze ist zwar nicht günstig, aber es bietet zudem zusätzliche Sicherheitsfeatures und Backupmöglichkeiten. Oder Sie nutzen einfach eine Typo3 Extension zum Umwandeln der Bilder in webp.

Javascript asynchron und im Footer laden

Für Javascript gelten bereits viele der Abschnitte zuvor (Caching, CSS minimieren) und auch hier gilt, dass Sie Javascript möglichst immer im Footer laden sollten. Dies erreichen Sie bei Typo3 mittels includeJSFooterLibs oder mit page.footerData - achten Sie jedoch stets darauf, dass Ihr JS noch funktioniert. Ein asynchrones Laden empfiehlt sich dabei ebenfalls, schreiben Sie dazu einfach im script-Block async ans Ende, aber auch hier gilt: erst testen, ob alles funktioniert. Wenn z.B. jQuery zuerst geladen sein muss, dann sollten Sie dies zuerst in Ihre gesammelte JS Bibliothek integrieren. Hierfür eignet sich Grunt hervorragend, da Sie genau bestimmen können was wo und wie geladen werden soll.

Verwenden Sie Extensions wie static_file_cache

Es gibt viele Erweiterungen bzw. Plugins für Typo3, die Ihre Webseite beschleunigen können. Hier eine kleine Liste, der besten Erweiterungen, um Ihre Performance zu verbessern:

  • EXT:staticfilecache - lochmueller/staticfilecache auf Packagist - Version von Typo3: 8.7 oder höher
    Erstellt statische HTML Dateien, die schneller geladen werden können und bei Probleme mit Ihrem Typo3 dennoch erreichbar sind (gute Ausfallsicherheit)
  • EXT:min - instituteweb/min auf Packagist - Version von Typo3: 8.7+
    Komprimiert Ihre Assets besser als Typo3 standard und komprimiert Ihren HTML Code
  • EXT:bootstrap_package - bk2k/bootstrap-package auf Packagist.org - Version von Typo3: 8.7 oder höher
    Dies ist keine Erweiterung, sondern ein komplettes Theme, basierend auf dem CSS und JS Framework Bootstrap. Durch intelligentes Lazy Loading und eine gute Architektur eignet es sich hervorragend für den leichten und schnellen Aufbau hochperformanter Webseiten.

Generelle Tipps und Tricks zur Performance Ihrer Webseite

Laden Sie möglichst wenig Dateien

So können Sie für häufig verwendete Icons zum Beispiel Spritemaps nutzen. Sämtliche CSS Dateien können in eine gepackt werden (Grunt oder Typo3 concatenate nutzen). Jede Datei stellt dabei einen HTTP Request dar, der zusätzliche Zeit benötigt.

Nutzen Sie die neueste Technologie (Typo3 v8, PHP7, MYSQL usw.)

Jede neue Version von PHP bietet ca. 20% Performance Boost für Ihre Webseite. Nutzen Sie also immer die höchste Version, die von Ihrer Anwendung supportet wird. Ebenfalls ist es sinnvoll http2 oder SPDY zum Ausliefern der Seiten zu nutzen, da diese mehr parallele Requests zulassen und somit schneller die Seiten ausliefern können.

Entschlacken Sie unnötigen Code

Entfernen Sie HTML Kommentare und versuchen Sie Dinge nicht unnötig oft zu schachteln, wenn es nicht sein muss. Jeder Byte, den Sie ausliefern, kostet Zeit und kann dementsprechend Ihre Performance beeinträchtigen. Auch Datenbankabfragen, die zu lange benötigen, sollten dringend aufgeräumt werden. Bauen Sie lieber Ihre Datenbank um, statt über 20 Joins und preg_replaces zu laufen, um ein Content-Element aus der DB zu holen.

Das richtige Hosting ist entscheidend

Gehen Sie in die Cloud! Wenn Google Pagespeed Insights bei Ihrer Seite meckert, weil die Antwortzeit des Servers zu hoch ist, ist meistens das Hosting schuld. Wenn Sie z.B. zum Vergleich ein leeres Typo3 System in der neuesten Version mit aktuellstem PHP installieren und Google bereits hier die Antwortzeit muckiert, ist es an der Zeit Ihr Hosting infrage zu stellen. Wir empfehlen an dieser Stelle das Amazon AWS Hosting. Bei einer relativ schlanken Seite, die hervorragend optimiert wurde, sind Sie somit schnell unter den Top 3% in Sachen Performance: lightningsoul.de

Test Tools und Seiten, die wir empfehlen:

Pingdom

Google Pagespeed Insights

Webpagetest

Oder Sie nutzen einfach Ihren Browser - Entwicklertools - Netzwerk bzw. die Audit-Tools von Googles Chrome Browser

Pingdom Ergebnis Renoi.de - schneller als 98% aller Webseiten weltweit

Rating: 4.8. 4 Bewertung(en).
4 anonyme Bewertungen
No rating done at all.
Dein Voting war (0 von 5) Du bist nicht eingeloggt.
Um persönliche Votings abzugeben, kannst du dich einloggen.
Click the rating bar to rate this item Please log on to do ratings

Kommentare

comments powered by Disqus