Lista de verificación de optimización de WordPress

La optimización de WordPress es el arte de hacer que su sitio web funcione lo más rápido posible, mejorando su experiencia de usuario, reduciendo los costos del servidor y tiene beneficios de SEO.

Muchos estudios muestran que los visitantes no desean esperar a que se cargue un sitio web y se inclinan a abandonar su sitio web si tarda demasiado en cargarse.

Un sitio web de carga rápida es especialmente importante para usted si tiene una tienda web y desea mejorar sus tasas de conversión.

Las pruebas en Amazon revelaron resultados similares: cada aumento de 100 ms en el tiempo de carga de Amazon.com redujo las ventas en un 1% (Kohavi y Longbotham 2007)

Fuente: https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

La velocidad de carga de su sitio web también es muy importante para su clasificación en Google, lo que hace que la optimización del sitio web sea parte de su estrategia de SEO.

¡Pero mi sitio web carga muy rápido!

Seguro que sí. Al menos para ti. Pero, ¿ha intentado visitar su sitio web por primera vez en mucho tiempo?

Cuando navega por su sitio web, la mayor parte se almacenará en caché en su navegador. Si desea obtener la experiencia por primera vez, borre su caché o use un navegador completamente diferente.

Hay muchas cosas que hacer que pueden mejorar la velocidad de su sitio web de WordPress, comencemos.

Minimizar guiones

Los sitios web de WordPress son una combinación de HTML, CSS, JavaScript e imágenes. El código HTML se carga primero y luego tiene información sobre otros archivos de hojas de estilo CSS, archivos JavaScript y las imágenes.

Cada archivo se carga a su vez. Un navegador normalmente tiene un límite de 2 a 4 "tuberías", lo que significa que el navegador solo cargará hasta 2 a 4 archivos al mismo tiempo desde el servidor en el que están alojados los archivos.

Si revisa el código HTML de su sitio web de WordPress, notará muchos archivos .css y .js diferentes. Cada uno de estos generalmente proviene de diferentes complementos, cada uno agrega archivos .js o .css a la mezcla.

En algunos casos, el complemento incluso inyectará JavaScript o estilos CSS directamente en el HTML. La mayoría de los desarrolladores de complementos de WordPress o autores de temas son lo suficientemente inteligentes como para no hacer esto.

Esta es solo una muestra de un sitio web normal de WordPress. El código HTML tiene enlaces a varios otros archivos. En este ejemplo simple, se cargan 4 archivos JavaScript, uno por uno.

<script type=”text/javascript” src=”https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2″></script >

WordPress tiene funciones internas que permiten a los autores de complementos y temas incrustar los archivos JavaScript y CSS necesarios.

wp_enqueue_script() y wp_enqueue_style(). Los nombres de las funciones dan una pista sólida de lo que hacen. Al usar cualquiera de estos para incrustar los archivos necesarios, los autores de complementos y temas ponen en cola sus archivos junto con todos los demás complementos e incluso el propio WordPress.

También es posible instruir las funciones de cualquier dependencia de otras bibliotecas, por lo general, un archivo de inclusión de JavaScript depende de jQuery para cargarse primero.

Por lo general, encuentro e instalo un complemento minificador, lo activo y luego veo si algo se rompe en el sitio. A partir de ahí, identifico exactamente qué está fallando y si solo necesito cambiar un par de configuraciones para solucionarlo.

Los complementos minimizadores tienden a tener configuraciones de exclusión para archivos específicos que no se reproducen bien cuando se cargan con otros o para cambiar dónde se cargan los archivos, en el encabezado o pie de página del documento.

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

Nota: En el ejemplo de código, almaceno la URL del tema en una variable y luego la analizo en la función wp_enqueue_script. Esto reduce la cantidad de PHP y/o llamadas a la base de datos necesarias, lo que aumenta la velocidad.

En la búsqueda de velocidades de carga extremas, podría optar por codificar la ruta de URL absoluta, pero esto limitaría el tema a un solo dominio y dificultaría la reutilización del código en otro sitio.

Después de instalar un complemento minificador, las hojas de estilo JavaScript y CSS ahora se unen en menos llamadas HTTP.

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

Esto combina los 4 archivos en un solo "archivo"/solicitud para su navegador.

Me encontré con sitios web basados ​​en WordPress que tenían 22 archivos .css cargados y 15 .js. Todo en primera plana. El cambio en la velocidad puede ser sorprendente si puede reducir la cantidad de archivos externos.

Aunque los scripts minificadores tienden a tener grandes mejoras de velocidad, también es una de las técnicas que utilizo y que tiende a traer más problemas en la configuración.

Optimizar header.php

El header.php en su tema se llama en todas y cada una de las páginas de su sitio web de WordPress. Este archivo suele tener muchos elementos que se pueden optimizar.

Un ejemplo clásico es bloginfo('template_directory') que generalmente se llama varias veces en el encabezado para devolver la URL del tema para incluir archivos externos.

Un método más eficiente es realizar una sola solicitud de la URL y luego almacenarla como una variable.

$template_directory = get_bloginfo('template_directory'); 

La URL del directorio de temas ahora se almacena en la variable $template_directory.

Se pueden leer más ejemplos de cómo mejorar la eficiencia de header.php en la publicación del blog Sugerencias de optimización de header.php de WordPress

Reducir el número de complementos

Otra parte importante en la optimización de WordPress es mantener el número de complementos activados lo más bajo posible. Es tentador para muchos usuarios probar y experimentar con diferentes complementos, que de hecho es uno de los beneficios de WordPress.

Sin embargo, tener muchos complementos activos puede reducir la velocidad de su sitio web de WordPress. Muchos complementos tienen una sola función que podría manejarse con la misma facilidad con un fragmento de código incluido en su functions.php.

En muchos casos, es posible que solo necesite una sola función, pero el complemento que usa tiene varias otras opciones que nunca usa.

Analice cada complemento en su sitio y asegúrese de que los necesita. Si no los necesita o la funcionalidad puede ser reemplazada por el código functions.php, desactive y elimine los complementos.

No uses imágenes, usa CSS3

El diseño de sitios web utiliza imágenes para ayudar a hacer la interfaz de usuario.

Después de la introducción de CSS y, en particular, de CSS3, muchos efectos que se utilizan para las interfaces web se pueden imitar mediante el uso de código CSS y HTML.

[recuadro] Nota: la mayoría de estos efectos no son compatibles con todos los navegadores, en particular con el antiguo Internet Explorer (sí, siempre el niño problemático para cualquier desarrollador web). Si desea optimizar la velocidad de su sitio web, el uso de efectos CSS puede ser una solución rápida y rápida, pero no es una buena opción si la audiencia principal del cliente utiliza navegadores obsoletos.[/box]

Si está trabajando para un cliente que se dirige a B2C (de empresa a consumidor), debe consultar su Google Analytics o preguntarle qué tipo de clientes tiene (o desea orientar). Esto puede influir si puede usar efectos CSS3 si la audiencia de los clientes generalmente usa navegadores obsoletos.

Cuando Elegantthemes.com lanzó una nueva versión de su complemento de shortcode, tuvo un gran impacto en el tiempo de carga para mis clientes debido a los efectos CSS3 y al poner varias imágenes en un solo sprite.

La carpeta shortcodes/images, que solía contener 90 imágenes, ahora tiene un solo sprite PNG, ¡reduciendo el tamaño total de 140kb a 15kb!
(Eso es aproximadamente una reducción del 90% en el tamaño).

Imágenes a sprites

La optimización de Sprite de un tema existente puede llevar un poco de tiempo, pero también puede traer una gran mejora en la velocidad de su sitio web.

Un sprite es una sola imagen, generalmente en formato .PNG que tiene varios elementos de su diseño/diseño visual. En lugar de cargar cada elemento gráfico individualmente, todas las imágenes se unen en uno o en el menor número posible de sprites.

Esta técnica solo debe usarse para las imágenes utilizadas para diseñar el diseño, y no para imágenes destacadas de publicaciones individuales, miniaturas, etc. Las únicas imágenes que debe intentar poner en un sprite son las imágenes que se usan en su sitio web en cada página.

En lugar de cargar cada imagen individual (una solicitud http diferente), todas las imágenes se agrupan en un archivo, y el CSS que muestra cada imagen se modifica para simplemente empujar el fondo hacia donde se encuentra la parte necesaria en el sprite.

SpriteMe.org es un excelente recurso para crear sprites. El mejor método es planificar con anticipación y construir primero tus sprites, pero si necesitas arreglar un sitio web existente, el sitio spriteme.org tiene un bookmarklet que hace que el proceso sea muy fácil.

Ejemplo de estilos CSS en combinación con un sprite:

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

Cada estilo css hace referencia al mismo archivo, pero la posición del fondo es diferente y muestra las diferentes partes de la imagen.

Distribuir: usar un CDN

Hay dos beneficios principales al usar una CDN (red de distribución de contenido) para alojar sus archivos de temas y elementos de WordPress.

Sus archivos se cargan más rápido ya que están en un dominio diferente. El límite del navegador de 2 a 4 descargas simultáneas de archivos es para cada dominio .

Entonces, si sus archivos están alojados en un dominio diferente, un navegador cargará estos archivos por sí mismo, de hecho, hará que su sitio web se cargue más rápido y reducirá el estrés de carga en su dominio y su host.

Otro beneficio es que si está utilizando un CDN importante, tendrán servidores distribuidos en todo el mundo que luego detectan de dónde es su visitante y luego les entregan sus archivos desde el servidor más cercano en su red.

El servidor adecuado para su sitio web

El servidor que aloja el sitio web debe estar ubicado cerca de la audiencia objetivo. Entonces, si un sitio web está dirigido al mercado alemán, es mejor encontrar un servidor con una empresa de alojamiento en Alemania, o al menos en Europa Central.

Esto tiene un gran impacto para sus visitantes que cargan desde un servidor mucho más cercano a donde están ubicados, lo que hace que la navegación por su sitio web sea mucho más rápida.

Esto también tiene una influencia en el SEO, no solo porque el sitio se carga más rápido, sino también porque aumenta la importancia del sitio web para la audiencia alemana y, por lo tanto, también debería tener una clasificación más alta.

El efecto real en términos de SEO es discutible, pero si está tratando de mejorar el rendimiento de su sitio web, vale la pena considerarlo.

Esto es bien conocido por el SEO, pero una vez que se ha configurado un sitio, es raro que se mueva a otro servidor por razones puramente de SEO. Sin embargo, vale la pena tenerlo en cuenta para su próximo proyecto.

Corregir errores 404

Debería revisar su sitio web regularmente para asegurarse de que no tiene 404, páginas no encontradas de todos modos. Reducir los enlaces malos en su sitio web puede reducir la carga del servidor y brindará una mejor experiencia de usuario. No solo pueden perderse enlaces y páginas, sino que a veces un error tipográfico u otro tipo de error puede generar contenido que no se encuentra en su sitio web.

Sugerencia: Echa un vistazo a este fragmento de código para redirigir 301 automáticamente las páginas no encontradas.

[caja]
Esta página está lejos de estar terminada y no cubre todos los detalles de la optimización de WordPress, todavía. El objetivo es crear un recurso de consejos y trucos para aprovechar al máximo su sitio de WordPress.

Algunos o la mayoría de los trucos serán difíciles de implementar a menos que sea un desarrollador, pero cada uno de ellos hará que su sitio de WordPress funcione más rápido.
[/caja]

la lista de verificación

Esta es la lista de verificación, tenga en cuenta que cada sitio web y proyecto es diferente. No todos los pasos se pueden utilizar en todos los sitios web.