wordpress-performance-partone-teaser

La verdad sobre el rendimiento de WordPress [#1/2]

Dado que el rendimiento de carga de un sitio web se ha convertido en un factor de clasificación de Google, debe dar la máxima prioridad a la optimización del rendimiento. No solo Google se regocijará con un sitio web rápido de WordPress, serán sus lectores, sobre todo, quienes apreciarán sus esfuerzos y, al final, todo se reduce a ellos. Los estudios muestran que el 25% de los usuarios abandonan un sitio web con un rendimiento de carga de 4 segundos. Pero hay diferentes opiniones sobre cómo acelerar un sitio web. Entonces, pensamos que es hora de contarte la verdad sobre el rendimiento de WordPress.

Una introducción: lo que cubre este artículo

En este artículo, hablaremos sobre la optimización en la página que incluye todo menos el servidor web. Configurar un servidor web es una historia completamente diferente e iría más allá de las limitaciones de este artículo. Supongo que un sitio web de WordPress con un paquete de alojamiento web común. Correctamente configurado, un sitio web basado en un paquete de alojamiento muestra excelentes resultados. En esta primera parte de la serie de dos partes, le mostraré los ajustes cruciales del rendimiento de carga. Luego, en la segunda parte pondremos en práctica lo aprendido aquí. Elegiré un tema que haga referencia a varios archivos CSS y JavaScript. Si puede crear rápidamente un tema de este tipo, puede hacerlo con cualquier otro tema.

Nota: este artículo solo cubre la optimización de la versión de escritorio de un sitio web ya que optimizar la vista móvil es considerablemente más difícil.

Infografía: cómo el tiempo de carga afecta su resultado final

tiempo de carga-lrg1

Dos ejemplos de sitios web rápidos y magníficamente optimizados

1. El viajero: Smashingmagazine.com

Revista aplastante1

The Smashing Magazine cuenta con un equipo que se encarga de la rendimiento del sitio web, y este equipo ha hecho todos los ajustes posibles ya que tienen 100 puntos móviles y de escritorio. 100 puntos: esa es la perfección absoluta. ¡Felicidades chicos, habéis hecho un gran trabajo! El código fuente es un medio fantástico para aprender a hacerlo bien. Enlace al sitio web: SmashingMagazine.com

2. Un sitio web “normal” – TechBrain

hechtmediaartsMi sitio web TechBrain hasta ahora solo está optimizado para la versión de escritorio. 93 de 100 Los puntos posibles son, sin embargo, fantásticos. Por supuesto, todavía hay margen de mejora. Todavía no me he preocupado por la versión móvil, así que puedes ignorar los puntos móviles.

Alto rendimiento de carga: optimización de la velocidad de la página de Google

Google Page Speed ​​es el punto de referencia, y la mayoría de las optimizaciones recomendadas, sin embargo, no todas, son fáciles de entender. Los revisaremos punto por punto y los aplicaremos en el próximo artículo de esta miniserie para hacer que su sitio web sea un verdadero corredor y que sus visitantes y Google estén igualmente felices. Por cierto, el puntaje de velocidad de la página de Google varía de 1 (pésima y lenta) a 100 (premio mayor) puntos.

1. Reducir o acortar las solicitudes HTTP

Cada llamada a un archivo vinculado al documento HTML (CSS, imágenes y JavaScript) provoca una solicitud HTTP, o en otras palabras: cuantos más enlaces de archivos CSS y JavaScript tenga en una página, más lento se cargará el sitio web. Por lo tanto, su principal prioridad debe ser reducir los archivos.

2. Use solo un archivo JavaScript y un archivo CSS

No debe tener más de un CSS y un archivo JavaScript para cargar, ya que cada archivo adicional provocaría otra solicitud HTTP y, por lo tanto, una carga más prolongada.

Nota: Coloque su archivo CSS en el encabezado y el archivo JavaScript en el pie de página.

Pero: JavaScript en línea, que a menudo se usa para cosas externas sofisticadas como un cuadro Me gusta de Facebook o botones para compartir, debe colocarse en el pie de página o incorporarse con el «asíncrono» elemento. De esta manera, no impedirá que el sitio web se muestre rápidamente, pero se puede cargar si el navegador lo considera apropiado. Los archivos JavaScript externos y vinculados de gran tamaño pueden permanecer en el encabezado si les asigna un «aplazar» atributo. Esto hará que el navegador cargue el JavaScript solo cuando se haya cargado el documento. Básicamente, el JavaScript se pondrá en espera y es lo último que se cargará.

3. Optimice sus imágenes y gráficos

Si su tema usa muchos gráficos, resúmelos en CSS Sprites para llamar a un solo archivo gráfico. Las imágenes siempre deben estar optimizadas para la web, lo que significa cortarlas a las resoluciones necesarias y reducir el tamaño del archivo. Hay algunos buenos complementos para eso. Pero también puedes usar Photoshop o Cañutillo. Sería ideal si las imágenes y todos los demás recursos estáticos fueran entregados por una red de entrega de contenido (CDN). Hay algunos buenos proveedores como MAXCDN o claveCDN. Un complemento gratuito es el complemento Jetpack donde la configuración se llama «Protón”. Si activa esta configuración, todas las imágenes de los artículos serán entregadas por los servidores de WordPress bastante rápidos. Esto trae una notable mejora en el rendimiento. Pero al igual que en la vida real, tratar con imágenes en un sitio web significa: Menos es más. Menos imágenes significan una mejor velocidad de carga.

4. Configuración de .htaccess: Usar compresión (Gzip o Deflate)

La compresión puede reducir extremadamente el tamaño del archivo de sus páginas. Puede ahorrarle hasta un 70 % del tamaño del archivo original y aumentar la velocidad de entrega de su sitio web. Sin embargo, solo vale la pena el esfuerzo si su sitio web tiene una cierta cantidad de contenido, ya que el navegador tiene que descomprimir primero el sitio web comprimido antes de entregarlo, lo que también lleva algo de tiempo. Notarás la compresión en blogs o sitios web con más de un párrafo de contenido.

5. Configuración de .htaccess: activar el almacenamiento en caché del navegador

Activar el almacenamiento en caché del navegador no solo es importante para Google Page Speed ​​Online, sino también porque varios componentes del sitio web (imágenes, CSS y JavaScript) se cargarán solo una vez en la primera llamada. Como los componentes se almacenan en la memoria caché, el sitio web se cargará más rápido cuando se vuelva a llamar.

6. Optimice la entrega de CSS: arriba del pliegue

Recibirá un mensaje en la mitad superior de la página (ver sin desplazarse) cuando Google Page Speed ​​Online detecte que uno o más archivos bloquean la visualización del sitio web y, como resultado, retrasar la visualización del contenido. Los archivos CSS bloquean los navegadores antes de que se pueda mostrar el contenido. Recibirá este tipo de mensajes si el encabezado de su tema tiene archivos CSS, ya que el navegador primero tiene que detener la visualización del sitio web para cargar la hoja de estilo.

7. Reduzca el tamaño del contenido de la mitad superior de la página: entrega de CSS, parte 2

Ahora, hablaremos sobre la optimización del contenido de la mitad superior de la página de su sitio web. Esto se puede lograr pegando el CSS necesario para representar el contenido de la mitad superior de la página en línea, en lugar de usar un archivo vinculado externo. En otras palabras: pegue el fragmento del CSS responsable de la representación del contenido de la mitad superior de la página en línea en el encabezado del sitio web. Coloque el resto del archivo CSS en el pie de página en lugar del encabezado como lo haría normalmente. Tenga en cuenta: no coloque demasiado CSS en línea en el documento HTML, ya que esto nuevamente puede ralentizar su sitio web. Solo debe usar el CSS esencial para representar el contenido de la mitad superior de la página. Luego, verifique la velocidad de carga de ambos métodos (CSS vinculado e integrado). No tiene sentido si Google Page Speed ​​dejara de molestar a costa del rendimiento de su sitio web.

8. Use un complemento de almacenamiento en caché

Un buen complemento de almacenamiento en caché genera páginas HTML estáticas a partir de páginas dinámicas (PHP) de su sitio web. Estos se pueden cargar más rápido porque el intérprete de PHP no tiene que generar la página relevante con cada llamada. Hay muchos complementos para este trabajo. Algunos de ellos son buenos, algunos muy buenos y al menos uno sobresaliente, con algunos trucos. Complementos de almacenamiento en caché recomendados:

9. No use redireccionamientos 301

Las redirecciones 301 ralentizan el navegador, ya que tiene que usar una nueva URL. Por lo tanto, será mejor que evite tales redireccionamientos.

10. Elija un buen proveedor de alojamiento web

Los proveedores de alojamiento web son una moneda de diez centavos y algunos de ellos han optimizado sus paquetes de alojamiento web para una entrega de sitio web dividida en un abrir y cerrar de ojos. Es importante saberlo: un paquete de alojamiento web es un alojamiento compartido, lo que significa que debe compartir el servidor con docenas, si no cientos, de otros sitios web. Esto generalmente resulta en un rendimiento de carga más lento. Confío en el proveedor alemán Alfahosting. Sus paquetes de alojamiento web están optimizados para la velocidad, son baratos y ofrecen muchas opciones de configuración. Por supuesto, hay muchos otros buenos proveedores por ahí.

Más razones para un buen rendimiento del sitio web

Grandes sitios web como Google, Amazon y Yahoo han examinado la influencia del rendimiento de carga en el comportamiento del usuario. Aquí está el resultado:

prueba-de-velocidad-del-sitio-web-google-amazon-yahoo

Conclusión

Si desea mejorar el rendimiento del sitio web, tendrá que pasar por algunos puntos importantes. Sin embargo, vale la pena invertir un día en su sitio web y hacer que no solo sus visitantes sino también Google se regocijen. Serás recompensado por todo el trabajo duro, si lo haces bien, con lectores leales y una mejor clasificación en Google.

enlaces relacionados

(dpe)

#verdad #sobre #rendimiento #WordPress

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.