„above the fold“ Problem

eisenbahntv
(@eisenbahntv)

vor 7 Jahren, 6 Monaten

Hallo,

zuerst mal Entschuldigung, dass ich kein Programmierer bin… Beim Google Insights Speedtest erhalte ich folgende Meldung:

Behebung erforderlich:
JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen
Ihre Seite enthält 1 blockierende Skript-Ressourcen und 4 blockierende CSS-Ressourcen. Dies verursacht eine Verzögerung beim Rendern Ihrer Seite.
Keine der Seiteninhalte „above the fold“ (ohne Scrollen sichtbar) konnten ohne Wartezeiten für das Laden der folgenden Ressourcen gerendert werden. Versuchen Sie, blockierende Ressourcen zu verschieben oder asynchron zu laden, oder laden Sie kritische Bereiche dieser Ressourcen direkt inline im HTML.
Entfernen Sie JavaScript, das das Rendering blockiert:
http://www.eisenbahn.tv/wp-content/cache/minify/c9778.js

Optimieren Sie die CSS-Darstellung für die folgenden URLs:
http://www.eisenbahn.tv/wp-content/cache/minify/9ef53.css
http://fonts.googleapis.com/…italic%2C600italic%2C400%2C600&ver=4.6.1
http://fonts.googleapis.com/…%2C700%2C400italic%2C700italic&ver=4.6.1
http://www.eisenbahn.tv/?sccss=1&ver=4.6.1

Was soll ich da tun? Wie gesagt ich bin leider kein Programmierer – Ein step by step wäre toll. vorallem das c9778.js scheint dem Speedtest nicht zu gefallen. Warum google seine eigene Fonts bemängelt ist mir auch nicht ganz klar…

Wäre für Eure Hilfe echt dankbar!

Gruß Gabriel
http://www.eisenbahn.tv (Die Seite, um die’s geht)

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)

Moderator

(@pixolin)

Stylesheets und JavaScript-Dateien zu laden dauert ein paar Millisekunden und verlangsamt, wenn das am Anfang passiert, den Aufbau der restlichen Seite. Lädt aber ein Stylesheet zu spät, hat das die unschöne Folge, dass die Webseite am Ende neu umbricht. Ich würde den Hinweis deshalb einfach ignorieren.

Du kannst zur Optimierung auch das Plugin Autoptimize verwenden, aber das Plugin „erfordert eine Auseinandersetzung mit dem Thema“ – sprich: „nix für Einsteiger“.

Allerdings kannst du noch einiges optimieren, wenn du das Browser-Caching und eine komprimierte Übertragung aktivierst. Dazu fügst du per FTP-Programm oder über das Dateiverwaltungsmenü deines Webhoster folgendes in die Server-Konfigurationsdatei .htaccess ein:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

(Wie immer bei solchen Änderungen, vorher ein Backup der alten .htaccess machen!)

Thread-Starter

eisenbahntv

(@eisenbahntv)

vor 7 Jahren, 1 Monat

Hallo,

sorry, dass ich es erst jetzt sage….:

VIELEN DANK!

Gruß Gabriel

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)

Das Thema „„above the fold“ Problem“ ist für neue Antworten geschlossen.

Themen-Schlagwörter

Ansichten