Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)
La mayoría de los navegadores web hacen una solicitud automática de favicon cada vez que cargan una página. No notarás esto si tu sitio tiene un favicon, pero puede ser bastante molesto si no es así. Afortunadamente, puedes resolver este problema con tan solo una línea de código HTML.
Problema: solicitudes automáticas de favicon
Al igual que con cualquier otra solicitud a un agente de usuario, una solicitud de favicon abre un diálogo de comunicación entre el navegador del usuario y el servidor. Esto da como resultado una solicitud HTTP más y una sobrecarga adicional de 1.5 KB, que son un desperdicio innecesario del rendimiento si no tienes un favicon, y puede ser especialmente molesto en un sitio de prueba y desarrollo cuando quieres ejecutar verificaciones del rendimiento.
Cómo evitar la solicitud automática de favicon
Puedes eliminar por completo la solicitud automática de favicon agregando la siguiente línea de código a la sección <head> de tu página HTML:
1 |
<link rel="icon" href="data:,"> |
Este pequeño fragmento de código asigna un URL de datos vacío al elemento <link> del favicon, el cual especifica la ubicación del recurso externo. Este truco impide que el navegador del usuario envíe una solicitud HTTP automática para el favicon.
Verificación rápida del rendimiento
Para demostrar el problema y la solución, he creado un sitio de demostración simple con dos páginas HTML: una con la etiqueta <link> con el URL de datos vacío y otra sin ella. Usé la herramienta GTmetrix para medir el tiempo de carga de la página, el tamaño total de la página y la cantidad de solicitudes HTTP.
Estos son los resultados cuando no se elimina la solicitud automática de favicon:
Verás que tenemos dos solicitudes HTTP; una para el archivo HTML y una para el (no existente) favicon. Esto da como resultado un tamaño de página total de 1.73 KB y un tiempo de carga de página de 183 ms.
En la pestaña Recommendation (Recomendación), GTmetrix incluso nos recuerda evitar la solicitud incorrecta al archivo favicon.ico.
Cuando agregamos el fragmento de código previamente discutido, esa solicitud HTTP adicional desaparece, el tamaño de página total se vuelve mucho más pequeño (250 B en vez de 1.73 KB), la página carga un poco más rápido (169 ms en vez de 183 ms), y la advertencia Avoid bad request (Evita la solicitud incorrecta) desaparece también:
Optimización simple del rendimiento
¡Y ahí lo tenemos! Un consejo muy rápido que resuelve un problema persistente con una solución simple. Este puede parecer un problema insignificante a tratar, pero estas mejoras marginales pueden hacer una gran diferencia en el rendimiento de tu sitio web.
Aprende más sobre la optimización del rendimiento de los sitios web
RendimientoUna guía sobre el formato de imagen WebP para el diseñador web.png)
.png)
CSSOptimiza tu sitio web sin AMP: una lista de verificación para la optimización
RendimientoMejora del rendimiento: cómo cargar imágenes usando in-view.js
WordPressPrueba de rendimiento: los temas de WordPress mejor vendidos en ThemeForest
By
