Tag : chargement

Ajoutez un effet d’apparition fluide sur vos images

Voici un petit script qui théoriquement vous permettra d’améliorer la qualité de l’expérience utilisateur sur votre site et blog. Sur le principe vous allez faire afficher les images uniquement lorsque le visiteur pourra les voir avec un petit effet fade in très sympathique. Ce script jQuery « Lazy Load » est disponible sous la forme d’un script jQuery mais aussi sous la forme d’un plugin pour wordpress, Image Lazy Load, alors n’hésitez pas à vous faire plaisir.

Quelques images pour la démonstration (cela ne marchera pas dans votre lecteur RSS) :

Par ailleurs si vous utilisez le plugin wp-minify sachez qu’il faudra commenter les lignes 15, 16 et 17 du fichier jquery-image-lazy-loading.php comme cela :

< ?php
   
  /*
  Plugin Name: jQuery lazy load plugin
  Plugin URI: http://github.com/ayn/wp-jquery-lazy-load/
  Description: a quick and dirty wordpress plugin to enable image lazy loading.
  Version: v0.10
  Author: Andrew Ng
  Author URI: http://blog.andrewng.com
  */

function jquery_lazy_load_headers() {
  $plugin_path = plugins_url('/', __FILE__);
  $lazy_url = $plugin_path . 'javascripts/jquery.lazyload.mini.js';
//  $jq_url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
//  wp_deregister_script('jquery');
//  wp_enqueue_script('jquery', $jq_url, false, '1.4.2');
  wp_enqueue_script('jquerylazyload', $lazy_url, 'jquery', '1.5.0');
}

function jquery_lazy_load_ready() {
  $placeholdergif = plugins_url('images/grey.gif', __FILE__);
  echo <<
jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("img").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});

EOF;
}

  add_action('wp_head', 'jquery_lazy_load_headers', 5);
  add_action('wp_head', 'jquery_lazy_load_ready', 12);
?>

Quelques articles à lire aussi


Speed speed speed, voilà c’est officiel

Tout le monde l’attendait, le présentait mais maintenant c’est officiel comme annoncé par Google sur le blog de Webmaster Central blog qui annonce que le temps de chargement devient l’un des critères de ranking dans les résultats de recherche, tout cela pour un web meilleur!

Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings. We use a variety of sources to determine the speed of a site relative to other sites.

Bon le message est clair on n’a plus qu’à optimiser le tout. Pour information vous pouvez voir quelle est la vitesse vue pas google dans l’interface de Google Webmaster Tools (GWT pour les intimes) dans l’onglet Labs (site performance). Voici le graphique pour 2803.fr, au moins je sais sur quoi travailler mais par quel bout le prendre…

Je sais que le badge fan de la page Facebook consomme énormément je viens d’ailleurs de remplacer le script par une iframe, on verra ce que cela va donner. Sinon vous avez quoi comme temps de chargement donné par l’interface de GWT?

Quelques articles à lire aussi