PageSpeed Optimierung

[cgpro]

Wie groß ist denn euer JS und CSS in der Regel? Ich komme z.B. auf 863KB f. CSS und 1.7MB für JS, das ist schon ziemlich viel was da initial geladen werden muss. Das zerhagelt auch entsprechend den Pagespeed Score f. mobile Geräte.

[pedaworx]

Hallo zusammen, Hallo Tim

wenn die initconfig.php genutzt wird und die Revolution Slider Ressourcen geladen werden dann wird ein leerer link Tag generiert (Siehe Screenshot). Kann ich das irgendwie fixen ?

Danke

[pedaworx]

Hallo zusammen,

also ich nutze die initconfig.php von euch

  <?php    // revolutionslider  $upload_path = $GLOBALS['TL_CONFIG']['uploadPath'];  $GLOBALS['REVOLUTIONSLIDER']['scripts'] = array();  $GLOBALS['REVOLUTIONSLIDER']['rs_css'] = '';  $GLOBALS['REVOLUTIONSLIDER']['css'] = '';  #$GLOBALS['TL_JAVASCRIPT'][]    = $upload_path . '/cto_layout/scripts/rs-plugin/js/jquery.themepunch.revolution.min.js';  $GLOBALS['TL_JAVASCRIPT'][] = $upload_path . '/cto_layout/scripts/rs-plugin/js/jquery.themepunch.revolution.js|static';  $GLOBALS['TL_JAVASCRIPT'][] = $upload_path . '/cto_layout/scripts/rs-plugin/js/jquery.themepunch.tools.min.js|static';  $GLOBALS['TL_CSS'][]        = $upload_path . '/cto_layout/scripts/rs-plugin/css/settings.css|static';  $GLOBALS['TL_CSS'][]        = REVOLUTIONSLIDER_PATH.'/assets/css/styles.css|static';  //---    //--- iconpicker fontawesome -> set iconpicker fontawesome source in system settings to OFF  $GLOBALS['TL_CSS'][] = PCT_CUSTOMELEMENTS_PATH.'/assets/font-awesome/'.PCT_CUSTOMELEMENTS_FONTAWESOME_VERSION.'/css/font-awesome.min.css|static';  //---

jetzt ist es so das alles was dort geladen wird nicht nur im FE sondern auch im BE. So fällt das keinem auf, da ich auch andere CSS files darüber lade war das BE komplett weiss.

Lösung:

  <?php  if(TL_MODE == 'FE')  {    // revolutionslider  $upload_path = $GLOBALS['TL_CONFIG']['uploadPath'];  $GLOBALS['REVOLUTIONSLIDER']['scripts'] = array();  $GLOBALS['REVOLUTIONSLIDER']['rs_css'] = '';  $GLOBALS['REVOLUTIONSLIDER']['css'] = '';  #$GLOBALS['TL_JAVASCRIPT'][]    = $upload_path . '/cto_layout/scripts/rs-plugin/js/jquery.themepunch.revolution.min.js';  $GLOBALS['TL_JAVASCRIPT'][] = $upload_path . '/cto_layout/scripts/rs-plugin/js/jquery.themepunch.revolution.js|static';  $GLOBALS['TL_JAVASCRIPT'][] = $upload_path . '/cto_layout/scripts/rs-plugin/js/jquery.themepunch.tools.min.js|static';  $GLOBALS['TL_CSS'][]        = $upload_path . '/cto_layout/scripts/rs-plugin/css/settings.css|static';  $GLOBALS['TL_CSS'][]        = REVOLUTIONSLIDER_PATH.'/assets/css/styles.css|static';  //---    //--- iconpicker fontawesome -> set iconpicker fontawesome source in system settings to OFF  $GLOBALS['TL_CSS'][] = PCT_CUSTOMELEMENTS_PATH.'/assets/font-awesome/'.PCT_CUSTOMELEMENTS_FONTAWESOME_VERSION.'/css/font-awesome.min.css|static';  //---  }

merci

[mark]

Das ist mal meine htaccess

<IfModule mod_headers.c>
    # Allow access from all domains for webfonts (see contao/core-bundle#528)
    <FilesMatch "\.(ttf|ttc|otf|eot|woff2?|font\.css)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

<IfModule mod_rewrite.c>
    RewriteEngine On

    # Determine the RewriteBase automatically and set it as environment variable.
    # If you are using Apache aliases to do mass virtual hosting or installed the
    # project in a subdirectory, the base path will be prepended to allow proper
    # resolution of the app.php file and to redirect to the correct URI. It will
    # work in environments without path prefix as well, providing a safe, one-size
    # fits all solution. But as you do not need it in this case, you can comment
    # the following 2 lines to eliminate the overhead.
    RewriteCond %{REQUEST_URI}::$1 ^(/.+)/(.*)::\2$
    RewriteRule ^(.*) - [E=BASE:%1]

    # Sets the HTTP_AUTHORIZATION header removed by Apache
    RewriteCond %{HTTP:Authorization} .
    RewriteRule ^ - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
    
    
    #
    # Make sure to replace "example.com" with your domain name.

    # Redirect to URI without front controller to prevent duplicate content
    # (with and without `/app.php`). Only do this redirect on the initial
    # rewrite by Apache and not on subsequent cycles. Otherwise we would get an
    # endless redirect loop (request -> rewrite to front controller ->
    # redirect -> request -> ...).
    # So in case you get a "too many redirects" error or you always get redirected
    # to the start page because your Apache does not expose the REDIRECT_STATUS
    # environment variable, you have 2 choices:
    # - disable this feature by commenting the following 2 lines or
    # - use Apache >= 2.3.9 and replace all L flags by END flags and remove the
    #   following RewriteCond (best solution)
    RewriteCond %{ENV:REDIRECT_STATUS} ^$
    RewriteRule ^app\.php(?:/(.*)|$) %{ENV:BASE}/$1 [R=301,L]

    # If the requested filename exists, simply serve it.
    # We only want to let Apache serve files and not directories.
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteRule ^ - [L]

    # Rewrite all other queries to the front controller.
    RewriteRule ^ %{ENV:BASE}/app.php [L]
</IfModule>

<IfModule !mod_rewrite.c>
    <IfModule mod_alias.c>
        # When mod_rewrite is not available, we instruct a temporary redirect of
        # the start page to the front controller explicitly so that the website
        # and the generated links can still be used.
        RedirectMatch 302 ^/$ /app.php/
        # RedirectTemp cannot be used instead
    </IfModule>
</IfModule>

<IfModule mod_deflate.c>
 <IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
    AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
    AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
  </IfModule>
</IfModule>

AddEncoding gzip .gz
<FilesMatch "\.js\.gz$">
AddType "application/javascript" .gz
</FilesMatch>
<FilesMatch "\.css\.gz$">
AddType "text/css" .gz
</FilesMatch>
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]

# Set cache-control
    <IfModule mod_expires.c>
        ExpiresActive On
        ExpiresDefault "access plus 2 days"
        ExpiresByType text/html "access plus 6 hours"
        ExpiresByType image/gif "access plus 3 months"
        ExpiresByType image/jpeg "access plus 3 months"
        ExpiresByType image/jpg "access plus 3 months"
        ExpiresByType image/png "access plus 3 months"
        ExpiresByType image/x-png "access plus 3 months"
        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"
        ExpiresByType image/x-icon "access plus 3 months"
    </IfModule>

ErrorDocument 403 /index.php
ErrorDocument 404 /index.php

Eine Änderung unter gtmetrix habe ich jedoch nur bei dem mod_expires Eintrag erzielt.
Vorher 75/73 danach 87/86
Nachdem ich noch alle Bilder über tinypng gejagt habe, bin ich jetzt auf 91/86

Jetzt motzt er nur noch über "Defer parsing of JavaScript" und "Minify JavaScript" und "Make fewe HTTP request". Skripte komprimieren ist jedoch aktiv.
Kann/muss ich noch etwas bestimmtes anpassen?

[mark]

also eher etwas für Fortgeschrittene...
würde ihr für die .htaccess bestimmte Inhalte empfehlen?

[Tim]

Die initconfig kann auch in C4 genutzt werden. Imgrunde nimmt die sämtliches autom. Laden der Module raus. Dann muss alles manuell eingebunden werden.

[mark]

Ich habe heute die Page Optimierungs-Einstellungen vorgenommen.
Der größte Effekt erzielte die Einstellung:

<IfModule mod_expires.c>
  ExpiresActive on

  ##
  # Productional website
  ##
        ExpiresDefault "access plus 2 days"
        ExpiresByType text/html "access plus 6 hours"
        ExpiresByType image/gif "access plus 3 months"
        ExpiresByType image/jpeg "access plus 3 months"
        ExpiresByType image/jpg "access plus 3 months"
        ExpiresByType image/png "access plus 3 months"
        ExpiresByType image/x-png "access plus 3 months"
        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"
        ExpiresByType image/x-icon "access plus 3 months"

</IfModule

bei der optimierten initconfig.php konnte ich keinen Effekt feststellen. Oder ist das noch für Contao3?

Bei GTMetrix hab ich dann 85%

[Tom]

Ah, stimmt. Hier gibt es nur mehr die .htaccess. Die rewrite rule ist hier bereits aktiviert. Das passt so. Muss nicht gemacht werden. Wir passen die Doku noch an. Danke!

[mark]

Servus Thomas,
bei mir gibt es die htaccess.default nicht. Installiert hatte ich mit dem Contao-manager

Ich hab nur die magere htaccess

[Tom]

Hi Mark,

ja, die File in .htaccess umbenennen. Auch in C4.

Schöne Grüße
Thomas

[mark]

Unter https://help.premium-contao-themes.c...pagespeed.html
steht unter Punkt 1: Die Datei .htaccess.default (im Rootverzeichnis der Contao-Installation) umbenennen in .htaccess.


Macht das bei Contao4 auch Sinn, das in die htaccess zu schreiben?

[mark]

Danke hilft mir weiter

[Tom]

Das Seitenlayout "Mobile Darstellung" deaktiviert den Contao Cache. Ich würde es deshalb nicht empfehlen. Im Grunde wird nur der Page-Speed Test beeinflusst und nicht die reale Ladezeit.

[mark]

Würdest du aus Google-Sicht dann das Seitenlayout "Mobile Darstellung" empfehlen?
Google will natürlich auch eine Performante Seite vorfinden...

[Tim]

Technisch muss folgendes beachtet werden:
Webseiten Crawler sind technisch nicht in der Lage Webseiten mit Javascript auszuführen. Javascript ist ein Client-seitiges System. Sprich, es wird auf dem jeweiligen Rechner / Browser ausgeführt. Komplexe Webseiten sind auf Javascript angewiesen - besonders Contao-Webseiten - weil Contao keine korrekte Unterscheidung für mobile Darstellungen bislang liefert. Nutzt man ein eigenes Seitenlayout bzw. Template in "Mobile Darstellung" in den Seiteneinstellungen, wechselt Contao in einen Cache-freien Modus. Die Seite wird dann nicht mehr gecached. Wem das egal ist, kann dort ein striktes Seiten-Template für die Mobile-Darstellung hinterlegen, in dem das Meta viewport Tag hardcodiert gesetzt ist -> jetzt kennt es auch Google. (Von nun an ist der Seitencache deaktiviert). Wer allerdings die Seite performant gecached haben möchte, kommt an einer Javascript Lösung nicht umher.