Optimiser son site et améliorer les temps de chargement

Hier, il y a eu quelques ralentissement du serveur (Dreamhost) dont je fais l’éloge dans mes derniers billets. Et donc j’ai décidé de m’attaquer à l’optimisation de Webdesign-tutoriaux. Donc voici tout d’abord les outils que j’ai utilisé :

pingdom.jpg

  • PingDom tool est un outil permettant de mesurer le temps de chargement de chaque éléments d’une page web et ainsi de voir les images ou les Javascripts qui peuvent ralentir.
  • Yslow qui est une extension Firefox pour FireBug et développé par Yahoo. Yslow mesure à peu près la même chose que PingDom mais depuis votre navigateur et en vous donnant des conseils d’optimisation.

En gros pour diminuer le temps de chargement d’une page il faut :

  • Eviter d’avoir trop de requêtes http sachant qu’il y a une requête pour chaque fichier Css et Js à charger.
  • Avoir des images de poids faible (généralement préférer les Gif au Jpeg) le découpage du design joue.
  • Lancer les scripts Javascript à la fin de la page quand c’est possible.

La solution si vous ne souhaitez pas rentrer dans les détails est un script PHP d’aciddrop qui permet en 3 lignes de :

  • Regrouper les fichiers CSS et Js en un seul pour avoir moins de requêtes Http
  • Ajouter des entêtes qui expirent
  • Compresser des composant de la page avec Gzip
  • Minifier (de minify en anglais) les Css, Javascript et html : en gros on supprime les espaces, les tabulations et les retour à la ligne afin que les fichiers soit moins gros et donc moins long à charger

Enjoy !

Pixbay : une sélection des meilleurs sites de webdesign et de webmastering

pixbay_net.jpg

Je vous présente Pixbay un nouveau site que je lance. C’est un annuaire de sites autour du webdesign et de la création de sites. L’objectif de cet annuaire est d’être tourné vers l’internaute qui cherche à découvrir de nouveaux sites et non pas vers le webmaster qui cherche à référencer ses sites. Ainsi Pixbay propose des listes des “meilleurs” sites sur une thématique donnée.

Par exemple :

Le site présente ses sélections soit en mode galerie soit en mode annuaire.

La migration de webdesign-tutoriaux est terminée

Voilà c’est fait ! j’ai migré webdesign tutoriaux chez Dreamhost comme je vous en avait parlé ici.

dreamhost.jpgwdt_1.jpg

 L’opération s’est passée sans aucun problème et normalement personne ne devrait s’en être aperçu ;). Le nom de domaine est passé de chez OVH vers Godaddy (environ 5 jours) et l’hébergement de chez OVH chez Dreamhost. Pour ceux que ça intéresse voici le mode opératoire utilisé qui m’a permis de garder le site en ligne :

Lire la suite »

Choix d’un nouvel hébergeur : Dreamhost

dreamhost.jpg

J’ai choisi de migrer l’ensemble de mes sites chez Dreamhost. J’étais tout à fait satisfait d’OVH (90Plan), les seules raisons sont les performances de l’offre :

  • 900 Mo de stockage chez OVH contre 500 Go chez Dreamhost.
  • 600 Go de bande passante par mois contre 5000 Go.
  • 5 Bases de données MySQL contre un nombre illimité…

Lire la suite »

Merci !

wdt.jpg

 

Juste un petit billet pour vous dire merci d’être de plus en plus nombreux à utiliser webdesign-tutoriaux. On vient de franchir la barre du demi-million de tutoriaux visités et ils ont été notés plus de 45 000 fois. on vient aussi de passer la barre des 4500 membres et les brushes ont été téléchargés plus de 45 000 fois.

Tout ça fait plaisir :) donc merci !

Webdesign-Tutoriaux Version 3 beta Lancé !

wdt_version3.jpg

Voilà, c’est fait … après quelques jours de travail acharné, Je viens de lancer la version 3 (beta car il doit rester quelques bugs) de Webdesign-tutoriaux.  Au programme, un nouveau design bien sûr quelques nouveautés techniques comme l’apparition des tutoriaux similaires dans le descriptif des tutoriaux…

Bref, j’attends vos retours.

Webdesign-tutoriaux version 3 : bientôt !

Voilà tout est dans le titre :) la version 3 de Webdesign tutoriaux est pour bientôt.

Au programme :

  • Un redesign du site et du blog qui tiendra compte des commentaires reçu lors du CSS summer refresh 2007 d’alsacréations.
  • Une optimisation SEO des pages de Webdesign tutoriaux.
  • Une refonte des pages de détail des tutoriaux avec une boite “tutoriaux similaire”.
  • Une gestion des espaces publicitaires différentes.

D’autre question se pose actuellement : faut-il un forum ?… Bref toutes les remarques sont bienvenues

Lancement d’un nouveau projet All-vp.com

all_vp.jpg

Si Webdesign-tutoriaux ainsi que le blog tournaient un peu plus au ralenti… C’est parce que je travaillais sur un autre projet personnel (nommé All-vp) que je viens de lancer. Rien à voir avec le Graphisme ou le Webdesign. All-vp est un site sur l’actualité des ventes privées. Il agrège l’ensemble des ventes de nombreux sites de ventes privées (Vente-privée, espacemax, AchatVIP, ClubPrivé ….). Il permet aussi d’être directement parrainer sur ces sites, All-vp dispose d’un Flux RSS afin d’avoir les news directement sur votre netvibes (ou agrégateur RSS personnel).

Je vous laisse découvrir ce site et me faire part de vos impressions (quand au design, contenu, défauts …).

Des améliorations sont bien sûr déjà prévues.

 

Webdesign-tutoriaux sous Mint !

mint_1.jpg

Depuis quelques temps, pas mal de monde parle de Mint qui est une nouvelle application PHP pour suivre les statistiques de fréquentation de son site web. Cette application est payante la licence est 30$ par domaine suivi, ce qui revient quand même chère lorsqu’on a plusieurs sites. J’ai donc cassé ma tirelire pour Webdesign-tutoriaux !

Lire la suite »

CssLeak sur Smashing Magazine - 404 Error Pages : Reloaded

cssleak.jpg

Voilà, Juste avant de partir en vacance ça fait plaisir : Cssleak a été sélectionné sur Smashing Magazine pour sa page d’erreur 404. C’était un petit concours lancé il y a 3 semaines par le magazine. Je propose à mes visiteurs perdus 2 recettes de cocktail que j’aime beaucoup. J’avais vu l’idée sur emob (rendons à césar ce qui lui revient de droit) et j’avais donc décidéde faire quelque chose de similaire pour CssLeak que j’ai proposé pour ce mini-concours. Ça va donner de la visibilité au site ce qui est plutôt bien en cette période creuse :).

A dans 2 semaines ;)