Vous n'êtes pas identifié(e).
13 février 2024 Sortie de Dotclear 2.29
Bonjour,
La CSS et le fichier _public.php de mon thème deviennent de plus en plus gros : 22ko pour ma CSS... et 25ko pour le fichier _public.php ! (Je précise que j'utilise DÉJÀ le plugin CompreSS.)
Du coup, je me demandais s'il ne serait pas judicieux pour moi de scinder ma feuille de style en plusieurs feuilles différentes... Cela signifierait avoir deux feuilles de style pour chaque page : une, commune à l'ensemble du site, contenant les styles courants (liens, listes, structure de la page, etc.), et une autre pour les styles spécifiques à chaque page.
J'hésite néanmoins :
- d'un côté, le temps de chargement s'en trouverait réduit ;
- mais d'un autre côté, cela fait 2 requêtes (on appelle deux feuilles de style à chaque fois) au lieu d'1. Et, dans le cas actuel, ma feuille de style est de toutes façons mise en cache (en tout cas, j'imagine que c'est le cas ?)
Donc, j'aimerais vos avis : 2 feuilles de style plutôt qu'une seule serait-il effectivement préférable ? Les sites aidant à optimiser le temps de chargement incitent à réduire le plus possible le nombre de requêtes effectuées, alors je ne sais pas trop à quoi m'en tenir...
Pour le fichier _public.php, cela me semble encore plus indispensable : seules quelques fonctions (rarement les mêmes d'une page à l'autre) sont utilisées sur chaque page, donc j'aimerais avoir un fichier _public.php différent pour chaque page de mon blog. Cela est-il possible ? Comment mettre cela en place ?
Merci de votre aide !
Hors ligne
Pour le fichier _public.php, le gain sera négligeable, en effet il ne concerne que le serveur et son poids ne transite pas par Internet ;)
Pour la feuille de style, en revanche, il y a probablement matière à optimisation. La solution la plus simple est d'ajouter le lien vers le fichier css uniquement dans page.html, si ce sont des pages, ou dans post.html si ce sont des billets, avec une condition sur l'url du billet par exemple
Hors ligne
Pour la feuille de style, en revanche, il y a probablement matière à optimisation. La solution la plus simple est d'ajouter le lien vers le fichier css uniquement dans page.html, si ce sont des pages, ou dans post.html si ce sont des billets, avec une condition sur l'url du billet par exemple
Il y aussi ce plugin EntryCSS qui remplit cette fonction.
Hors ligne
C'est mieux d'avoir un seul fichier (une seule requête http) et 25 Ko ce n'est pas grand chose, surtout si tu actives la compression gzip sur le serveur pour les fichiers de type texte (css, html, js, etc).
«Quand j'étais petit, je voulais être maître du monde. Maintenant que je suis grand, j'arrive à peine à être maître de moi-même.» Le Chat/Philippe Geluk.
Dotclear a besoin de vous
Hors ligne
OK pour le fichier _public.php. Je comprends mieux comment il est géré.
En ce qui concerne la CSS, j'avais essayé il y a plusieurs mois d'activer la compression gzip (en bidouillant, si je me souviens bien, dans le .htaccess), mais ça ne fonctionnait pas. Je m'y prenais sans doute mal. Quelqu'un aurait fait ça chez lui et pourrait m'indiquer la procédure à suivre ? (Le site en question est hébergé chez OVH)
Merci !
Dernière modification par fix (2012-05-18 11:54:04)
Hors ligne
J'ai utilisé le fichier de html5 boilerplate.
«Quand j'étais petit, je voulais être maître du monde. Maintenant que je suis grand, j'arrive à peine à être maître de moi-même.» Le Chat/Philippe Geluk.
Dotclear a besoin de vous
Hors ligne
En ce qui concerne la CSS, j'avais essayé il y a plusieurs mois d'activer la compression gzip (en bidouillant, si je me souviens bien, dans le .htaccess), mais ça ne fonctionnait pas. Je m'y prenais sans doute mal. Quelqu'un aurait fait ça chez lui et pourrait m'indiquer la procédure à suivre ? (Le site en question est hébergé chez OVH)
Chez OVH, j'utilise ceci dans mon .htaccess, à adapter bien entendu
# Turn on Expires and set default expires to 1 week
ExpiresActive On
ExpiresDefault A604800
# Set up caching on media files for 1 week
<FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf|swf|mov|mp3|wmv|ppt)$">
ExpiresDefault A604800
Header append Cache-Control "public"
</FilesMatch>
# Set up 24 Hour caching on commonly updated files
<FilesMatch "\.(xml|txt|html|js|css)$">
ExpiresDefault A86400
Header append Cache-Control "public"
</FilesMatch>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascriptHors ligne
Voici le mien reprenant en bonne partie celui de html5 boilerplate + l'activation php5 de ovh + http header pour mp3 + rewrite rule pour faire disparaître index.php des urls :
#SetEnv PHP_VER 5_TEST
SetEnv PHP_VER 5
# Force the latest IE version, in various cases when it may fall back to IE7 mode
# github.com/rails/rails/commit/123eb25#commitcomment-118920
# Use ChromeFrame if it's installed for a better experience for the poor IE folk
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=Edge"
# mod_headers can't match by content-type, but we don't want to send this header on *everything*...
<FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp3|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|xpi|safariextz|vcf)$" >
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>
<IfModule mod_headers.c>
# Because X-UA-Compatible isn't sent to non-IE (to save header bytes),
# We need to inform proxies that content changes based on UA
Header append Vary User-Agent
# Cache control is set only if mod_headers is enabled, so that's unncessary to declare
</IfModule>
<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
# audio
AddType audio/ogg oga ogg
AddType audio/mp4 m4a
AddType audio/mpeg mp3
# video
AddType video/ogg ogv
AddType video/mp4 mp4 m4v
AddType video/webm webm
# Proper svg serving. Required for svg webfonts on iPad
# twitter.com/FontSquirrel/status/14855840545
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
# webfonts
AddType application/vnd.ms-fontobject eot
AddType font/truetype ttf
AddType font/opentype otf
AddType application/x-font-woff woff
# assorted types
AddType image/x-icon ico
AddType image/webp webp
AddType text/cache-manifest appcache manifest
AddType text/x-component htc
AddType application/x-chrome-extension crx
AddType application/x-xpinstall xpi
AddType application/octet-stream safariextz
# ----------------------------------------------------------------------
# Gzip compression
# ----------------------------------------------------------------------
<IfModule mod_deflate.c>
# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
<IfModule filter_module>
FilterDeclare COMPRESS
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/x-component
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/json
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/rss+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/atom+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype
FilterChain COMPRESS
FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no
</IfModule>
<IfModule !mod_filter.c>
# Legacy versions of Apache
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/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>
# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------
# these are pretty far-future expires headers
# they assume you control versioning with cachebusting query params like
# <script src="application.js?20100608">
# additionally, consider that outdated proxies may miscache
# www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
# if you don't use filenames to version, lower the css and js to something like
# "access plus 1 week" or so
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# your document html
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType application/xhtml+xml "access plus 0 seconds"
# data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# rss feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# media: images, video, audio
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType audio/mpeg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# htc files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# webfonts
ExpiresByType font/truetype "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# css and javascript
ExpiresByType text/css "access plus 2 months"
ExpiresByType application/javascript "access plus 2 months"
ExpiresByType text/javascript "access plus 2 months"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>
# ----------------------------------------------------------------------
# ETag removal
# ----------------------------------------------------------------------
# FileETag None is not enough for every server.
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
# Since we're sending far-future expires, we don't need ETags for
# static content.
# developer.yahoo.com/performance/rules.html#etags
FileETag None
# ----------------------------------------------------------------------
# UTF-8 encoding
# ----------------------------------------------------------------------
# use utf-8 encoding for anything served text/plain or text/html
AddDefaultCharset utf-8
# force utf-8 for a number of file formats
AddCharset utf-8 .html .xhtml .css .js .xml .json .rss
Options -MultiViews -Indexes
RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php/$1 [L]
RewriteRule ^$ /index.php/ [L]Dernière modification par patidou (2012-05-19 14:24:22)
«Quand j'étais petit, je voulais être maître du monde. Maintenant que je suis grand, j'arrive à peine à être maître de moi-même.» Le Chat/Philippe Geluk.
Dotclear a besoin de vous
Hors ligne
J'ai repris la partie "Gzip compression" (tout ce qui est avant - à part les 2 premières lignes - me semble assez obscure) et la partie "Expires headers" du .htaccess de patidou... et ça marche parfaitement bien !
ETag removal... ça sert vraiment à quelque chose ? Je demande ça en gros benêt ignare que je suis :)
Hors ligne
Ben tu peux tout prendre, une partie c'est de l'optimisation pour le cache du navigateur : on donne une date d'expiration lointaine aux fichiers images, vidéos et sons pour qu'ils ne soient pas rechargés à chaque fois (pour ça il faut également enlever les etags qui servent plus à rien dans ce cas). Le reste sert à donner la bonne entête http suivant le type de fichier et activer ou non la compression.
Dernière modification par patidou (2012-05-20 20:10:51)
«Quand j'étais petit, je voulais être maître du monde. Maintenant que je suis grand, j'arrive à peine à être maître de moi-même.» Le Chat/Philippe Geluk.
Dotclear a besoin de vous
Hors ligne
Si tu ne l'a pas déjà fait, tu peux aussi installer le plugin Static Cache. C'est très efficace, surtout si tu court-circuite l'accès à la BDD (lire le README pour configurer).
Dernière modification par patidou (2012-05-24 13:34:32)
«Quand j'étais petit, je voulais être maître du monde. Maintenant que je suis grand, j'arrive à peine à être maître de moi-même.» Le Chat/Philippe Geluk.
Dotclear a besoin de vous
Hors ligne
Je vais aller voir ça de plus près. Merci !
Une question tout de même : l'utilisation d'un tel fichier .htaccess, qui active entre autres la compression gzip, fait-elle absolument doublon avec l'emploi d'un plugin comme CompreSS ?
Hors ligne
Compress supprime à l'intérieur des fichiers ce qui n'est pas nécessaire (tabulations, retours, espace, etc), gzip comprime vraiment le fichier comme un fichier zip. C'est plutôt complémentaire.
Pour les images, on peut utiliser un service comme smush.it.
«Quand j'étais petit, je voulais être maître du monde. Maintenant que je suis grand, j'arrive à peine à être maître de moi-même.» Le Chat/Philippe Geluk.
Dotclear a besoin de vous
Hors ligne
Gnnn ??? Kékidit ?
Pour en revenir à l'utilisation conjointe de la compression gzip et du plugin CompreSS, ça diminue la taille des fichiers chargés par l'utilisateur de 1 ko seulement... ce qui est négligeable. Dans la mesure où je fais assez régulièrement des ajustements à ma feuille de style, je me contenterai donc de la compression gzip, sans me contraindre en plus à compresser mes CSS.
Hors ligne
Vous n'êtes pas identifié(e).