Rendimiento: realmente acelere los sitios web de WordPress [#2]

Bienvenido de nuevo a «cómo acelerar los sitios web de WordPress». En la primera parte de nuestra serie, hemos abordado la importancia de la solución de alojamiento web correcta. Mientras lo hacíamos, respondimos preguntas sobre las ventajas del alojamiento en SSD y por qué es importante que HTTP/2 esté activado en el servidor. En esta parte, nos ocuparemos de Prefetch y Preconnect, así como de la optimización efectiva de imágenes y gráficos. Especialmente las imágenes constituyen el cuello de botella de la optimización del rendimiento y, en este punto, la mayoría de los usuarios fallan y dejan de optimizar, ya que simplemente no saben cómo continuar. También hablaremos sobre el uso adecuado de los anuncios de Google Adsense.

1 – Precarga y preconexión

El uso de ambas técnicas es ventajoso tan pronto como sea necesario cargar muchos archivos y scripts externos. Esto incluye bloques de anuncios de Google Adsense, así como todos los demás archivos que deben cargarse desde servidores externos. Son fáciles de usar y vienen con ventajas medibles. El factor decisivo es que la resolución de DNS y el llamado protocolo de enlace ya se ejecutan en las etapas iniciales de carga del sitio web, y no en el último momento cuando se solicita el archivo.

DNS: captación previa

<link rel="dns-prefetch" href="//fonts.googleapis.com" />

Este enlace al recurso externo que desea que se solicite pertenece al encabezado del sitio web. Esta línea de código hace que el navegador ejecute las resoluciones DNS al comienzo de la carga para que el recurso pueda cargarse más rápido más adelante. los DNS (Sistema de nombres de dominio) traduce las direcciones IP de su servidor en nombres de dominio. Ingrese el dominio en la línea del navegador y el DNS traduce el dominio a la dirección IP del servidor para el navegador. En promedio, este proceso toma entre 20 y 250 milisegundos. El elemento Prefetch le permite acortar este tiempo.

Preconectar

<link rel="preconnect" href="//fonts.googleapis.com" />

El elemento Preconnect es diferente de DNS Prefetch solo en un aspecto. Aquí se da un paso más, y se Apretón de manos TCP y TLS son ejecutados. Estos también son procesos importantes que generalmente toman un momento. Combinar ambos elementos tiene sentido, ya que la carga de recursos externos se puede hacer más rápido si se solicita. Como todos los archivos que no es necesario mostrar en el área visible se ubican en el pie de página para una optimización de velocidad profesional, esto hace que los datos en el pie de página se carguen más rápido. Por lo tanto, recomiendo agregar ambos elementos en el encabezado de todos los archivos externos; sin embargo, solo deje que se carguen donde tenga sentido. Para la mayoría de los archivos, esto solo estará en el área del artículo, pero no en la página de destino.

Por lo tanto, mi encabezado se ve así:

Controlo qué atributos necesito en qué lugar usando . Prefetch y Preconnect solo tienen sentido cuando los respectivos archivos externos están realmente cargados. Como la página de destino de mi sitio web no carga todos los scripts y archivos, solo permito la resolución DNS donde se cargan los archivos.

2 – Optimización de imagen

En esta área, necesitamos profundizar en nuestra bolsa de trucos. Esto ya comienza con guardarlo para la web. En Photoshop, debe asegurarse de que Los archivos JPEG se guardan progresivamente. El uso de múltiples imágenes de formato parcialmente grande mata cualquier rendimiento. Sin embargo, eso no significa que no pueda funcionar. ¡Solo necesita modificar un poco y, desafortunadamente, gastar dinero! Echemos un vistazo a la página de destino de mi sitio web. Publicación Democrática. Hay 26 imágenes en la página de destino, uno de ellos en el formato 1000×420 píxeles, cinco en el formato 740×315 píxeles Además, he activado el widget de publicaciones principales de Jetpack. Esto es, por decir lo menos, un verdadero desafío. Aquí está el enfoque que tomé para la optimización:

Complemento de WordPress para la optimización de imágenes: Óptimo sede

Óptimo es actualmente el mejor complemento para optimizar imágenes. Confía en mí; no hay mejor Optimus no es gratuito, ya que es un complemento premium. Por supuesto, también hay una versión gratuita de Optimus, pero no logra lo que necesitamos. La compra no se puede evitar cuando se usan muchas imágenes en su sitio web como lo hago yo. Optimus HQ se ofrece actualmente a un precio reducido y cuesta 19 euros por un año. No necesariamente una cantidad que agote sus bolsillos. La compresión de imágenes sin pérdida de Optimus HQ es excepcional. Además, el complemento ofrece una ventaja sobre todos los demás complementos de optimización de imágenes. Puede crear gráficos WebP. Solo este formato de archivo hace que los sitios web con muchas imágenes sean tan rápidos cuando el formato es compatible con el navegador. Sin embargo, también logra mejores resultados sin el soporte de WebP.

Optimus recomienda utilizar el complemento Cache Enabler para integrar la compatibilidad con WebP. No desaconsejo esto, ya que Cachify sigue siendo el complemento de almacenamiento en caché más rápido cuando se ajusta para la creación de páginas HTML estáticas, pero hablaremos de eso más adelante. Después de comprar e instalar Optimus HQ, se debe usar el optimizador masivo para optimizar todas las imágenes que ya están guardadas en la biblioteca de medios.

Asegurar el soporte de WebP con .htaccess

El método más inteligente y rápido para entregar los formatos de imagen correctos a los diferentes navegadores es una entrada en el archivo .htaccess. Esto asegurará que el formato JPG se reescriba instantáneamente en el formato WebP en los navegadores compatibles. Simplemente coloque el siguiente código en la parte superior de su archivo .htaccess:

Un clic abre la esencia en GitHub

Ahora, al echar un vistazo al texto fuente HTML, nos daremos cuenta de que todavía se hace referencia a los archivos JPEG.

Sin embargo, al profundizar un poco más en las herramientas de desarrollo de Google Chrome, en el área «red», veremos rápidamente que el navegador no muestra el gráfico como JPEG, sino como WebP.

Aquí, es más evidente:

Restricciones: La generación de formatos de imagen WebP solo funciona para formatos de imagen de vista previa que se han registrado en WordPress correctamente, a través de la función de miniaturas de publicación.

El resultado es convincente

La diferencia de tamaño de archivo entre JPEG y WebP es evidente. La primera imagen de vista previa grande de mi sitio web en una resolución de 1000 x 420 píxeles tiene un tamaño de archivo de 168 KB en el formato JPEG mientras que su tamaño es sólo 98,7KB como un WebP. En este caso, el navegador tiene 69,3 KB menos para cargar. Al agregar todas las demás imágenes, esto se suma a una enorme reducción en el tamaño del archivo de su sitio web. Los navegadores que admiten el formato de archivo WebP pueden cargar y mostrar su sitio web mucho más rápido.

Soporte de navegador para gráficos WebP

Para Firefox, hay un parche que añade la falta soporte WebP.

3 – Anuncios de Google Adsense

Apenas hay sitios que aún puedan prescindir de los famosos anuncios de Google Adsense. Eso está bien, ya que puede ganar una cantidad agradable de dinero con ellos cuando se colocan correctamente. Pero, ¿dónde deben colocarse los anuncios para que no afecten la velocidad de carga de un sitio web y sigan siendo efectivos? El uso correcto e inteligente decide sobre el dinero que puedes ganar, así como sobre el rendimiento. Google da una guía ellos mismos, sin embargo, no es lo suficientemente eficiente y tampoco tiene en cuenta el rendimiento. Por lo tanto, te daré mi opinión sobre el uso óptimo:

a – ¡Los anuncios de Adsense no tienen nada que ver en la página de destino!

No los coloque allí en ningún caso. Retrasarán el proceso de creación de la página en unos 800 milisegundos. Esto equivale a casi un segundo completo de tiempo de carga para un bloque de anuncios con un tamaño de 300 x 250 píxeles. Los anuncios que se colocan allí también solo generan un par de centavos por día, incluso con un tráfico mayor. Recuerde siempre: la página de destino es el buque insignia de su sitio web para muchos visitantes. Esperan una página principal que cargue rápidamente. Además, el el tiempo de carga tiene un impacto directo en la tasa de rebotees decir, la cantidad de páginas a las que accede un visitante antes de abandonar su sitio web.

b – Solo integre Google Adsense en el contenido de los artículos

Un solo anuncio que se colocó directamente dentro del contenido del artículo puede generar mucho dinero. Mucho más que cualquier otra colocación. Según mi experiencia, este anuncio es suficiente para generar la ganancia deseada y mantener el tiempo de carga lo más bajo posible. Aquí en Noupe, este anuncio está vinculado arriba del primer párrafo, yo (en Democratic Post) lo integré debajo del primer párrafo. Para mí, funciona perfectamente bien allí.

c – Característica de WordPress para la integración automática de anuncios

WordPress puede implementar automáticamente el contenido después del primer párrafo de un artículo. Debe completar el siguiente código con su bloque de anuncios de Google Adsense y luego agregarlo a functions.php de su tema o al complemento del sitio personalizado.

Un clic abre Gist en GitHub

Acelere los sitios web de WordPress: conclusión de la segunda parte

Con las modificaciones de hoy, ya ganamos mucha velocidad y eliminamos los cuellos de botella más grandes de la optimización del rendimiento. La optimización de gráficos y anuncios agrega una tonelada de velocidad que Google recompensará con una mejor clasificación en los resultados de búsqueda.

enlaces relacionados

• Complemento de optimización de imágenes Optimus HQ para WordPress
• FastWP: Optimización de imágenes de WordPress
• Puedo usar: Formato de imagen WebP
• El .htaccess para el Soporte WebP
• El parche para que Firefox admita WebP
• Google: Prácticas recomendadas para la colocación de anuncios
• Kissmetrics: Cómo el tiempo de carga afecta su resultado final
• La esencia de la visualización automática de un bloque de anuncios de Google después del primer párrafo

(dpe)