Mejore el tiempo de carga de la página para su sitio web de WordPress con la descarga de WP S3: A

Una de las mejores cosas de trabajar en los deliciosos cerebros es trabajar en productos que uso y amo fuera del trabajo. Era un cliente que WP migró DB Pro mucho antes de unirme al equipo y todavía lo uso diariamente en sitios personales y proyectos secundarios. Sin embargo, no necesitaba usar nuestro otro complemento, WP Offload Media (anteriormente WPLOAD S3) para descargar los archivos multimedia del sitio en Amazon S3 y DigitalOcean. En junio, pasé un tiempo trabajando en el sitio web de enseñanza de mi esposa, migrando a un nuevo servidor, cambiando el dominio e implementando un cambio de marca. Su objetivo este año es aumentar el sitio y aumentar el número de miembros que pagan. Como parte del crecimiento de la conversión, quiero mejorar la velocidad y el rendimiento del sitio y con tantos PDF e imágenes, la descarga de WP S3 y el complemento de los activos son los complementos perfectos para usar para este tipo de optimización.
¿Por qué la descarga de WP S3? Entonces, ¿por qué usarías complementos? La descarga del contenido de los medios en Amazon S3 para ser atendido por CloudFront tiene una serie de beneficios que se reducen a niños de seguridad, ahorrando dinero y mejorando los tiempos de carga de la página. Si copia los medios al S3 y lo deja en su servidor, entonces cree una copia de seguridad de su contenido/cargas WP, lo que lo convierte en parte de su plan de repuesto. También puede usar una opción para eliminar los archivos del servidor después de que se hayan descargado en S3 para ahorrar espacio en lo que puede ser más costoso de alojar que el costo de almacenar S3.
Servir los medios y los activos del sitio (con el suplemento de extracción de activos) en CloudFront y no a su servidor reducirá las solicitudes al servidor, reduciendo la actividad de CPU e IO. Debido a que CloudFront CDN entregará activos desde la ubicación del usuario más cercana y no desde la ubicación de su servidor, las solicitudes deben ser más rápidas, lo que hace que la página se cargue más rápido, una mejor experiencia del usuario y mejore un valor en el que Google lo considera. . No veremos grandes descuentos de tiempo de carga o aumentos de velocidad masiva; Sin embargo, después de haber logrado todas las otras mejoras de rendimiento en esta guía, este enfoque es una forma relativamente simple de obtener mejoras de velocidad valiosas cuando cada milisegundo importa. Instalación Debido a que el sitio se gestiona con el compositor, la instalación de la descarga de WP S3 y el suplemento de extracción de activos es extremadamente fácil, porque hemos introducido soporte de compositor dedicado para nuestros complementos premium. Una vez que se activa la descarga de WP S3, puede configurar la configuración mediante conjuntos> Descargar S3. Configuré a mi usuario de IAM con acceso restringido al compartimento utilizado para el sitio y definí mi clave de acceso y secreto en mi archivo wp-config.php. También definimos el cubo en el archivo de configuración para mantener estos detalles fuera de la base de datos.
El sitio Print Play Learn utiliza descargas digitales fáciles para administrar descargas de PDF y, implícitamente, todas las descargas se almacenan en el director WP-Context/Supars/EDD, para que pueda restringir las reglas Htaccess o Nginx. WP Offload S3 tiene una integración con EDD para establecer archivos privados cuando se cobra en S3. Sin embargo, al descargar los medios existentes en S3, los archivos de descarga no se configuran como privados, por lo que utilicé un filtro de complemento para cambiar el nivel de acceso y configurar el director en S3 para mantener la ruta EDD/: function ppl_add_edd_dir_to_path ($ args) { if (false === strpos ($ args [‘fuenteFile’], ‘cargar/edd/’) || false!/’)) {return $ args; } $ args [‘key’] = str_replace (‘/uploads/’, ‘/uploads/edd/’, $ args [‘key]); devolver $ args; } Add_filter (‘as3cf_object_meta’, ‘ppl_add_dir_to_path’, 10, 2); función ppl_make_edd_objcts_private ($ acl, $ data, $ post_id) {if (‘private’ === $ acl) {return $ acl; } $ file_patch = get_attached_file ($ post_id, true); if (false === strpos ($ file_path, ‘uploads/edd/’)) {return $ acl; } $ Parts = Explode (‘.’, $ file_patch); if (‘pdf’! == $ piezas [1]) {return $ acl; } return ‘privado’; } add_filter (‘as3cf_upload_acl’, ‘ppl_make_edd_objcts_private’, 10, 3); El código anterior se ha agregado a un archivo WP-Content/MU-Plugins/Site.php que utilizo para mantener los cambios en el nivel de código.
Una vez que toda la biblioteca de medios existente se ha descargado en S3 y los archivos de copia a la configuración S3 se activan para cargas futuras, queremos pensar en los archivos de transmisión de S3. Establezcamos una distribución de CloudFront para que los archivos no se sirvan directamente de S3 y podamos usar los beneficios de un CDN. Estos son los mejores documentos para describir la configuración de una distribución de Cloudfront y cómo usar CloudFront con un dominio personalizado en HTTPS, porque quiero usar cdn.printplaylearn.com no es una URL fea de Cloudfront, como SDSKH43333K4LK.Cloudfront. Net .sussets. Tire de imágenes La última pieza del rompecabezas consiste en obtener todos los activos del sitio, como JS, CSS y archivos de imagen, que se ofrecerá por CloudFront. Podemos usar el complemento de los activos para lograr esto y es bastante simple de configurar. Una vez que el suplemento está instalado y activado, puede pasar por los pasos de configuración inútiles o configurar manualmente.
Quiero usar la misma distribución de CDN que se ejecuta en el mismo subdominio CDN que mi biblioteca de medios, esto tiene una ventaja de rendimiento sobre la ejecución de dos distribuciones. Tener dos entradas DNS (por ejemplo, CDN. Para medios y activos. Para activos) significa dos conexiones HTTPS, pero reducir a una sola conconección usa la conexión asincrónica de HTTP/2. También es mejor tener todos los activos dentro de un solo subdominio.
Eche un vistazo a este documento para configurar la misma distribución tanto para la biblioteca de medios como para los activos de su sitio. Consideraciones Ejecuto una copia de Desarrollo Local, un sitio de preparación y, por supuesto, una versión de producción del sitio, pero después del desarrollo y pruebas iniciales no quiero que mi sitio de desarrollo o sitio de escenario descargue las pruebas de imágenes en S3. También hablé sobre las estrategias de manejo de los medios en los entornos y opto por la estrategia “sin acceso” aquí, solo el sitio de producción con la clave de acceso AWS y el secreto configurado. Los nuevos medios no se descargarán en los otros entornos, pero el promedio existente será atendido por CloudFront. Mencioné anteriormente “eliminar los archivos del servidor”, lo que significa que los archivos locales se eliminan después de la descarga. En teoría, esto es genial, puedo eliminar miles de PDF e imágenes asociadas de mi VPS (por lo que no tiene que continuar aumentando el espacio del disco a medida que el sitio crece) y ponerlas todas en S3. Sin embargo, hay desventajas al hacerlo. Algunos complementos de manejo de imágenes necesitan acceso al archivo de imagen y, aunque el complemento trata de esto en el 99% del tiempo, existe la posibilidad de tener problemas. Para mí, los PDF son el mayor consumo de espacio en disco y nunca se editarán, por lo que puedo usar uno de los filtros de complementos para asegurarme de que todos los otros archivos queden en el servidor:
Function ppl_preserve_non_pdf_files_on_server ($ check, $ file) {$ piezas = explode (‘.’, $ Archivo); if (‘pdf’! == $ partes [1]) {return true; } devolver $ check; } Add_filter (‘as3cf_preserve_file_from_local_removal’, ‘ppl_preserve_non_pdf_files_on_server’, 10, 2); Lo último que encontré fueron errores de consola al transmitir los activos de CloudFront, especialmente relacionados con los archivos de fuentes web en mi tema, que son el tema del intercambio de recursos (CORS). Se resolvió con un fragmento simple agregado a mi configuración Ninx, como se explica aquí. Los resultados antes de implementar los complementos, probé el sitio utilizando algunas herramientas para evaluar los resultados y luego comparar más tarde. En primer lugar, utilicé Apache Bench para enviar 10,000 solicitudes a una página en el sitio, con una competencia de 100 solicitudes: $ AB -N 10000 -C 100 https://printplaylearn.com/resources/ Quería ver si el El uso del procesador en el sitio (predominantemente del proceso Ninx, porque el sitio tiene almacenamiento en caché de paginación completo) se ha reducido después de los cambios. Aquí están los picos de los informes del océano digital. Puede ver que la punta de la CPU fue ~ 5% más baja después de la implementación de complementos:

Para probar si la velocidad de carga de la página ha mejorado con los complementos que utilizamos SiteSpeed.io. Pero, debido a que el sitio está en una caída de Digitalocean en Londres y tengo una sede en el Reino Unido, no sería una prueba justa ejecutarlo desde mi automóvil, porque las solicitudes a los activos del sitio antes de que los complementos siempre sean rápidos . Desde un punto de vista. Así que rápidamente creamos un nuevo servidor basado en Nueva York para ejecutar las pruebas. Tuve que instalar Docker en el servidor y usar el método Docker para ejecutar la prueba: $ Docker Run –shm -size = 1g –ol -v “$ (PWD)”:/SiteSpeed.io SiteSpeedio/SiteSpeed.io: 7.3. 5 https://printplaylearn.com/resources/ Después de analizar ambos resultados, descubrí que el tiempo de carga de la página disminuyó en 0.78 segundos después de la implementación de los complementos, ganador! . Agregó algunas pequeñas pero eficientes ganancias de rendimiento, además de reducir mis costos de alojamiento. Y especialmente en comparación con algunas de las otras tareas que podría tomar para mejorar el rendimiento de su sitio, generalmente era fácil de configurar, y los filtros disponibles facilitaron la implementación de los ajustes que necesitaba. ¿Utiliza la descarga de WP S3 y el suplemento de los activos? ¿Cuáles son sus optimizaciones básicas para el rendimiento del sitio? Háganos saber en los comentarios a continuación.