Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.md 2.0KB

4 jaren geleden
1234567891011
  1. title: Performances site
  2. > Par dessus tout, je constate que le chargement de vos pages web se font à une vitesse record, ce qui ne peut que susciter mon admiration et m’amène à vous demander quels sont vos secrets (si vous acceptez bien sûr de les partager). Utilisez-vous Django pour déployer votre site ? NGinx ? Ou avez-vous développé votre propre serveur web le tout en Python ?
  3. >
  4. > <cite>Daniel par email</cite>
  5. Mon site est constitué de pages statiques générées par des scripts personnels utilisant [Fabric](http://www.fabfile.org/). Il est hébergé par [Alwaysdata](https://www.alwaysdata.com/) sur un serveur mutualisé et servi avec Apache. Ce sont plus les performances côté client qui font la différence avec le chargement des `CSS` et `JS` en inline et le chargement des polices a posteriori avec [Font Face Observer](https://github.com/bramstein/fontfaceobserver). Les polices alourdissent énormément la page et ça reste du luxe mais je les conserve car je suis sensible à l’esthétique de mes propres lectures et elles ne sont pas indispensable à la lecture du contenu.
  6. Cela me permet de rester à 6/8 requêtes au premier chargement et une seule au rafraichissement ou au changement de page. Il y a les *headers* appropriés pour que vous ne rechargiez pas les images ou polices. La cerise sur le gâteau c’est [InstantClick](http://instantclick.io/) qui donne une vraie impression de vitesse en pré-chargeant les liens locaux au survol avant même de cliquer.
  7. Je pourrais aller plus loin en n’inlinant (sic) que les `CSS` critiques comme l’ont fait [Raphaël](http://www.alsacreations.com/tuto/lire/1685-ebauche-de-workflow-gulp-taches-uncss-includes-critical-css.html) ([cache](/david/cache/dc35a12d6b5b4fbe28e964997b10afb8/)) ou [Jeremy](https://adactio.com/journal/8504) ([cache](/david/cache/70ce67ed910c56329a329c2ad194c75e/)) mais je trouve ça un peu *overkill* vu le besoin. J’ai plutôt choisi [la frugalité](/david/blog/2015/principes-web/) en terme de design :-).