Aproveche las funciones modernas del navegador, como la precarga, la precarga y la preconexión para que el sitio web de WordPress sea más rápido.
Como propietario de un sitio, ¿a quién no le gusta hacer todo lo posible para cargar la página web más rápido?
Asegurar que el sitio se cargue más rápido y de manera constante en todo el mundo es un desafío. Hay varias cosas que puede hacer para cargar los recursos del sitio rápidamente, incluida la activación de las siguientes sugerencias del navegador. También se conocen como técnicas de prenavegación.
Nota: las técnicas de sugerencias del navegador no ayudan mucho cuando accede al sitio web por primera vez, pero las solicitudes posteriores son más rápidas.
Tabla de contenido
Precarga
Puede usar la etiqueta de precarga para decirle al navegador que obtenga algunos de los recursos estáticos antes. Pueden ser una imagen, fuente, JavaScript, CSS, scripts, video, etc. Ayuda a priorizar la carga de recursos; por lo tanto, se mejora el rendimiento.
Sería una buena idea implementar la carga previa si espera que sus usuarios visiten varias páginas posteriormente. Me gusta la tienda de comercio electrónico donde el usuario visita la página del producto y luego verifica la información, compara con otro producto, agrega al carrito, paga, etc.
Puede usar los siguientes complementos para configurar la función de precarga.
Mejores sugerencias de recursos – un complemento gratuito para configurar archivos CSS y JS.
WP Rocket: un complemento premium para potenciar el rendimiento del sitio web con muchas técnicas esenciales, incluida la precarga del almacenamiento en caché y el mapa del sitio.
¿Cómo saber si la precarga está habilitada?
La forma más rápida de averiguarlo es viendo la fuente de la página. Debería ver algo como a continuación.
<link rel="preload" as="style" href="https://wilku.top/implementing-preload-prefetch-preconnect-in-wordpress/IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">
No todos los navegadores admiten la precarga mientras se escribe. Por lo tanto, echa un vistazo a la matriz de compatibilidad antes de la implementación.
Preconectar
¿Cargas recursos de otros dominios? ¿Quizás CDN?
Si no es así, y todos los recursos se cargan desde su único dominio, es posible que esto no sea útil.
Preconectar el navegador de sugerencias para establecer una conexión con otros dominios en segundo plano para ahorrar tiempo para la búsqueda de DNS, la redirección, el protocolo de enlace TCP, la negociación TLS, etc. La idea es reducir la latencia para proporcionar una carga rápida de recursos desde otro dominio.
Nuevamente, puede usar el complemento de mejores sugerencias de recursos mencionado anteriormente o el premium como perfmatters.
Una vez configurados los recursos requeridos, debería verlos en la fuente de la página como se muestra a continuación.
<link rel="preconnect" href="https://ANOTHERSITE.com">
Nota: si está cargando los recursos de un dominio que requiere CORS, entonces debe especificar que el origen cruzado y la salida deberían verse.
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>
Preconnect es compatible con la última versión de Chrome, Edge, Firefox, Safari.
captación previa
Deje que el navegador obtenga la página siguiente, que cree que será necesaria cuando el usuario navegue. Prefetch descargará los recursos necesarios y los almacenará en el caché local y los servirá rápidamente cuando sea necesario. Hay dos tipos de captación previa.
Precarga de DNS: se explica a continuación
Búsqueda previa de enlace: configurada mediante
como atributo admite varios recursos como audio, video, guión, pista, estilo, fuente, objeto, documento, etc. La búsqueda previa de enlaces se puede configurar con la ayuda de Complemento de sugerencias de recursos previos a la fiesta.
Precarga de DNS
¿Está cargando recursos de muchos dominios y desea resolverlos en segundo plano?
Esta configuración rápida puede ayudar a resolver todos los dominios potenciales antes, de modo que cuando se soliciten recursos, se cargue más rápido. Esto ayuda a reducir la latencia general.
Digamos que está cargando recursos de 3 dominios, y cada dominio tarda alrededor de 100 ms en realizar la búsqueda de DNS, entonces ahorrará 300 ms de latencia.
¿No es genial?
Puede implementar utilizando el complemento perfmatters o agregar lo siguiente en el archivo functions.php de su tema si se siente cómodo editando los archivos del tema.
//* DNS Prefetching
function dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0);
Puedes leer más en Documentos web de Mozilla.
preprocesar
¿Espera que los usuarios de su sitio naveguen por la página potencial?
Prerender puede ayudar a cargar esos activos en segundo plano, y cuando el usuario hace clic en él, lo obtiene muy rápidamente. Puede lograr esto con el complemento Pre Party Resource Hints.
La representación previa es adecuada para una página o un activo de poco peso, pero tenga cuidado con todo el sitio o con grandes recursos, ya que puede aumentar la utilización de la CPU y el ancho de banda y ralentizar el sitio. Por lo tanto, pruebe con el recurso más pequeño y pruébelo para asegurarse de que no tenga efectos secundarios.
Como puede ver, hay cuatro complementos principales involucrados para implementar sugerencias de navegador en WordPress. Elige el que más te guste y se ajuste al requisito.
Complemento de sugerencias de recursos previos a la fiesta – un complemento gratuito ofrece precarga de DNS, precarga de enlace, preprocesamiento, preconexión y precarga.
Mejores sugerencias de recursos – una alternativa a la anterior.
El complemento gratuito es bueno siempre que se mantenga y admita. Desafortunadamente, esto no sucede con muchos complementos, y es por eso que a veces es mejor optar por la versión paga. Los complementos de la versión comercial son compatibles profesionalmente y están actualizados con el estándar de WordPress y las correcciones de seguridad. Si está dispuesto a gastar unos cuantos dólares en optimizar el rendimiento de su sitio, puede consultar los siguientes.
WP Rocket: de buena reputación, en el que confían más de 800 000 sitios. Cuesta $ 49 por un sitio web.
Materias de rendimiento – un peso ligero con un costo fácil de seguir $ 24.95 para un sitio. Mientras escribo, ofrece las siguientes características.
Eso es mucha optimización.
Conclusión
El núcleo de WordPress es liviano, pero se vuelve voluminoso según el tema y los complementos que use. Y es esencial optimizar el rendimiento de su sitio para una mejor clasificación de búsqueda y conversión. Las técnicas anteriores son fáciles de seguir, pero no debe detenerse allí.
También debe considerar usar una CDN para almacenar en caché y entregar contenido más rápido a sus usuarios, a nivel mundial. Hay muchos, pero recomendaría probar SUCURI que ofrece CDN y seguridad, ambos.