Discussion générale Optimisation de votre site internet
Bonjour à tous !
Cette partie du tutoriel s'adresse principalement au Framework PHPBoost.
Il y aura une partie pour WordPress.
Explication sur le .HTACCESS
Mod Expire : Ce module contrôle le réglage de l'en-tête Expires HTTP et la directive max-age de l'en-tête HTTP Cache-Control dans les réponses du serveur. La date d'expiration peut être relatif soit à la fois le fichier source a été modifié, ou au moment de l'accès client.
Mod Gzip: Ce module permet de compresser les données côté serveur afin de les envoyé au client ( à l'internaute )
Mod Header: Ce module fournit des directives pour contrôler et modifier les requêtes HTTP et les en-têtes de réponse. En-têtes peuvent être fusionnées, remplacés ou supprimés.
Edit: Le tutoriel concernant l'optimisation de WP sera un tuto vidéo, ça sera beaucoup plus pratique :-)
Sur certains site internet, l'optimisation du Javascript via le .htaccess ne fonctionne pas correctement, donc si ça plante supprimer les lignes concernant le Javascript ... Edité par Myster Le 09/01/2013 à 16h44
Cette partie du tutoriel s'adresse principalement au Framework PHPBoost.
Il y aura une partie pour WordPress.
Aujourd'hui nous allons voir et savoir comment et pourquoi optimiser notre site internet ?
Pourquoi optimiser mon site internet ? Il est très bien comme ça non ?
Vous savez peut-être tous que Google et d'autres moteurs de recherche prennent en compte la rapidité d'affichage de vos pages . En optimisant votre site internet vous aurez également un meilleur référencement.
De plus cela permet aussi de gagner quelques visiteurs, puisque beaucoup d'internautes n'attendent pas l'ouverture de vos pages, si c'est trop long pour eux ils quittent simplement votre site et vont chez un concurrent.
Pourquoi optimiser mon site internet ? Il est très bien comme ça non ?
Vous savez peut-être tous que Google et d'autres moteurs de recherche prennent en compte la rapidité d'affichage de vos pages . En optimisant votre site internet vous aurez également un meilleur référencement.
De plus cela permet aussi de gagner quelques visiteurs, puisque beaucoup d'internautes n'attendent pas l'ouverture de vos pages, si c'est trop long pour eux ils quittent simplement votre site et vont chez un concurrent.
Comment optimiser mon site internet ?
Ah ! À ce que je vois, comme vous lisez la suite, c'est que vous souhaitez optimiser l'affichage de vos pages .
Vous ne voulez pas perdre un seul internaute . Vous avez donc fait le bon choix :-)
1. Activer la compression des pages grâce à GZIP
L'activation de la compression Gzip est très utile, en activant celle-ci vous compressez les données envoyées aux internautes
Par exemple:
imaginons que votre index pèse 30 Ko, en activant la compression Gzip, elle fera 8 KO <= un gain d'optimisation !
Donc assez de blabla, pour activer la compression Gzip rendez-vous dans votre administration de PHPBoost, et cliquer sur Configuration avancée ensuite vous descendez vers le bas, et il y a donc une case à cocher intitulé Activation de la compression des pages, ceci accélère la vitesse d'affichage
regardez d'abord si elle est disponible sur votre serveur, si elle l'ait et bien cocher la case et enregistrer, vous remarquez déjà que l'affichage de votre site internet est plus rapide qu'auparavant :-)
2. Optimisation par le biais du .htaccess
Ensuite la deuxième étape se passe dans votre .htaccess, donc sous PHPBoost il ne faut pas le faire en ouvrant le fichier .htaccess, j'ai déjà essayé et ça supprime le contenu du .htaccess.
Alors, donc nous allons nous rendre une fois de plus dans l'administration de PHPBoost, puis Configuration avancée, et là nous avons un textbox géant il sera très facile à reconnaître, si vous ne savez toujours pas à quoi il ressemble, cherchez ces mots sur votre page :
Contenu du fichier .htaccess
Vous pouvez dans ce champ mettre les instructions que vous souhaitez intégrer au fichier .htaccess qui se trouve à la racine du site, par exemple pour forcer une configuration du serveur web Apache.
Voilà vous avez trouvé ! On peux donc continué :-), donc dans le textbox, veuillez mettre le code suivant :
Edit : A la fin du tutoriel, vous aurez quelques explications sur les différents paramètres présents dans le .htaccess
Enregistrer et voilà ! Votre site est maintenant plus rapide qu'avant :-) félicitation vos membres et visiteurs, ainsi que les robots d'indexation en seront ravis !
Ah ! À ce que je vois, comme vous lisez la suite, c'est que vous souhaitez optimiser l'affichage de vos pages .
Vous ne voulez pas perdre un seul internaute . Vous avez donc fait le bon choix :-)
1. Activer la compression des pages grâce à GZIP
L'activation de la compression Gzip est très utile, en activant celle-ci vous compressez les données envoyées aux internautes
Par exemple:
imaginons que votre index pèse 30 Ko, en activant la compression Gzip, elle fera 8 KO <= un gain d'optimisation !
Donc assez de blabla, pour activer la compression Gzip rendez-vous dans votre administration de PHPBoost, et cliquer sur Configuration avancée ensuite vous descendez vers le bas, et il y a donc une case à cocher intitulé Activation de la compression des pages, ceci accélère la vitesse d'affichage
regardez d'abord si elle est disponible sur votre serveur, si elle l'ait et bien cocher la case et enregistrer, vous remarquez déjà que l'affichage de votre site internet est plus rapide qu'auparavant :-)
2. Optimisation par le biais du .htaccess
Ensuite la deuxième étape se passe dans votre .htaccess, donc sous PHPBoost il ne faut pas le faire en ouvrant le fichier .htaccess, j'ai déjà essayé et ça supprime le contenu du .htaccess.
Alors, donc nous allons nous rendre une fois de plus dans l'administration de PHPBoost, puis Configuration avancée, et là nous avons un textbox géant il sera très facile à reconnaître, si vous ne savez toujours pas à quoi il ressemble, cherchez ces mots sur votre page :
Contenu du fichier .htaccess
Vous pouvez dans ce champ mettre les instructions que vous souhaitez intégrer au fichier .htaccess qui se trouve à la racine du site, par exemple pour forcer une configuration du serveur web Apache.
Voilà vous avez trouvé ! On peux donc continué :-), donc dans le textbox, veuillez mettre le code suivant :
Edit : A la fin du tutoriel, vous aurez quelques explications sur les différents paramètres présents dans le .htaccess
Code TEXT :
# Turn on expiry <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 10 years" </IfModule> # Turn on mod_gzip if available <IfModule mod_gzip.c> mod_gzip_on yes mod_gzip_dechunk yes mod_gzip_keep_workfiles No mod_gzip_minimum_file_size 1000 mod_gzip_maximum_file_size 1000000 mod_gzip_maximum_inmem_size 1000000 mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/javascript$ mod_gzip_item_include mime ^application/x-javascript$ # Exclude old browsers and images since IE has trouble with this mod_gzip_item_exclude reqheader "User-Agent: .*Mozilla/4..*[" mod_gzip_item_exclude mime ^image/.* </IfModule> ## Apache2 deflate support if available ## ## Important note: mod_headers is required for correct functioning across proxies. ## <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.[0678] no-gzip BrowserMatch bMSIE !no-gzip <IfModule mod_headers.c> Header append Vary User-Agent env=!dont-vary </IfModule> # The following is to disable compression for actions. The reason being is that these # may offer direct downloads which (since the initial request comes in as text/html and headers # get changed in the script) get double compressed and become unusable when downloaded by IE. SetEnvIfNoCase Request_URI action/* no-gzip dont-vary SetEnvIfNoCase Request_URI actions/* no-gzip dont-vary </IfModule> # Configure ETags <FilesMatch ".(jpg|jpeg|gif|png|mp3|flv|mov|avi|3pg|3gp|3g2|html|htm|swf|js|ico)$"> FileETag MTime Size </FilesMatch>
Enregistrer et voilà ! Votre site est maintenant plus rapide qu'avant :-) félicitation vos membres et visiteurs, ainsi que les robots d'indexation en seront ravis !
3. Uniquement pour le Framework PHPBoost V4
PHPBoost intègre un système de cache il utilise le système de cache APC qui est vraiment performant vous pouvez donc l'activer sans risque si celui-ci est disponible sur votre serveur
.
Pour l'activer allez dans Outils, puis Cache, puis Configuration, et cocher la case activer, puis enregistrer, votre site est encore plus rapide
.
PHPBoost intègre un système de cache il utilise le système de cache APC qui est vraiment performant vous pouvez donc l'activer sans risque si celui-ci est disponible sur votre serveur
.Pour l'activer allez dans Outils, puis Cache, puis Configuration, et cocher la case activer, puis enregistrer, votre site est encore plus rapide
.4. Quelques conseils suggéré par Google :
- Regrouper les images dans des sprites CSS
- Exploiter la mise en cache du navigateur
- Optimiser les images
- Intégrer les ressources CSS peu volumineuses
- Autoriser la compression
- Limiter le nombre de redirections
- Réduire la taille des ressources JavaScript
- Différer l'analyse du code JavaScript
- Diffuser les ressources à partir d'une URL unique
- Optimiser l'ordre des styles et des scripts
- Éviter les requêtes incorrectes
- Spécifier une technique de mise en cache
- Réduire la taille des ressources CSS
- Spécifier les dimensions des images
- Réduire la taille des ressources HTML
- Spécifier un en-tête "Vary: Accept-Encoding"
- Activer la mise en cache des redirections vers la page de destination
- Activer les en-têtes Keep-Alive
- Diffuser des images mises à l'échelle
- Intégrer les ressources JavaScript peu volumineuses
- Placer le code CSS dans l'en-tête du document
- Privilégier les ressources asynchrones
- Réduire la taille de la requête
- Spécifier un jeu de caractères
- Supprimer les chaînes de requête des ressources statiques
- Éviter d'utiliser CSS @import
Explication sur le .HTACCESS
Mod Expire : Ce module contrôle le réglage de l'en-tête Expires HTTP et la directive max-age de l'en-tête HTTP Cache-Control dans les réponses du serveur. La date d'expiration peut être relatif soit à la fois le fichier source a été modifié, ou au moment de l'accès client.
Mod Gzip: Ce module permet de compresser les données côté serveur afin de les envoyé au client ( à l'internaute )
Mod Header: Ce module fournit des directives pour contrôler et modifier les requêtes HTTP et les en-têtes de réponse. En-têtes peuvent être fusionnées, remplacés ou supprimés.
Edit: Le tutoriel concernant l'optimisation de WP sera un tuto vidéo, ça sera beaucoup plus pratique :-)
Sur certains site internet, l'optimisation du Javascript via le .htaccess ne fonctionne pas correctement, donc si ça plante supprimer les lignes concernant le Javascript ... Edité par Myster Le 09/01/2013 à 16h44
Citation:
Myster ==> @Swan Pas nécessairement, PHPBoost4 permets également de supprimer le cache CSS =)
Oui et as tu ensuite regardé dans "l'état" des fichiers.css à l’intérieur des thèmes ? Je ne pense pas.. Tous est sur une seul ligne. Pour s'y retrouver le pied !Bon c'est vrai tout le monde sait comment les récupérer ensuite ...
J'entends de là :" Oui mais bon on s'en moque un peu , vu que l'on peu éditer les fichiers directement depuis l'administration."
Et je répondrais : "Bah oui c'est sur que ça c'est optimalisation ... Et le débutant qui doit y mettre les doigts dedans, si il ne sait pas et qu'il fait une boulette dans ses fameux fichiers : Il flingue son site ..."
Bref une belle histoire, en soit ^^
* Pour la compression du cache en V4 , attention il vous faut être sur de ne pas vouloir modifier votre thème, car même les fichier css sont compilés ...
Myster ==> @Swan Pas nécessairement, PHPBoost4 permets également de supprimer le cache CSS =)
Oui et as tu ensuite regardé dans "l'état" des fichiers.css à l’intérieur des thèmes ? Je ne pense pas.. Tous est sur une seul ligne. Pour s'y retrouver le pied !Bon c'est vrai tout le monde sait comment les récupérer ensuite ...
J'entends de là :" Oui mais bon on s'en moque un peu , vu que l'on peu éditer les fichiers directement depuis l'administration."
Et je répondrais : "Bah oui c'est sur que ça c'est optimalisation ... Et le débutant qui doit y mettre les doigts dedans, si il ne sait pas et qu'il fait une boulette dans ses fameux fichiers : Il flingue son site ..."
Bref une belle histoire, en soit ^^
Encore une fois j'avais mal compris ton affirmation, mais oui le CSS est complètement compressé.
Mais bon ensuite le tuto s'adresse plutôt au utilisateur averti qui ont quand même quelques notions concernant les systèmes de cache :-) Edité par Myster Le 07/01/2013 à 09h24
Mais bon ensuite le tuto s'adresse plutôt au utilisateur averti qui ont quand même quelques notions concernant les systèmes de cache :-) Edité par Myster Le 07/01/2013 à 09h24
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie