Guía de optimización del rendimiento de WoodMart: reducción de archivos JS/CSS y activación de la carga retardada

La optimización del rendimiento es crucial a la hora de crear sitios web de comercio electrónico en WordPress, especialmente para sitios como WoodMart Un tema con tantas funciones. Para garantizar una experiencia de compra fluida a nuestros visitantes, necesitábamos tomar algunas medidas de optimización, sobre todo en cuanto a la reducción del tamaño de los archivos JS/CSS y la activación de la carga retardada.

¿Cómo reducir los archivos JS y CSS?

1. Fusionar y comprimir archivos

Para combinar varios JS o CSS Los archivos se fusionan en uno solo, lo que reduce el número de peticiones y disminuye la carga del servidor. La mayoría de los archivos JS y CSS pueden comprimirse con herramientas que reducirán el tamaño del archivo y también acelerarán la descarga. Para el tema WoodMart, puede utilizar los siguientes métodos de fusión y compresión:

Uso de plug-ins: Como Autoptimize tal vez Cohete WP Plug-ins como el que fusiona y comprime automáticamente archivos JS y CSS para mejorar la velocidad de carga.

optimización manualSi estás familiarizado con el código, puedes combinar y comprimir archivos manualmente a través de las funciones de gestión de archivos del tema. Por ejemplo, combina todos tus archivos CSS personalizados en un único archivo y utiliza una herramienta en línea (como la herramienta Minificador de CSS) para la compresión.

Paso 1: Localizar el archivo CSS

Inicie sesión en el servidor web (utilizando una herramienta FTP como FileZilla o el gestor de archivos del panel de control del alojamiento).
Camino de acceso:
/wp-content/temas/tu-tema/(testamento) su-tema (Sustitúyalo por el nombre actual de la asignatura)
Encuentra todos los archivos CSS personalizados (wordpress Apariencia → Editor de archivos de tema → style.css).

Paso 2: Fusionar varios archivos CSS en uno solo

Abra todos los archivos CSS que se van a fusionar localmente en un editor de texto (por ejemplo, VS Code o Notepad++) en orden.
Copie y pegue el contenido en un nuevo archivo con el nombre sugerido:style-merged.css

Fusionar para evitar conflictos de estilo y anulaciones duplicadas (por ejemplo, primero los estilos globales, después las anulaciones personalizadas).

Paso 3: Utilice una herramienta en línea para comprimir el archivo CSS fusionado.

Accede a herramientas de compresión en línea, por ejemplo:
- https://cssminifier.com
Pegue el contenido CSS fusionado y haga clic en Reducir.

Copie el código comprimido y guárdelo como style-merged.min.css

Paso 4: Cargar el archivo CSS comprimido

Comprime el comprimido style-merged.min.css Súbelo al directorio CSS del tema, por ejemplo:
/wp-content/temas/tu-tema/accesorios/css/

2. Retraso en la carga de archivos JS no críticos

Algunos archivos JS pueden no ser una parte crítica de la carga de la página y pueden ser opcionalmente retrasados. Al reducir el número de archivos JS que se cargan inicialmente en la página, puede mejorar significativamente la velocidad de carga de la página.

Activación de la carga diferida con plugins::Cohete WPPlugins como Autoptimize ofrecen la posibilidad de retrasar la carga de JS. Solo tienes que activar los ajustes pertinentes y el plugin optimizará automáticamente tu sitio.

Carga manual diferidaTambién puede modificar el tema modificando el archivo funciones.php utilizando la función aplazar tal vez async para retrasar la carga de scripts no críticos. Por ejemplo, utilizando el atributo aplazar para retrasar la carga de la mayor parte del script JS en la página hasta que la página esté completamente renderizada.

Paso 1: Haga una copia de seguridad de su sitio web

Antes de realizar cualquier cambio en el código, se recomienda hacer una copia de seguridad del sitio web o, al menos, de los archivos utilizados actualmente. funciones.php en caso de que un error de modificación haga que el sitio informe de un error.

Paso 2: Abrir funciones.php papeles

Inicie sesión en el backend de WordPress
Vaya a [Apariencia] > [Editor de archivos de temas].
A la derecha, busque y haga clic en funciones.php(Funciones temáticas)

Paso 3: Inserte el siguiente código para añadir el JS aplazar causalidad

Ejemplo: Añadir aplazar Propiedades (excluir jQuery)

function add_defer_attribute($tag, $handle) {
    // Excluir jQuery (añadir más handles según proceda)
    if (in_array($handle, ['jquery'])) {
        return $tag;
    }
    return str_replace(' src', ' defer src', $tag);
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

Paso 4: Guardar y probar la carga de la página

Haga clic en [Actualizar archivo] en la esquina superior derecha
Para acceder a la portada, pulse F12 para abrir las herramientas de desarrollo del navegador y compruebe que la opción <script> Si se ha añadido la etiqueta aplazar tal vez async

Compruebe que la página funciona correctamente para evitar problemas con la secuencia de ejecución del script

3. Elimine los scripts y estilos innecesarios de los plugins

Algunos plugins cargan automáticamente sus archivos CSS y JS en cada página, y muchas veces estos scripts no necesitan ser cargados en cada página. Puedes eliminar los scripts y estilos innecesarios haciendo lo siguiente:

Desactivar plug-ins innecesariosComprobar y desactivar regularmente los plugins que ya no se utilicen o sean innecesarios para evitar que carguen recursos adicionales en la página.

Desactivación de secuencias de comandos específicas de la página: La carga de un script específico para una página concreta puede realizarse utilizando la función wp_dequeue_script() tal vez wp_dequeue_style() función en el funciones.php para eliminar los scripts y estilos innecesarios.

add_action('wp_print_scripts', function () {
global $wp_scripts; foreach ($wp_scripts->queue as $script) {
foreach ($wp_scripts->queue as $script) {
echo $script . "
";
}
});

Este código se inserta para dar salida a todos los nombres de script en el front-end.

Activar la carga diferida de imágenes

Retraso en la carga de imágenes(Lazy Load) es una técnica para cargar el contenido de una página a petición del usuario. La carga perezosa significa que las imágenes se cargan sólo cuando el usuario se desplaza a la parte adecuada de la página, en lugar de cargar todas las imágenes al principio. De este modo, se pueden reducir significativamente los recursos necesarios para la carga inicial de la página y aumentar la velocidad de carga.

Cómo activar la carga retardada en WordPress A partir de WordPress 5.5, WordPress incluye la posibilidad de retrasar la carga de imágenes. Puede retrasar la carga de imágenes editando el archivo wp-config.php para activar esta función. Simplemente añada el siguiente código al archivo: define('WP_REDIS_ENABLE', true). Si está utilizando la última versión de WordPress, la carga retardada de imágenes debería haberse activado automáticamente. Puede comprobarlo mirando el código fuente de la página y comprobando el parámetro loading="lazy" ¿Aparece el atributo en el img Etiqueta arriba para validar esta función.

Habilitación con plug-inscarga retardada Si desea un control más granular sobre la función de carga retardada, o desea que se aplique también a otros archivos multimedia como el vídeo, puede utilizar un complemento de carga retardada como a3 Carga perezosa tal vez Lazy Load de WP Rocket.

Optimizar imágenes en temas WoodMart El tema WoodMart ofrece potentes opciones de optimización de imágenes. En el backend de WordPress, vaya a Ajustes del tema WoodMart y seleccione Rendimiento para activar las opciones de optimización de imágenes pertinentes, como la carga retardada de imágenes, el redimensionamiento automático de imágenes, etc.

Otras recomendaciones de optimización

Activar la caché del navegador
Al activar el almacenamiento en caché del navegador, los usuarios cargarán más recursos estáticos cuando visiten un sitio web en lugar de volver a descargarlos cada vez. Para ello, añada el parámetro .htaccess para configurar las reglas de almacenamiento en caché.
Uso de redes de distribución de contenidos (CDN)
Una CDN almacena en caché y distribuye el contenido de su sitio a múltiples nodos de servidores de todo el mundo, lo que reduce enormemente los tiempos de carga para los usuarios de todo el mundo.WoodMart admite la integración con la mayoría de los servicios de CDN, tales como CloudflareKeyCDN, etc.
Optimizar el rendimiento del servidor
Elegir el entorno de alojamiento y la configuración adecuados es muy importante para el rendimiento del sitio web. En el caso de temas con muchas funciones, como WoodMart, elegir un servidor compatible con PHP 7.4 o superior y habilitar un sistema de almacenamiento en caché (como Redis o Varnish) puede ser una forma eficaz de mejorar el rendimiento.

resúmenes

Optimizaciones como la reducción del tamaño de los archivos JS/CSS y la activación de la carga retardada pueden mejorar significativamente el rendimiento de la web.Actualizar WoodMart Velocidad de carga y rendimiento del tema. Fusionar y comprimir archivos, retrasar la carga de imágenes y eliminar scripts innecesarios son medidas eficaces para mejorar la capacidad de respuesta de su sitio web.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres