Enfoques del uso de CDN para optimizar el rendimiento en los sitios de WordPress

La optimización del rendimiento no es fácil. Hay muchas posibilidades y cada una debe ser probada antes de decidir cuál es el mejor. Por ejemplo, mientras trabajaba en uno de los dos sitios que discuto en este artículo, intenté almacenar en caché como objetos. Por lo general, esta es una buena opción, pero ha ralentizado algunas de mis páginas, causó problemas en otros y la memoria agotada. En este artículo, quiero discutir sobre la optimización del rendimiento de WordPress, principalmente en términos de CDN, basado en mi experiencia reciente. Esta no es una guía definitiva para la optimización o una presentación de la configuración de algunos complementos.
No todas las solución funcionan en ningún lugar, pero es importante examinar todo lo que pueda. Comencemos con los beneficios de usar un CDN. ¿Por qué un CDN? Es bien sabido que los CDN son importantes porque aumentan el rendimiento de su sitio al servir activos en un servidor cerca del usuario final. Pero hay otros dos beneficios potenciales que puede obtener de un CDN. La primera es que los navegadores solo harán una cantidad establecida (6-11 dependiendo del navegador) solicita HTTP/s simultáneamente al mismo navegador. Esto causó un problema interesante en el sitio web de Caldera Forms. Puse el tema del niño CSS con una prioridad muy alta en la cola, porque estaba compuesto por sobrescribir del tema de los padres.
Debido a que tenía algunos otros archivos de JavaScript y CSS que se cargaron desde el sitio, el niño teme.css duró un poco más para cargar. Como resultado, en algunas páginas, la apariencia comenzó mal y luego se ajustó. Explicaré en este artículo mi enfoque para usar un CDN para reducir la cantidad de solicitudes que provienen del mismo campo. El otro beneficio potencial es que mover activos del servidor principal reducirá la tarea. Este fue un gran beneficio para un proyecto de optimización de proyectos en el que he trabajado recientemente. Normalmente, esta no es una gran victoria, pero estábamos buscando ganancias baratas antes de comenzar con los otros problemas que causan 6-8 segundos en ese sitio. Mover las imágenes a un CDN ha reducido la carga del servidor y ha durado entre 1 y 1.5 segundos del tiempo de carga de la página con muy poco trabajo. Comienza gratis los CDN son excelentes, pero no son baratos. Pagará por el ancho de banda y el almacenamiento. CDN gratuitos aceptan cualquiera de los archivos JavaScript y algunos de los archivos CSS que necesita para un sitio de WordPress. El uso de un CDN gratuito para una biblioteca común puede ahorrarle dinero y aumentar las posibilidades de que el navegador ya tenga los archivos necesarios en el caché. En el rediseño del sitio de Caldera Forms, utilizamos Bootstrap en nuestro tema. Usé JSDeliv para servir CSS y JavaScript Bootstrap. Para esos archivos, acabo de usar WP_ENQUEE_CRIUT/Style con URL CDN.
Para las bibliotecas cargadas de la base, utilicé una combinación de CDN. Mi principal preocupación era asegurarme de no cargar la versión incorrecta de la biblioteca. Esto es lo que puse en mi director de mu-plugins para reemplazar la jQuery básica con una versión cdn: add_action (‘init’, function () {if (! Is_admin ()) {
if (is_ssl ()) {
$ protocol = ‘https’;
} de lo contrario {
$ protocol = ‘http’;
}
/** @var wp_scripts $ wp_scripts*/
Global $ wp_scripts;
/** @Var _WP_Dependence $ Core*/
$ core = $ wp_scripts-> registrado [‘jQuery-core’];
$ core_version = $ core-> ver;
$ core-> src = “$ protocol: //ajax.googleapis.com/ajax/lbs/jquery/$core_version/jquery.min.js”;
If (wp_debug) {
/** @var _WP_Dependence $ Migration*/
$ migrate = $ wp_scripts-> registrado [‘jQuery-gigute’];
$ migrate_version = $ migrate-> ver;
$ migrate-> src = “$ protocol: //cdn.jsdeliv.net/jquery.migrate/$migete_version/jquery-gigte.min.js”;
}de lo contrario{
/** @var _WP_Dependence $ jQuery*/
$ jQuery = $ wp_scripts-> registrado [‘jQuery’];
$ JQuery-> deps = [‘jQuery-core’];
}
}
}, 11); Esto me da jQuery del Google CDN, pero en lugar de cancelar solo el registro básico de JavaScript, tengo que hacer dos cosas importantes. En primer lugar, no lo cancelo, pero solo cambio su URL. En segundo lugar, me aseguro de usar el número de versión para la jQuery cargada básica. Este futuro demuestra mi guión.
Una cosa arriesgada que hice fue eliminar a Jquey Migrated. Esta biblioteca nuevamente agrega la funcionalidad eliminada de JQuey. Tenga cuidado de eliminar esto. Algunos complementos o temas pueden romperse. La propagación de CSS y JavaScript en varios CDN en el sitio web de Caldera Forms, comencé a usar KeyCDN para cargar JavaScript y CSS utilizando su complemento de activación de CDN. Este es un buen complemento, pero solo acepta un área. Como dije antes, uno de mis objetivos era asegurarse de que la carga de CSS de mi hijo no se retrase. Así que quería asegurarme de que provenga de un dominio con menos de 6 recursos. Esto significa que se necesitaban varias áreas en KeyCDN, lo que me hizo no usar su complemento. Debido a que mi tema y el tema del niño cargan la mayoría de los recursos de CDN públicos o del CloudFront CDN que L- que creamos para CS y imágenes compartidas utilizadas En diferentes sitios de caldera, el director de tema tiene solo 5 archivos entre CSS y JavaScript y no todos. se usan en cada carga de página. Así que configuramos dos áreas en KeyCDN. Desde el tablero de KeyCDN, configuramos dos áreas. Para uno usé https://calderaforms.com/content/pligins como origen, y para el otro, utilicé https://calderaforms.com/content/themes como origen.
KeyCDN extraerá automáticamente todos sus archivos también tiene un precio razonable y muy fácil de configurar. En comparación con ejecutar su propio CDN con AWS S3 y CloudFront, es realmente súper soñador.
La única desventaja es que los valores predeterminados no son sensibles. Por defecto, deshabilita el soporte HTTPS y la redirección automática a HTTPS. Esto parece ser una advertencia de contenido mixto que requiere que suceda. Una vez que he implementado los dos CDN, utilicé los filtros script_loader_src y style_loader_src para cambiar los archivos de URL en mis complementos y los directores de tareas para usar la URL CDN al cargar. Primero, veamos la llamada inversa que uso para ambos filtros: <? Php/**
* Cambiar URL de CSS/JS para CDN

*
* @param cadena $ url
*
* @return cadena
*/
Función caldera_moo_cdn_filter ($ url) {
$ Thema_dir = sinrainingsLass (wp_content_url). ‘/temas’;
if (0 === strpos ($ url, $ thema_dir)) {
return str_replace ($ thema_dir, ‘https://cfdotcomthems-6081.kxcdn.com’, $ url);
}
$ plugin_dir = sinrainingsLass (wp_content_url). “/Complementos”;
if (0 === strpos ($ url, $ plugin_dir)) {
return str_replace ($ plugin_dir, ‘https://cfdotcomplugins-6081.kxcdn.com’, $ url);
}
devuelve $ url;
} Lo importante aquí es que hago un cheque usando Strips () para identificar si la URL está en el director del tema o el complemento. Esto es importante porque uso dos URL diferentes. Además, hay muchas otras direcciones de URL que podrían verse afectadas por este filtro que no quiero cambiar. Los activos provenientes del núcleo u otros CDN no deben verse afectados.
Conecté la llamada a ambos filtros, dentro de un cierre para asegurarnos de que no estamos en el administrador. Además, debido a que uso variables ambientales para la configuración de mi sitio, podría omitir fácilmente CDN cuando no estoy en un entorno de producción. <? Php/** CDN*/
if (! is_admin () && isset ($ _env ['wordpress_env')) && in_array ($ _env ['wordpress_env'], ['producción')) {
// javascript
add_filter ('script_loader_src', 'caldera_moo_cdn_filter');
// CSS
add_filter ('style_loader_src', 'caldera_moo_cdn_filter');
} La solución AWS anterior dije soluciones para un sitio que construí para ser efectivo y mis únicos problemas reales eran optimizar la carga de los activos. Pero, como mencioné en la introducción, recientemente tomé un sitio web de WooCommerce con problemas de rendimiento importantes. Era una mezcla de problemas que provienen de una base de datos masiva, problemas de WP Cron, un tema mal codificado y problemas que podrían resolverse con CDN. Discutiré los otros temas que puede conocer en un artículo futuro.
Pero en ese sitio, moví todas las imágenes, el almacenamiento de CSS y JavaScript al AWS S3 y las serví a través de Cloudfront.Esto me dio ganancias de rendimiento inmediatas en términos de lo que espera hacer un CDN y reducir la carga del servidor.AWS es una solución verdaderamente poderosa y rentable con la que estoy muy impresionado.Ahora lo uso para alojar muchos de mis sitios de WordPress.Dicho esto, la interfaz de usuario y la facilidad de uso no son la fuerza de AWS.Afortunadamente, las buenas personas de los deliciosos cerebros, por la fama de WP migran DB Pro, hacen un excelente complemento de descarga WP S3.Este complemento está muy bien documentado.No te guiaré a través de su configuración, alguien más puede escribir ese tutorial.
El complemento básico administró las imágenes móviles de la biblioteca de medios en S3, y el suplemento de activos administró el servicio CSS y JavaScript a través de CloudFront. Diré que si bien la interfaz de usuario del complemento está excepcionalmente bien hecha, debe hacer mucha configuración en el AWS y eso podría volverlo loco. Este complemento definitivamente merece los $ 200, porque automatiza el proceso de mantener los archivos sincronizados, bloqueando el caché para las actualizaciones y la mayor parte de la configuración que desea hacer una vez que las cosas estén configuradas. No hay balas mágicas, es importante tener en cuenta que los CDN no son balas mágicas. A veces su servidor no puede manejar el tráfico. Otras veces sus complementos o temas son malos. En el caso del sitio del cliente, la mayor ganancia que obtuve fue renunciar a su tema y crear un tema personalizado. Este no fue un proceso barato, pero el sitio se ve mejor y se carga más rápido. Una cosa que aprendí sobre el valor de los temas personalizados es el valor de eliminar las opciones y la modularidad. A menudo, los temas comerciales tienen una mala reputación y están etiquetados como hinchados y lentos. La mayoría de las veces, porque tiene que ofrecer tantas soluciones. Cada configuración posible debe guardar en algún lugar y luego el código que implementa esas opciones necesita mucho condicional. Solo hay mucho lo que puede hacer para optimizar este tipo de temas.