Witam, próbuję zrobić standardowo system zarządzania, który wszystkie problemy związane z SEO oraz optymalizacją będzie miał rozwiązane. Czyli wchodzi użytkownik, tworzy stronę, a system sam rozwiązuje jego problemy przez co użytkownik jest zwolniony z odpowiedzialności za wszelkie błędy. Chcę wprowadzić między innymi funkcję, która będzie automatycznie includowany javascript dodawać do footera, jeżeli ktoś stworzy szablon w którym javascript jest w headerze. Chcę aby strona osiągała najwyższe wyniki w Google Speed Page oraz w Light House (funkcja w google chrome po wciśnięciu CTRL+Shift+I). Mam problem z cachowaniem CSS oraz z CSP. O ile kiedyś rozwiązałem problem z pierwszym, a teraz mi się nie udaje to o tym drugim pierwszy raz słyszę. Używam hostingu na domena (kropka) pl i wydaję mi się że używają protokołu http w wersji 1.0 bo htaccess nie pozwala na cachowanie CSS. Błąd się nie poprawia. Mam certyfikat SSL i nie ma tam opcji włączenia http2. Ogólnie to chyba pozostaje zmienić hosting.

Użyj cloudflare

jest to opcja, ale raczej nie pomaga to w pozycjonowaniu

Możesz nakreślić jaki ma związek CSP z cachowaniem CSS?




Cache CSS nie ma związku z protokołem HTTP (no i raczej jest to HTTP/1.1). Może masz zablokowane niektóre dyrektywy jakich możesz użyć w swoim htaccess. A jaki błąd się pojawia?




Samo posiadanie certyfikatu nie daje z automatu http2, ale jest wymagane. Http2 trzeba włączyć w serwerze www i w danym vhoście (o ile nie zostanie ustawione domyślnie dla wszystkich). Jeśli na hostingu tego nie masz, nie możesz włączyć w panelu i po kontakcie z supportem też nie - to tak, najwyższy czas się przenieść do kogoś, kto ogarnia.

Ja pytałem się o dwie rzeczy na raz. Może inaczej skonstruuje pytanie, mianowicie nie mam pojęcia jak zrobić dachowanie CSS przez co mi tego nie robi. Mógłby ktoś podesłać jakąś instrukcję?

To tak, żeby cache miał sens, to nazwa zasobu musi być unikalna (w nazwie pliku hash z zawartości). Wtedy można cache ustawić na bardzo długi czas i jeśli zmieni się zawartość, hash się przeliczy i będzie nowy link.
Czyli de facto musisz tu mieć jakiś builder wpleciony. Krok po kroku to wygląda tak:
1. Budujesz całą stronę (html, js, css).
2. Dla assetów (js, css) wyliczasz ich hashe z zawartości pliku.
3. Zmieniasz nazwę (np z main.css, main.js na odpowiedniki z hashem w nazwie => main-a0a9af.css main-8a98asdf.js).
4. We wszystkich plikach HTML podmieniasz linki z main.css na main-a0a9af.css i main.js na main-8a98asdf.js

Cache plików HTML pownien być krótki, tak aby przeglądarka dość często pobierała samą stronę, natomiast assety można w takim przypadku wrzucać do cache nawet np na rok, albo w sumie też do nieskończoności ;-) Jeśli nastąpią zmiany w treści, wygeneruje się nowy hash, nowa nazwa pliku => przeglądarka pobierze nowe pliki.

CDN może serwować nagłówki z serwera źródła. Cache na poziomie serwera www można zrobić na kilka sposobów, w zależności od wersji, dostępnych modułów.
Przykłady dla Apache:

[APACHE] pobierz, plaintext 
<IfModule mod_headers.c>
    # Images - 1 year
    <filesMatch "\.(jpg|jpeg|png|gif|ico|svg)$">
        Header set Cache-Control "max-age=31536000, public"
        Header unset Set-Cookie
    </filesMatch>
 
    # Fonts - 1 year
    <filesMatch "\.(ttf|otf|eot|woff|woff2)$">
        Header set Cache-Control "max-age=31536000, public"
        Header unset Set-Cookie
    </filesMatch>
 
    # JS/CSS - 1 year
    <filesMatch "\.(css|js)$">
        Header set Cache-Control "max-age=31536000, public"
        Header unset Set-Cookie
    </filesMatch>
 
    # Media files - 1 month
    <FilesMatch "\.(txt|pdf|flv|swf|mp3|mp4)$">
        Header set Cache-Control "max-age=2628000, public, must-revalidate"
        Header unset Set-Cookie
 
        # Create the ETag to check resource hash every time
        FileETag MTime Size
    </FilesMatch>
 
    # XML - 1 hour
    <FilesMatch "\.xml$">
        Header set Cache-Control "max-age=3600, public, must-revalidate, no-cache"
        # Create the ETag to check resource hash every time
        FileETag MTime Size
    </FilesMatch>
 
    # Short, 1 min cache for html files, forcing re-validate with ETag
    <FilesMatch ".(htm|html)$">
        Header set Cache-Control "max-age=60, public, must-revalidate, no-cache"
        # Create the ETag to check resource hash every time
        FileETag MTime Size
    </FilesMatch>
 
    # PHP and JSON - disabled
    <FilesMatch "\.(php|json)$">
        Header set Cache-Control: "max-age=0, no-store, no-cache"
    </FilesMatch>
 
    # Make sure old browser won't get compressed files
    <FilesMatch ".(js|css|xml|svg|json|gz|html|htm)$">
        Header append Vary Accept-Encoding
    </FilesMatch>
</IfModule>
[APACHE] pobierz, plaintext 

[APACHE] pobierz, plaintext 
<IfModule mod_expires.c>
    # Set basic Expires header as a fallback
    # If there is a Cache-Control header with the "max-age" or "s-maxage" directive in the response,
    # the Expires header is ignored.
    ExpiresActive on
 
    # By default cache all for 1 minute only
    # (so nothing will be cached for too long)
    ExpiresDefault                                    "access plus 60 seconds"
 
    # Images
    ExpiresByType image/gif                           "access plus 1 year"
    ExpiresByType image/png                           "access plus 1 year"
    ExpiresByType image/jpg                           "access plus 1 year"
    ExpiresByType image/jpeg                          "access plus 1 year"
    ExpiresByType image/pipeg                         "access plus 1 year"
    ExpiresByType image/svg+xml                       "access plus 1 year"
 
    # Icons
    ExpiresByType image/ico                           "access plus 1 year"
    ExpiresByType image/icon                          "access plus 1 year"
    ExpiresByType text/ico                            "access plus 1 year"
    ExpiresByType image/x-ico                         "access plus 1 year"
    ExpiresByType image/x-icon                        "access plus 1 year"
    ExpiresByType application/ico                     "access plus 1 year"
    ExpiresByType image/vnd.microsoft.icon            "access plus 1 year"
 
    # Audio
    ExpiresByType audio/ogg                           "access plus 1 month"
    ExpiresByType audio/basic                         "access plus 1 month"
    ExpiresByType audio/mid                           "access plus 1 month"
    ExpiresByType audio/midi                          "access plus 1 month"
    ExpiresByType audio/mpeg                          "access plus 1 month"
    ExpiresByType audio/x-aiff                        "access plus 1 month"
    ExpiresByType audio/x-mpegurl                     "access plus 1 month"
    ExpiresByType audio/x-pn-realaudio                "access plus 1 month"
    ExpiresByType audio/x-wav                         "access plus 1 month"
 
    # Video
    ExpiresByType video/ogg                           "access plus 1 month"
    ExpiresByType video/mp4                           "access plus 1 month"
    ExpiresByType video/webm                          "access plus 1 month"
    ExpiresByType video/x-msvideo                     "access plus 1 month"
    ExpiresByType video/mpeg                          "access plus 1 month"
    ExpiresByType video/quicktime                     "access plus 1 month"
    ExpiresByType video/x-la-asf                      "access plus 1 month"
    ExpiresByType video/x-ms-asf                      "access plus 1 month"
    ExpiresByType x-world/x-vrml                      "access plus 1 month"
 
    # Fonts
    ExpiresByType font/truetype                       "access plus 1 year"
    ExpiresByType font/opentype                       "access plus 1 year"
    ExpiresByType application/x-font-ttf              "access plus 1 year"
    ExpiresByType application/x-font-woff             "access plus 1 year"
    ExpiresByType application/font-woff               "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject       "access plus 1 year"
 
    # Scripts and styles
    ExpiresByType text/css                            "access plus 1 year"
    ExpiresByType text/javascript                     "access plus 1 year"
    ExpiresByType text/x-javascript                   "access plus 1 year"
    ExpiresByType application/javascript              "access plus 1 year"
    ExpiresByType application/x-javascript            "access plus 1 year"
 
    # Data
    ExpiresByType application/pdf                     "access plus 1 month"
    ExpiresByType image/vnd.wap.wbmp                  "access plus 1 month"
    ExpiresByType application/vnd.wap.wbxml           "access plus 1 month"
    ExpiresByType application/smil                    "access plus 1 month"
 
    # Text
    ExpiresByType text/html                           "access plus 1 minute"
    ExpiresByType text/plain                          "access plus 1 minute"
    ExpiresByType text/xml                            "access plus 1 minute"
    ExpiresByType application/xml                     "access plus 1 minute"
 
    # RSS
    ExpiresByType application/rss+xml                 "access plus 1 hour"
    ExpiresByType application/atom+xml                "access plus 1 hour"
    ExpiresByType text/x-component                    "access plus 1 hour"
 
    # Live data
    ExpiresByType application/json                    "access plus 0 seconds"
    ExpiresByType application/ld+json                 "access plus 0 seconds"
 
    # Manifest
    ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
    ExpiresByType text/cache-manifest                 "access plus 0 seconds"
 
    # PHP - diable to be cached unless they explicitly send cache headers themselves.
    <FilesMatch \.php$>
        ExpiresActive Off
    </FilesMatch>
 
</IfModule>
[APACHE] pobierz, plaintext 

[APACHE] pobierz, plaintext 
<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
</IfModule>
[APACHE] pobierz, plaintext 

Pomyślałem o generowaniu przez PHP plików CSS z hashowanym rozmiarem pliku tylko nie wiem jak optymalnie można byłoby to zrobić

Rozmiar to nie jest dobry wyznacznik. Możesz dodać 100 znaków i 100 innych usunąć i rozmiar zostanie ten sam, a zawartość się będzie różnić. Hash z zawartości jest najpewniejszy.

Hash całej zawartości? I pytanie, generować nowe pliki CSS przez PHP czy da się to zrobić na poziomie revite rule w htaccess

Zwykle CSSy się buduje z jakiś SASS/SCS, buildery oparte są o JS, mają zwykle taki ficzer wbudowany albo łatwy do dołączenia.

Jeśli nie korzystasz z czegoś takiego, to tak czy inaczej w PHP jest to łatwe do osiągnięcia, bo przecież są gotowe funkcje jak https://www.php.net/manual/en/function.hash-file.php czy też https://www.php.net/manual/en/function.sha1-file.php



Generalnie to odwrotnie - masz zmienione pliki CSS, zmieniasz ich nazwę i podmieniasz ją w plikach HTML.

a jakbym nie zmieniał nazwy plików tylko dodawał do nazwy css hash - przykład: nazwa.css?v=hash to nie będzie to w taki sam sposób działać ?

Ja w ten sposób dodaję na końcu datę zmiany.
Z hashem będzie automat ;-)

Będzie.

Ten Twój kod działa za dobrze... chciałbym wyłączyć z cachowania katalog admin. Powiesz mi jak to zrobić ?