Drupal 8 an Pagespeed - Optimierungslog

Fr., 04/09/2020 - 00:28
Body

Meine Seite performt da richtig schlecht. Wie löse ich das(Drupal)?Eine Lösung ist es natürlich google ads, googlefonts, analytics zu entfernen und zack alles ist extrem besser....welche paradox. Die google ads verursachen z.B. die ganzen Cumulative Layout Shift(CLS) Probleme.

 

Neue Ideen 2021

Durchgeführt 29.09.2021

  • deaktiviere cookiebanner animation weil das CLS verursacht
  • modul: lazy loading images modul
  • neuer ad code
  • modul: simple sitemap install mit dem index
  • advagg files 10 stück nach filesize
  • htaccess cache
  • purgecss file genutzt, deutlich kleinere css
  • manueller share ohne js scripte. shariff weg
  • resmush auf 85%
  • simplere breadcrumbs
  • support block added social share

Caching rules für die .htaccess (dieses mal richtig)
https://www.srijan.net/resources/blog/performance-optimization-for-drupal-websites-intermediate-level

  # Cache all files for 2 weeks after access (A).
  #ExpiresDefault A1209600

  #wir setzten 1 jahr und deaktivieren drupal default
  ExpiresDefault "access 1 month"  
  ExpiresByType image/jpg "access 1 year"
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresByType image/png "access 1 year"  
  ExpiresByType image/x-icon "access 1 year" 
  ExpiresByType text/css "access 1 year"
  ExpiresByType text/html "access 1 year"

 

Zitat: Nicht zusammengesetzte Animationen vermeiden

Das betrifft hier das search form oben in der ecke des themes.

Theme

  • lösche alle bootstrapmodule die wir nicht nutzen! z.B. jumbotron, carousel etc.
  • wozu importieren wir den ganzen bootsrap js kram...? brauchen wir den?

Neues Konzept, der ganze fancy shizzle über die Jahre hat alles total komplex und overloaded gemacht und 70% brauchen wir nicht, laden es aber...

Hat sich erledigt mit purgecss

 

Critical css

Also das müssten wir pro Seite erzeugen und dann per bundle etc. laden mit dem critical_css modul?

Das sollte die "Largest Contentful Paint" Werte fixen?

Wir brauchen gulp "npm install gulp"

THIS IS HELL, gulp 3 gibts viele beispiele aber gulp 4 da hat sichs geändert. Ergo alle beispiel klappen nicht mehr.

https://dev.to/nicolasjengler/how-to-improve-loading-time-performance-with-gulp-and-puppeteer-on-a-drupal-site-653&nbsp; <- klappt super

 

PurgeCSS

 

Ok Ok ... wir machen jetzt folgendes

  • Lade Seiten per gulp taks runter die die wichtigen styles enthalten und speichere die in ein html_cache folder. Das übergeben wir dann dem purge css :)
  • Adde gewisse styles manuell zur whitelist!
  • Das läuft gut
  • Siehe script im theme folder

 

 

Ideen 2020

Ideen

Lazy loading Module für Drupal: https://www.drupal.org/project/native_lazy_loading | bugs gemeldet, mainatiner hats gepatched, NUTZE ICH!

Critical CSS: Das ist mehr Aufwand als sonst was und kann auch einige Probleme verursachen. Ich hatte ohne Adsense so schon über 90 Score also bringt das, wenn nur minimal was.

 

Fontawesome

Fontawesome: /admin/config/content/fontawesome

Shim 4 Datei deaktivieren, Rückwärtscompatibilität.

Ist cool ABER lädt eine 1,2 mb datei wenn "all" genutzt wird. Mobil gibt das übelste scores. Deaktibieren und wupp 98.

Read: https://blog.webjeda.com/optimize-fontawesome/

Oh yea; https://icomoon.io/app/#/select

Problem, wie ersetze ich die ganze FA icons mit einer kleinen library. Die FA js Dateien kann man wohl nicht einfach so entschlacken.

Drupal modul: https://www.drupal.org/project/micon

Problem. Jeder Sh*t benutzt inzwischen diese bloated Iconbibliothek. An sich sollte sich eher sowas wie icomoo etablieren...

Bei shafriff müssen wir zwingen fontawesome nutzen....finde einen weg da die custom icomoo lib zu nehmen.

 

Lösung für icons im Menu ist ein eigener hook im template file des themes. Code wird hier nachgetragen wenn final.

 

Radix: Branding template anpassen und  width und height müssen gesetzt sein. (verursacht sonst CLS) 

 

Social Icons, bei mir Shariff

Das Problem ist, dass ich den Block als sidebar formatiert hatte der oben direkt unetr dem Menü war. Der wurde dann aber durch css als sidebar formatiert. Ergebnis = CLS!

Lösung: Dem Container eine feste Höhe geben, icons reduzieren, so das alles IMMER in eine Reihe passt. Icons in Reihe lassen

Lösung für Reihe also floating sidebar: Block im Footer laden mit fester höhe, dann per css als floatin gsidebar formatieren.

Problem, ohne Fontawesome keine Icons. Was kann man also machen:

  1. Shariff hacken/forken, schlecht weil updaten geht dann nicht mehr
  2. Besser: Mit hook_block den block modifizieren und ein maparray machen, welches die icons durch die icons vom icomoo-set erstzt!  Das geht so nicht, weil das ja ein JS inject in den DOM ist....

 

Google Fonts

Da mag man im ersten moment nicht dran denken aber unterschiedliche Fonts haben unterschiedliche Breite! D.h. wenn ihr eine schlanke Google-Font nutzt, dann kann es sein, dass das Menu anfangs (ohne die Font) zweispalig ist und mit font nurnoch einspalig ....Ergebnis hohes CLS!

Das nennt sich "FOUT – Flash of Unstyled Text"

Info: DIe CLS beeiflussing hängt von den Advagg Settings ab, siehe Notizen unten.

 

Cookiebanner

Diese Pest hat mittlerweile überall einzig genommen (Danke an die EU). Google nutzt inzwischen auch CLS als Speedkriterium....super. Doppel-Blutkrätsche. Datenkraken arbeiten weiter wie zuvor, kleine betreiber haben mehr overhead.

Lösung: https://stackoverflow.com/questions/62638172/cumulative-layout-shift-and-cookies-popup&nbsp;

 

Adsense

Adsense ist das allerübelste wenn es um CLS geht. Welch ironie, dass das von google selbst kommt.

Lösungsideehttps://mediarealm.com.au/articles/google-adsense-reducing-cls-cumulative-layout-shift/#:~:text=Cumulative Layout Shift is a,jumps around%2C particularly during loading.

 

Static cache meldungen

Das kann man in der .htaccess festlegen: https://www.drupal8.ovh/en/tutoriels/297/static-cache-control-by-htacces

https://anthonymclin.com/solving-lighthouses-inefficient-cache-policy-warning-drupal-websites#.X1fbjXVfjmE

#Static cache
    #2592000 = 1Year, 86400=24h
    #CSS and JS files
    <filesMatch "\.(js|css)$">
      Header set Cache-Control "max-age=2592000, public"
    </filesMatch>
    #Images
    <filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|svg)$">
      Header set Cache-Control "max-age=2592000, public, must-revalidate"
    </filesMatch>
    #Fonts
    <filesMatch "\.(ttf|woff)$">
      Header set Cache-Control "max-age=2592000, public, must-revalidate"
    </filesMatch>
    # Disable caching for scripts and other dynamic files
    <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
      Header unset Cache-Control
    </FilesMatch>

 

Menu/Mega-Menu

Ich nutze eine Art Mega-Menu. Auf Mobile ist das abders formatiert und da ist CLS NIEDRIGER als auf dem Desktop. Es muss also am Manü liegen.

Ideen?

 

Bilder

Wieder etwas wo ich kotzen könnte. Jahrelang will man alles repsonsive machen und hat Hacks wie max-width 100% auf Bildern etc. Genau das verursacht jetzt massiv CLS und wird zum Problem. Bitte Applaus. 
Ich wette meine alten Seiten von 2000 hätten da alle einen 100% score...,

 

Vorsicht Advagg-Modul

Adv ist ein super Modul aber nicht einfnach blindlinks Optionen setze. Als Beispiel sorgt "Deferred CSS Execution: Use JS to load CSS" bei mir für einen layout Shift von 2. Wenn ich es deaktiviere ist der gesmate Scroe aber um 10 niedriger, das CLS kehr aber zurück wei ldie CSS länger zu laden brauchen und CLS wohl für shifts (ab 200ms)? zählt.

Das könnte ich vermeiden idnem ich die layout css von boostrap als critical im head lade?

Cache

Den cache kram in der htaccess setzen? Auf 14 Tage hat nichts geändert.

 

Zusatznotiz CLS

Allen möglichen Containern max-heigh/heigh zu geben ist da nicht die Lösung (außer sie werden injected, Beispiel Shariff o.a). Siehe Notiz zu AdvAgg.

 

CDN

Jquery per CND. Erhöht oder senkt das den score?

 

Layout Shift in meinem Radix Theme

Es ist die Hölle was CLS angeht da die Fehler zu finden. Probieren wir alles durch. Ideenlog

  • Header und Menu container auf feste height setzen. Hat nix gebraucht, shiftet immernoch von oben.
  • Fontawesome deinstalliert. Shift passiert immernoch. Es ist so als ob da oben am Rand ein margin&padding geladen würde
  • Am Ende liegt es an der "Deferred CSS Execution: Use JS to load CSS". AUsmagen in advagg

 

Updatelog für Seiten - TODO (für mich persönlich)

  • Deinstall fontawesome+fontawesome menu picker
  • Templates folder hochladen -> menu-levels, TOC und bef
  • Die theme/template file mit den hooks hier ersetzen wir die items. Menu template etc.
  • icomoon icons folder mit den mods der css! (keine mods, das is nun in der theme sass)
  • Klassen zu den ganzen menüs hinzufügen(manuelle Arbeit)
  • Iconmoon und shariff in /web/sites/all/libs/
  • theme libraries datei modded!
  • alle views anpassen, star formatter anpassen!
  • Blöcke anpassen wo icons genutzt wurden
  • Drupal Core gehackt weil views rewrite kein use und svg tags erlauben (siehe patch im root)
  • aktiviere das native_lazy_load modul! Das bringt bei mobile Punkte Noch nicht, width heigth bug!
  • PD5_custom updaten
  • Vergleichsblöcke und überall wo icons sind code tauschen!
  • Flag script angepasst
  • DIe taxonomy Menüs
  • Alle Artikel/content listen
  • Template folder, suchen und erstzen "fa"
  • Widgets mit Sternen unten!
  • Design css, cookie, shariff, social1 class, custom js

UND ZACK wir haben mobile und desktop einen Pagespeed von 92 bzw. 94!

Witz des Tages: Jetzt aktiviere einfach mal wieder auto-adsense und zack haste mobil 42. Jetzt sogar 31. Adsense wieder aus und zack 92. Gratulation an google adsense, ich gebs auf.

 

Quellen/Artikel die interessant sind

https://www.bounteous.com/canada/node/63766/?lang=en-ca

https://www.namehero.com/startup/how-i-dropped-my-cumulative-layout-shift-cls-to-zero/

https://johnfraney.ca/posts/2019/12/09/improve-page-speed-google-fonts/ | google fonts import infos

https://www.malthemilthers.com/font-loading-strategy-acceptable-flash-of-invisible-text/ | font info FOIT und FOUT

https://web.dev/optimize-cls/ | aspect ratio boxen usw.

https://ahrefs.com/blog/advanced-pagespeed-guide/

https://www.smashingmagazine.com/2015/08/understanding-critical-css/ | critical css path