Saltear al contenido principal
Transforma  Tu Sitio Wordpress En Un Sitio Ultra Rápido

Transforma tu sitio wordpress en un sitio ultra rápido

Todo el mundo sabe que si un sitio web es lento, los usuarios lo abandonarán. Muchos estudios demuestran la conexión entre el rendimiento del sitio web y las tasas de conversión. En este artículo, Denis Žoljom comparte su experiencia y los conceptos básicos de la creación de un WordPress desacoplado.

WordPress llegó lejos desde su inicio como una sencilla herramienta de escritura de blogs. Unos 15 años más tarde, se convirtió en la opción número uno de CMS para desarrolladores y no desarrolladores por igual. WordPress ahora alimenta aproximadamente el 30% de los 10 millones de sitios principales en la web.

Desde que se integró la API REST en el núcleo de WordPress, los desarrolladores pueden experimentar y usarla de manera desacoplada, es decir, escribiendo la parte frontal mediante el uso de marcos de JavaScript o bibliotecas. En Bemantis.com, estábamos (y seguimos usando) WordPress de una manera «clásica»: PHP para el frontend y el backend. Después de un tiempo, queríamos darle una oportunidad al enfoque desacoplado. En este artículo, compartiré una descripción general de lo que queríamos lograr y lo que encontramos al intentar implementar nuestros objetivos.

Hay varios tipos de proyectos que pueden beneficiarse de este enfoque. Por ejemplo, los sitios de presentación simple o los sitios que usan WordPress como backend son los principales candidatos para el enfoque desacoplado. En los últimos años, la industria afortunadamente comenzó a prestar más atención al rendimiento. Sin embargo, al ser un programa de software inclusivo y versátil de fácil uso, WordPress viene con una gran cantidad de opciones que no se utilizan necesariamente en todos y cada uno de los proyectos. Como resultado, el rendimiento del sitio web puede sufrir.

Si los largos tiempos de respuesta del sitio web lo mantienen despierto por la noche, este es un ejemplo para usted. Cubriré los conceptos básicos de la creación de un WordPress desacoplado y algunas lecciones aprendidas, que incluyen:

  1. El significado de una “WordPress desacoplada”
  2. Trabajar con la API de REST de WordPress predeterminada
  3. Mejora del rendimiento con el enfoque JSON desacoplado
  4. Preocupaciones de seguridad

 ¿Qué Es Exactamente Un WordPress Desacoplado?

Cuando se trata de cómo está programado WordPress, una cosa es cierta: no sigue el patrón de diseño del controlador de CD (MVC) de M odel- V iew- C con el que muchos desarrolladores están familiarizados. Debido a su historia y por ser una especie de bifurcación de una antigua plataforma de blogs llamada «b2» (más detalles aquí ), está escrita en gran parte de manera procesal (utilizando código basado en funciones). Los desarrolladores principales de WordPress utilizaron un sistema de ganchos que permitía a otros desarrolladores modificar o extender ciertas funcionalidades.

Es un sistema todo en uno que está equipado con una interfaz de administrador que funciona; administra la conexión de la base de datos y tiene un montón de API útiles expuestas que manejan la autenticación de usuarios, enrutamiento y más.

Pero gracias a la API REST, puede separar el backend de WordPress como una especie de modelo y controlador agrupados que manejan la manipulación de datos y la interacción de la base de datos, y usar el Controlador API REST para interactuar con una capa de vista independiente utilizando varios puntos finales de API. Además de la separación de MVC, podemos (por razones de seguridad o mejoras de velocidad) colocar la aplicación JS en un servidor separado, como en el siguiente esquema.

VENTAJAS DE UTILIZAR EL ENFOQUE DESACOPLADO

Una cosa por la que puede querer usar este enfoque es para asegurar una separación de preocupaciones. El frontend y el backend están interactuando a través de puntos finales; cada uno puede estar en su servidor separado, que puede optimizarse específicamente para cada tarea respectiva, es decir, ejecutar una aplicación PHP por separado y ejecutar una aplicación Node.js.

Al separar su frontend del backend, es más fácil rediseñarlo en el futuro, sin cambiar el CMS. Además, los desarrolladores front-end solo deben preocuparse por lo que deben hacer con los datos que les proporciona el backend. Esto les permite ser creativos y usar bibliotecas modernas como ReactJS, Vue o Angular para entregar aplicaciones web altamente dinámicas. Por ejemplo, es más fácil crear una aplicación web progresiva cuando se utilizan las bibliotecas mencionadas anteriormente.

Otra ventaja se refleja en la seguridad del sitio web. Explotar el sitio web a través del backend se vuelve más difícil, ya que está en gran parte oculto al público.

DEFICIENCIAS DEL USO DEL ENFOQUE DESACOPLADO

Primero, tener un WordPress desconectado significa mantener dos instancias separadas:

  1. WordPress para el backend;
  2. Una aplicación de front-end separada, que incluye actualizaciones de seguridad oportunas.

En segundo lugar, algunas de las bibliotecas front-end tienen una curva de aprendizaje más pronunciada. Tomará mucho tiempo aprender un nuevo idioma (si solo está acostumbrado a HTML y CSS para la creación de plantillas) o requerirá la incorporación de expertos en JavaScript adicionales para el proyecto.

Tercero, al separar la interfaz, está perdiendo el poder del editor WYSIWYG, y el botón «Vista previa en vivo» en WordPress tampoco funciona.

Hay muchas otras cosas que puede hacer con la API REST (puede encontrar más detalles en el manual de la API REST ).

EVITE LOS LARGOS TIEMPOS DE RESPUESTA AL UTILIZAR LA API DE REST PREDETERMINADA

Para cualquiera que haya intentado construir un sitio de WordPress desacoplado, esto no es algo nuevo: la API REST es lenta.

Mi equipo y yo nos encontramos por primera vez con la extraña API REST de WordPress en un sitio cliente (no desacoplado), donde usamos los puntos finales personalizados para obtener la lista de ubicaciones en un mapa de Google, junto con otra información meta creada con Advanced Custom Fields Proenchufar. Resultó que el primer byte (TTFB), que se utiliza como una indicación de la capacidad de respuesta de un servidor web u otro recurso de red, tomó más de 3 segundos.

Después de investigar un poco, nos dimos cuenta de que las llamadas a la API de REST predeterminadas eran realmente lentas, especialmente cuando «cargábamos» el sitio con complementos adicionales. Entonces, hicimos una pequeña prueba. Instalamos un par de complementos populares y encontramos algunos resultados interesantes. La aplicación del cartero dio el tiempo de carga de 1.97s para 41.9KB de tamaño de respuesta. El tiempo de carga de Chrome fue de 1.25 s (TTFB fue de 1.25 s, el contenido se descargó en 3.96 ms). Sólo para recuperar una simple lista de mensajes. Sin taxonomía, sin datos de usuario, sin campos de meta adicionales.

¿Por qué pasó esto?

Resulta que el acceso a la API REST en el WordPress predeterminado cargará todo el núcleo de WordPress para servir los puntos finales, aunque no se utilice. Además, cuantos más complementos agregues, peor se ponen las cosas. El controlador REST predeterminado WP_REST_Controlleres una clase realmente grande que hace mucho más de lo necesario al crear una página web simple. Maneja las rutas de registro, verificación de permisos, creación y eliminación de elementos, y así sucesivamente.

Hay dos soluciones comunes para este problema:

  1. Intercepte la carga de los complementos y evite cargarlos todos cuando necesite dar una respuesta REST simple;
  2. Cargue solo el mínimo de WordPress y almacene los datos en un transitorio , desde el cual luego obtendremos los datos usando una página personalizada.

Mejora Del Rendimiento Con El Enfoque JSON Desacoplado

Cuando trabaja con sitios de presentación simples, no necesita toda la funcionalidad que le ofrece la API REST. Por supuesto, aquí es donde una buena planificación es crucial. Realmente no desea crear su sitio sin la API REST, y luego decir dentro de un año que le gustaría conectarse a su sitio, o tal vez crear una aplicación móvil que necesite usar la funcionalidad de la API REST. ¿Vos si?

Por esa razón, utilizamos dos características de WordPress que pueden ayudarlo a entregar datos JSON simples:

  • API de transitorios para el almacenamiento en caché,
  • Cargando el mínimo necesario de WordPress usando SHORTINITconstante.

Conclusión

La API REST es excelente porque se puede usar para crear aplicaciones completas: crear, recuperar, actualizar y eliminar datos. La desventaja de usarlo es su velocidad.

Obviamente, crear una aplicación es diferente a crear un sitio web clásico. Probablemente no necesitarás todos los complementos que instalamos. Pero si solo necesita los datos para fines de presentación, el almacenamiento en caché de los datos y su servicio en un archivo personalizado parece ser la solución perfecta en este momento, cuando se trabaja con sitios desacoplados.

Puede estar pensando que crear un complemento personalizado para acelerar el tiempo de respuesta del sitio web es una exageración, pero vivimos en un mundo en el que cada segundo cuenta. Todo el mundo sabe que si un sitio web es lento, los usuarios lo abandonarán. Hay muchos estudios que demuestran la conexión entre el rendimiento del sitio web y las tasas de conversión . Pero si aún necesitas convencer, Google penaliza los sitios web lentos .

El método explicado en este artículo resuelve el problema de la velocidad que la API REST de WordPress encuentra y le dará un impulso adicional cuando trabaje en un proyecto de WordPress desacoplado. Ya que estamos en nuestra interminable búsqueda para exprimir ese último milisegundo de cada solicitud y respuesta, planeamos optimizar el complemento aún más.

Fuente original en (inglés) https://www.smashingmagazine.com/2018/10/headless-wordpress-decoupled/

Deja un comentario

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

Buscar