3 formas de promover la carga de imágenes en WordPress

Último capítulo de mi resumen sobre imágenes bajo WordPress Un tema que puede convertirse rápidamente en un problema real en términos de rendimiento … No hace mucho, le expliqué cómo optimizar el tamaño de sus medios! Luego vimos juntos cómo aligerar nuestras fotos.

Sin embargo, existe Todavía hay otros medios para alentar la carga Además, por extensión, es la visualización de sus páginas lo que se acelerará! Entonces, una vez que sus imágenes estén bien dimensionadas y aligeradas al máximo, veamos cómo ganar velocidad nuevamente .

Cargue sus imágenes en tiempo récord en WordPress

Las imágenes de buen tamaño y optimizadas aún se pueden optimizar. La carga se puede acelerar gracias al caché, la carga perezosa y un CDN

Optimización del caché de imágenes

Sí, pero aquí está … Entonces, ¿cuál es el caché? ? Cuando se muestra su sitio web, puede pedirle que copie algunos de sus archivos en la computadora del visitante. El navegador utilizado (Chrome, Firefox, etc.), por lo tanto, cargará estos archivos en uno de sus directorios.

Entonces, cuando este visitante regrese, no todos los datos se cargarán desde el servidor de su host sino directamente desde su computadora. Ahorro de tiempo garantizado !

De hecho, el tiempo de carga depende en gran medida del tiempo de transmisión entre la computadora del visitante y el servidor. Además, esto puede promover la velocidad de su sitio para los nuevos visitantes ya que el tráfico al servidor se reduce de facto ! Entonces, ¿cómo esconder tu? imágenes y otros archivos en WordPress ? Hay varios métodos disponibles para nosotros !

Esconda manualmente las imágenes a través de .htaccess

En primer lugar: si no sabe qué es el archivo .htaccess o si anda a tientas, aquí hay algo para encender su linterna. Para los demás, vámonos ! Esto está en la raíz de su WordPress, justo debajo de la carpeta wp-incluye.

Si quieres poner tu imágenes ocultarlo sin pasar por un complemento, primero asegúrese de que su host haya activado mod_headers en su servidor. Sepa que este es generalmente el caso. Luego agregue estas pocas líneas en su .htaccess después de la anotación #END WORDPRESS .

<IfModule mod_headers.c>

<FilesMatch “.(gif|ico|jpeg|jpg|png|css|js)$”>

Header set Cache-Control “max-age=604800, public”

</FilesMatch>

</IfModule>

Le dicen al servidor qué tipos de archivos almacenar en caché. Todos los tipos deimágenes pasar allí (gif, jpeg, png e incluso ico). Además, por el bien del ejemplo, incluso agregamos los javascripts y el estilo CSS

La duración del almacenamiento en caché se define en segundos, es decir, 7 días en el ejemplo dado. Por lo tanto, estos datos se guardarán en un directorio de su navegador en su computadora durante este período. Por lo tanto, el navegador transmitirá regularmente una solicitud para verificar que el caché siga siendo válido.

Sin embargo, es posible evitar la transmisión de esta solicitud indicando un período de vencimiento. Para hacer esto, debe asegurarse de que mod_expire esté bien activado en el servidor de su host. Luego ingrese las siguientes líneas.

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg „access plus 1 year“

ExpiresByType image/jpeg „access plus 1 year“

ExpiresByType image/gif „access plus 1 year“

ExpiresByType image/png „access plus 1 year“

ExpiresByType text/css „access plus 1 month“

ExpiresByType text/html „access plus 1 month“

ExpiresByType application/pdf „access plus 1 month“

ExpiresByType text/x-javascript „access plus 1 month“

ExpiresByType application/x-shockwave-flash „access plus 1 month“

ExpiresByType image/x-icon „access plus 1 year“

ExpiresDefault „access plus 1 month“

</IfModule>

Aquí, dependiendo del tipo de archivo, el vencimiento del caché se define entre un mes y un año. Puede completar estos encabezados de vencimiento con caché de control ingresando las siguientes líneas.

<IfModule mod_headers.c>

<FilesMatch ".(ico|jpeg|png|gif|swf|css|gz)$">

Header set Cache-Control "max-age=2592000, public"

</FilesMatch>

<FilesMatch ".(js)$">

Header set Cache-Control "max-age=2592000, private"

</FilesMatch>

<filesMatch ".(html|htm)$">

Header set Cache-Control "max-age=7200, public"

</filesMatch>

# Disable caching for scripts and other dynamic files

<FilesMatch ".(pl|php|cgi|spl|scgi|fcgi)$">

Header unset Cache-Control

</FilesMatch>

</IfModule>

Simplemente intente hacer que las duraciones de la memoria caché de control coincidan más o menos con las de los encabezados de vencimiento.

Use compresión GZip

No es un método de caché per se. Sin embargo, esta opción se ofrece en casi todos los complementos de caché, te digo aquí.

Como su nombre indica, estas son consultas que obligan a la compresión de archivos. Más pequeño, su carga y, por lo tanto, la de su sitio web se aceleran. Aquí están las líneas para agregar:

RewriteEngine on

#Check to see if browser can accept gzip files. If so and we have it - serve it!

ReWriteCond %{HTTP:accept-encoding} gzip

RewriteCond %{HTTP_USER_AGENT} !Safari

#make sure there's no trailing .gz on the url

ReWriteCond %{REQUEST_FILENAME} !^.+.gz$

#check to see if a .gz version of the file exists.

RewriteCond %{REQUEST_FILENAME}.gz -f

#All conditions met so add .gz to URL filename (invisibly)

RewriteRule ^(.+) $1.gz [QSA,L]

<IfModule mod_gzip.c>

mod_gzip_on Yes

mod_gzip_dechunk Yes

mod_gzip_keep_workfiles No

mod_gzip_can_negotiate Yes

mod_gzip_add_header_count Yes

mod_gzip_send_vary Yes

mod_gzip_command_version '/mod_gzip_status'

mod_gzip_min_http 1000

mod_gzip_minimum_file_size 300

mod_gzip_maximum_file_size 512000

mod_gzip_maximum_inmem_size 60000

mod_gzip_handle_methods GET POST

mod_gzip_temp_dir /tmp

mod_gzip_item_include file .html$

mod_gzip_item_include file .php$

mod_gzip_item_include file .pl$

mod_gzip_item_include file .rb$

mod_gzip_item_include file .py$

mod_gzip_item_include file .cgi$

mod_gzip_item_include file .css$

mod_gzip_item_include file .js$

mod_gzip_item_include mime ^application/javascript$

mod_gzip_item_include mime ^application/x-javascript$

mod_gzip_item_include mime ^text/.*

mod_gzip_item_include mime ^httpd/unix-directory$

mod_gzip_item_include handler ^cgi-script$

mod_gzip_item_include handler ^server-status$

mod_gzip_item_include handler ^server-info$

mod_gzip_item_include handler ^application/x-httpd-php

mod_gzip_item_exclude mime ^image/.*

</IfModule>

¿Hay algún complemento para eso en WordPress? ?

Pero ciertamente ! Además, ofrecen, más o menos, las mismas opciones. Es sobre su control y su efectividad que se hará la diferencia.

WP Super Cache: amigo de los novatos

Si no sabes a dónde vas, WP Super Cache está hecho para ti ! Un botón simple le permite ocultar su WordPress sin molestarse con configuraciones peligrosas.

En caso de que desee probarlo, cada opción tiene su explicación y la mención “recomendada” o no. Lástima que su efectividad sea muy limitada en comparación con la competencia. Incluso si hace el truco muy bien.

WP Super Cache: amigo de los novatos

Si no está seguro de a dónde va, WP Super Cache está hecho para usted !

Caché más rápido de WP: simple y (casi) efectivo

Pregunta simplicidad WP Fastest Cache está en la parte superior de la canasta. Incluso si necesita más de un clic para activar el caché en su WordPress. Sin embargo, las opciones esenciales están ahí y bien explicadas, aunque sucintamente.

Sin embargo, lamentamos la gran cantidad de opciones disponibles solo en la versión premium. Pero también efectividad limitada al abrir informes de rendimiento, especialmente en términos de minificaciones y combinaciones JS, CSS y HTML

Caché más rápido de WP: simple y (casi) efectivo

Simplicidad de preguntas, WP Fastest Cache está en la parte superior de la canasta. Incluso si necesita más de un clic para activar el caché en su WordPress.

Caché total W3: una herramienta (demasiado) avanzada

W3 Total Hide es probablemente el complemento de caché gratuito más recomendado en la comunidad de WordPress. Sin embargo, también es el más complicado de configurar. Esto se debe a que le da control sobre todas las opciones disponibles hasta la duración exacta de la cubierta.

Para esto, no se trata de limitarse a una sola página y un solo botón. Once pestañas le permiten personalizar alrededor de cincuenta parámetros.

Parámetros que también estarán atentos a los encabezados de seguridad que se pueden incorporar a su .htaccess. Y es por eso que un error de visualización puede ocurrir rápidamente después de una configuración desafortunada. Incluso si sigue los muchos tutos presentes en Internet.

Más que una extensión de caché, W3 Total Cache se convierte en un complemento de optimización para .htaccess. Muy práctico pero que requiere un tiempo bastante significativo de agarre y comprensión cuando comienza. Todo para actuaciones no siempre a la par en comparación con las de WP Fastest Cache.

Como regla general, trato de exponerlo a soluciones gratuitas o, al menos, freemiums. Sin embargo, para los complementos de caché, puede pasar a WP Rocket. Si tiene suficiente para invertir, es la extensión que combina la mejor eficiencia y simplicidad.

Caché total W3: una herramienta (demasiado) avanzada

W3 Total Cache es probablemente el complemento de caché gratuito más recomendado en la comunidad de WordPress.

Cargue sus páginas en Lazy Load

Aquí hay un proceso muy interesante ! Sin embargo, su implementación a menudo ha sido más complicada de lo que parece. A menos que haya invertido muy temprano en una solución como WP Rocket … Pero esto parece pertenecer a una época pasada desde el advenimiento de WordPress 5.5.

Desde esta versión, WordPress admite de forma nativa la carga perezosa a través de nuevas etiquetas. Por otro lado, los navegadores también se están actualizando en esta área. Especialmente Chrome y Firefox.

Por lo tanto, los problemas de visualización después de la implantación de la carga perezosa son cada vez más raros. Por lo tanto, es cada vez más interesante usarlo !

Pero cuál es la carga perezosa ? Cuando se muestra una página web, todos sus elementos se cargan al mismo tiempo. Solo después de completar este envío puede interactuar con la página. La carga perezosa, literalmente “carga perezosa”, consiste en cargar un elemento solo una vez que aparece en la pantalla.

De hecho, es el proceso utilizado por las redes sociales para mostrar su flujo de actividad. Este es el caso de Facebook, Twitter, Pinterest … Le permite interactuar con la página web sin cargar todos sus elementos. Conveniente si tienes un sitio Una página u ofrecer muchos medios (cartera, etc …).

Qué complemento elegir cargar mis imágenes en Lazy Load ?

La mayoría de los complementos de caché ahora ofrecen esta opción. Este es el caso de W3 Total Cache o WP Fastest Cache y WP Rocket en versión paga. Sin embargo, si ha optado por el almacenamiento en caché manual, puede recurrir a algunas pequeñas extensiones de monotask que hacen su trabajo muy bien.

A3 Lazy Load: la referencia en esta área

Es el más conocido. También es el complemento más simple y completo de carga perezosa. A3 Lazy Load ofrece un panel de opciones que permite, en particular, diferenciar las imágenes que se cargarán diferidas o no. Esto de acuerdo con su clase CSS o su ubicación dentro de la página.

Sin embargo, la extensión también trata con videos, iframes y scripts. También es posible excluir páginas enteras del proceso, si es necesario. Todo con algunas opciones adicionales, como las relacionadas con el panel de administración, la apariencia de las imágenes durante la carga o la compatibilidad con ellas JetPack.

A3 Lazy Load: la referencia en esta área

A3 Lazy Load ofrece un panel de opciones que permite, en particular, diferenciar las imágenes que se cargarán retrasadas o no.

BJ Lazy Load: derecho a lo esencial

Interfaz minimalista, peso mínimo y opciones esenciales: aquí BJ Lazy Load !

Aquí también, encontramos la configuración de la carga de las imágenes de acuerdo con su ubicación en la página, su tipo o incluso su clase CSS. Pero eso es todo … o casi. Sí, la carga perezosa también es aplicable a los inframes.

Pero nada para videos, incrustaciones y guiones. Dicho esto, puede definir una imagen predeterminada que aparecerá en lugar de las que se están cargando.

BJ Lazy Load: derecho a lo esencial

Interfaz minimalista, peso mínimo y opciones esenciales: aquí está BJ Lazy Load !

Usa un CDN

CDN como red de entrega de contenido ! Que es eso ? Es un servidor como el que ofrece su host. La diferencia radica en el hecho de que este servidor original se despliega en varios servidores periféricos. Sin embargo, completa el servidor de su host. Entonces no puedes prescindir de lo último. De hecho, los CDN no ofrecen alojamiento y menos aún un nombre de dominio.

Estos se distribuyen en todo el mundo para estar lo más cerca posible de los visitantes de su sitio web. Por lo tanto, es a través del servidor periférico más cercano al usuario de Internet que este último cargará sus páginas.

De acuerdo, muy bien. Pero, ¿cómo es más interesante que el servidor ofrecido por su host? ? Bueno, al igual que con el almacenamiento en caché, un CDN puede reducir el tráfico entre los visitantes y el servidor original, ya que está dividido en varios servidores periféricos.

Por otro lado, dicha red también reduce la distancia entre los visitantes y el servidor original. De hecho, el sitio web se sirve al usuario a través del servidor más cercano a él, lo que promueve el tiempo de carga. Esto es especialmente útil si su audiencia es global !

A qué CDN recurrir ?

Cloudflare: lo esencial

Su versión gratuita lo convierte fácilmente en el CDN más popular. Por lo tanto, la mayoría de los complementos de caché que ofrecen una conexión con un CDN tuvieron que agregar Cloudflare en su lista. Este es el caso de WP Rocket y WP Fastest Cache. Pero los anfitriones también se metieron en eso !

Sin embargo, este no es su único activo. Cloudflare está presente en más de 200 ciudades repartidas en cien países de todo el mundo. También es el que ofrece la mejor cobertura global entre las referencias del mercado. Y esto no es insignificante en comparación con lo que mencionamos anteriormente.

Por otro lado, ofrece la mayoría de las opciones solicitadas a un CDN en su versión gratuita. Cifrado SSL / TLS, HTTP / 2 (e incluso HTTP / 3 ahora), seguridad. En cuanto a la compresión a través de Brotli, se encuentra en la versión paga en compañía de ajustes de seguridad avanzados.

Cloudflare: lo esencial

La mayoría de los complementos de caché que ofrecen una conexión con un CDN tuvieron que agregar Cloudflare a su lista.

StackPath: el competidor ?

Si está familiarizado con la optimización de WordPress, ya sabe StackPathDe hecho, conoce el CDN que esta compañía acaba de comprar: MaxCDN. Una referencia desde entonces presente en la lista de muchos complementos de caché como WP Fastest Cache pero también W3 Total Cache con el que tiene exclusividad.

Esto puede explicar la funcionalidad avanzada de la extensión. De hecho, StackPath ofrece funcionalidades muy avanzadas en términos de caché. En cualquier caso, más que los propuestos por Cloudflare, por ejemplo.

Por lo tanto, además de una carga optimizada, aquí es donde el CDN intenta hacer un escándalo además de las funcionalidades actuales. Porque, cuestión de presencia mundial, la solución está lejos de ser la primera ciudad. Se riegan 65 ciudades en 16 países. Si está buscando principalmente la optimización de la carga y la pantalla, la accesibilidad paga de la solución puede convertirse rápidamente en un freno.

StackPath: el competidor ?

Si está familiarizado con la optimización de WordPress, conoce StackPath. De hecho, conoce el CDN que esta compañía acaba de comprar: MaxCDN .

KeyCDN: la fortaleza del precio

Solo está presente en 34 ciudades pero en 25 países. Sin embargo, KeyCDN ofrece rendimientos ligeramente más altos que los de Cloudflare en términos de visualización y carga. Sin embargo, son comparables a los de StackPath.

Por otro lado, además de las funcionalidades actuales, KeyCDN ofrece opciones avanzadas de seguridad y caché. Nivel de rendimiento, también se implementan opciones de economía de ancho de banda.

Pero la gran fortaleza de la solución radica en su fórmula de pago de crédito. Esto permite al usuario pagar solo por los datos utilizados. Un modelo que hace que KeyCDN sea una solución tres o cinco veces más barata que sus dos competidores antes mencionados.

KeyCDN: la fortaleza del precio

KeyCDN ofrece un rendimiento ligeramente mayor que Cloudflare en términos de visualización y carga. Sin embargo, son comparables a los de StackPath.

Como comprenderá, optimizar la carga de sus páginas web no se trata solo de sus imágenes. De hecho, se refiere a todos los elementos de su WordPress. Sin embargo, a menudo es con la acumulación que surgen problemas de carga.

De todos modos, ahora tiene todas las tarjetas en la mano para promocionar la visualización de un sitio web con muchas fotos. Optimice el tamaño, aligere su peso y promueva su carga.

Y usted, ¿cómo optimiza la carga de? imágenes bajo WordPress ? Quizás esté utilizando otros métodos que no se explican aquí. En este caso, no dude en compartirlos en los comentarios !

Te puede interesar:  Editar el Texto alternativo de forma automática en imágenes de WordPress

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Share This