31 Dic 2019 Desde hace años ya. Google, tiene en cuenta la velocidad de tu sitio web a la hora de posicionarlo en su buscador pero, desde el pasado mes de noviembre esto tiene aún mayor peso, siendo ya uno de los principales parámetros a valorar a la hora de que tu página sea visible o no.
Para comprobar la velocidad de nuestra web así como su optimización, existen varias herramientas de Google entre las que destaca Google PageSpeed Insights. Si has realizado una comprobación en los últimos tiempos de los resultados que devuelve PageSpeed, has podido ver por tus propios ojos que seguramente tu página ha bajado drásticamente su puntuación, ¿uno de los principales motivos? Las imágenes next-gen.
¿Qué son las imágenes next-gen?
Los formatos JPEG 2000, JPEG XR y WebP, osea las imágenes next gen, son un formato de imágenes con una compresión y calidad superior a sus contrapartes JPEG y PNG, es decir, codificando nuestras imágenes en esos formatos obtendremos imágenes de mayor calidad y con un menor peso, por lo que nuestra web cargará con mayor rapidez. Lo correcto sería tener una copia en cada uno de esos formatos ya que JPEG 2000 es el formato utilizado por safari, JPEG XR es el de Microsoft Edge y WebP es usado en Chrome, Firefox y Opera. Debido a que esto implicaría tener la imagen por cuatriplicado, recomendamos tener como mínimo el formato WebP implementeado ya que es uno de los de mayor rendimientos así como uno de los que va a tener más soporte de navegadores.
¿Cómo implemento las imágenes next-gen y optimizo mi puntuación en Google PageSpeed Insights?
La forma más óptima de implementar esto sería utilizar la etiqueta picture y reemplazar todas las imágenes de nuestra web. De esta forma y sería el navegador que si soporta el formato webp utiliza dicha imagen y si no utiliza la imagen por defecto:
<picture> <source srcset="imagenwebp.webp" type="image/webp"> <img src="imagenpng.png" > </picture>
Aún así, no siempre es posible o viable realizar todos los cambios necesarios para que esto sera así por lo que vamos a dar un pequeño tip para hacerlo sin modificar nuestra web. Existen numerosas librerías que se encargan de hacer la conversión a webP, así que nos vamos a basar en esta para simplificar nuestro trabajo. Una vez descargada dicha librería, únicamente tendremos que añadir estas líneas a nuestro htaccess
<IfModule mod_rewrite.c>
RewriteEngine On # Redirect to existing converted image in cache-dir (if browser supports webp)
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^/?(.+)\.(jpe?g|png)$ /imagenes-webp.php [NC,L,E=REQFN:%{REQUEST_FILENAME}]
<IfModule mod_headers.c>
<FilesMatch "(?i)\.(jpe?g|png)$">
Header append "Vary" "Accept"
</FilesMatch>
</IfModule>
</IfModule>
Con esto haremos que en vez de acceder directamente a nuestras imágenes png o jpg, primero pasaremos por nuestro archivo imagenes-webp.php en caso de que nuestro navegador soporte el uso de este tipo de formato. Una vez tengamos esto, simplemente creamos dicho archivo en el que crearemos la imágenes en webp:
<?php require_once "./webp-convert-master/vendor/autoload.php"; use WebPConvert\WebPConvert; $source = $_SERVER['REQUEST_URI']; $destination = $source . '.webp'; WebPConvert::serveConverted($source, $destination, [ 'fail' => 'original',
'serve-image' => [
'headers' => [
'cache-control' => true,
'vary-accept' => true,
],
'cache-control-header' => 'max-age=2',
],
'convert' => [
],
]);
Ya estaremos utilizando imágenes next-gen en nuestra web con estos sencillos pasos, por lo que tanto la velocidad de carga de nuestra web como nuestra puntuación en Google PageSpeed Insights se verán incrementadas en gran manera.
