web-dev-qa-db-fra.com

Mise en garde sur le contenu visible Avertissement concernant les tailles de page inférieures à 14,6 Ko

Je cours un page de test qui n'a pas de js et quelques CSS en ligne qui est de 2,24 KB. Lorsque je lance le test sur pagespeed , tout se passe bien, mais lorsque j'inclus une image de 5.9 KB, l'avertissement "Prioriser le contenu visible" s'affiche.

J'aimerais inclure l'image dans ma mise en page, mais pas au risque de recevoir cet avertissement de la vitesse de la page.

Jusqu'à présent, je sais qu'il y a 2,24 Ko de fichiers CSS intégrés et une image de 5,9 Ko, ce qui correspond à 8,14 Ko. La fenêtre d'encombrement initiale est généralement compressée à 14,6 Ko. Il me reste donc un effet de levier de 6,46 Ko pour le texte visible. Je doute que le texte visible dépasse 6,46 KB cependant. Selon GTmetrix, la taille du document n’est que de 15,5 Ko.

J'ai peut-être mal compris quelque chose, mais y a-t-il un moyen de mesurer la taille du contenu visible?

page-speedgoogle-pagespeed
3
Fabian Amran

Je suis tombé sur cette question alors que je rencontrais un problème similaire avec quelques-uns de mes sites et j'ai confirmé, tout comme vous, que l'image au-dessus du pli (dans mon cas, un logo) était la question à prendre en compte dans chaque cas. Fait intéressant, j'ai beaucoup d'autres sites avec un logo au-dessus du pli qui ne déclenchent pas l'avertissement de PVC.

J'ai lu dans un Google forum thread que si vous spécifiez simplement les dimensions exactes de votre image, vous passerez le test de PVC, mais j'estime que cela est faux. Pour moi, cela est nécessaire, mais les dimensions réelles importent également.

Malheureusement, après quelques expérimentations, je n'arrive pas à trouver un modèle cohérent ou une solution qui explique comment Google décide ce qui déclenche un avertissement PVC, mais la chose la plus intéressante que j'ai constatée est que je n'ai pas réellement dû changer d'image. Je devais simplement le réduire via les déclarations de largeur et de hauteur, ce qui indiquerait que la taille du fichier n'est probablement pas le facteur pertinent.

Bien sûr, la petite taille de l'échantillon (3 de mes sites) et le fait que tous mes sites utilisent le même thème signifient que je risque de ne pas généraliser. Néanmoins, il vaut la peine de faire des essais si vous rencontrez le même problème. Pour mes tests, j'ai créé une fonction permettant de générer le code de l'image du logo avec des spécifications de largeur et de hauteur faciles à ajuster. Peut-être exagéré, mais j'ai écrit la fonction pour prendre en compte l'une des trois variables d'échelle globales possibles, que je déclare dans le fichier functions.php de mon thème:

  1. $GLOBALS['image_ratio']
  2. $GLOBALS['image_maxheight']
  3. $GLOBALS['image_maxwidth']

Je vérifie ensuite si l'un de ces paramètres est défini et recalcule les valeurs de largeur et de hauteur appropriées en fonction des dimensions de l'image d'origine. Voici le code final:

if ( ! function_exists( 'se103976_scale_image' ) ) {
    function se103976_scale_image() {
        $image_alt = get_bloginfo( 'name' );
        $image_src = "image.png";   // --- whatever image you want to use (with relevant path)
        list( $image_width, $image_height ) = getimagesize( $image_src );

        // --- Sometimes need to reduce image to pass Google PageSpeed Prioritize Visible Content warning 
        // --- So, can do by a ratio, by a max width or a max height, depending on global variable set in functions.php file 
        if ( $GLOBALS['image_ratio'] != false) { 
            $image_width = round($GLOBALS['image_ratio'] * $image_width);
            $image_height = round($GLOBALS['image_ratio'] * $image_height);
        }
        if ( $GLOBALS['image_maxheight'] != false) {
            if ($image_height > $GLOBALS['image_maxheight']) {
                $ratio = $GLOBALS['image_maxheight'] / $image_height;
                $image_height = $GLOBALS['image_maxheight'];
                $image_width = round($image_width * $ratio);
            }
        }
        if ( $GLOBALS['image_maxwidth'] != false) {
            if ($image_width > $GLOBALS['image_maxwidth']) {
                $ratio = $GLOBALS['image_maxwidth'] / $image_width;
                $image_width = $GLOBALS['image_maxwidth'];
                $image_height = round($image_height * $ratio);
            }
        }
?><img alt="<?php echo $image_alt; ?>" src="<?php echo $image_src; ?>" width="<?php echo $image_width; ?>" height="<?php echo $image_height; ?>" /><?php
    }
}

Une fois que j'ai trouvé les dimensions qui élimineraient l'avertissement de PVC, j'ai utilisé un outil de redimensionnement d'image en ligne pour redimensionner et remplacer mon image d'origine.

1
Mojamba

Voici ce que Google dit à propos de "donner la priorité au contenu visible":

Le rendu d'une page Web moderne nécessite beaucoup de ressources réseau, mais toutes ne sont pas nécessaires immédiatement. Le contenu visible de la page est priorisé sur le réseau et le navigateur, de sorte qu'il n'est pas nécessaire de concurrencer le reste de la page.

Vous obtiendrez cet avertissement sur une page avec une image sous le pli. Leur façon de résoudre le problème consiste à charger l'image paresseuse. Pour ce faire, créez un code HTML ressemblant à ceci:

<img src="blank.gif" data-src="real-image.jpg">

Ensuite, ayez du javascript qui remplace l'attribut src par la valeur de l'attribut data. Cela devrait se produire soit après l'événement onload, soit lorsque l'utilisateur fait défiler l'écran jusqu'à un certain point. Il existe de nombreuses bibliothèques javascript à chargement paresseux. Vous avez juste besoin de les rechercher.

0
Stephen Ostermiller