WordPress activo: cómo servir correctamente archivos estáticos

Uno de los aspectos más descuidados de la optimización de los activos de WordPress no tiene nada que ver con WordPress Per-SE; Todo se trata de cómo entregamos activos estáticos a los navegadores a nuestros visitantes. ¿Qué son los activos de WordPress? Utilizamos el término activos para describir todos los archivos estáticos que su servidor web envía a los visitantes y cae en tres tipos: javascript, hojas de estilo e imágenes. Los dos primeros generalmente se adaptan a nuestros complementos y temas, mientras que los últimos se cargan a través de la biblioteca de medios. Pero primero, una palabra sobre la destrucción de caché Cuando visitamos un sitio web, el servidor primero envía el HTML que genera WordPress, seguido de todos los activos, declarado en ese HTML, generalmente comenzando con los archivos CSS, luego las imágenes aparecen en el contenido o se extraen a través de CSS. Y si su tema se ha desarrollado correctamente, los archivos JavaScript al final, ya que estos son los últimos incluidos (en la cola) en la fuente.
Esto significa, en promedio, que para cada carga de la página que ve en la pantalla, su navegador tiene que hacer entre 10 y 100 solicitudes, cada una de ellas es una espalda al servidor y viceversa. Entonces, en un servidor web neo optimizado, si actualiza la página, todo el proceso tiene lugar nuevamente. Además del hecho de que cada solicitud se recopila en el tiempo total requerido para que la página se presente por completo en la pantalla, esto también tiene un impacto en el servidor, porque tiene que procesar todas esas solicitudes una y otra vez. Para evitar esto, los servidores web permiten a los administradores establecer lo que llamamos encabezado de vencimiento. Esta es una pequeña información que le dice al navegador mientras que un archivo en particular permanecerá sin cambios. Entonces, si lo establecemos en +2 días, significa que el navegador guardará el archivo en el caché y, cuando actualice la página, dibuja ese archivo, en lugar de contactar al servidor, hasta que expire el tiempo. Ahora imagine que usted Inicie una nueva versión del tema que tiene un aspecto completamente nuevo, pero el nuevo archivo CSS se llama exactamente como el anterior (digamos style.css). Después de implementarlo, un visitante que regresa llega a su sitio, y su navegador solo devuelve el antiguo CSS, haciendo que su sitio se vea roto. Para remediar esto, utilizamos una técnica, llamada caché. A pesar de su término elegante, es un enfoque muy simple para resolver el problema de los activos obsoletos por:
renombrar el nuevo archivo (style.css -> style.2.css)
Agregar una cadena de consulta (style.cs s -> style.css? Ver = 2)
Al hacer uno de estos, le decimos al navegador que es un archivo nuevo, por lo que hace una nueva solicitud al servidor en lugar de usar uno de los caché. WordPress hace este último, pero eso tiene un problema para algunas redes de entrega de contenido (CDN, más sobre ellas más tarde). No hay absolutamente ninguna razón para establecer la sede en solo dos días, una vez que se configura la memoria caché porque suponemos que nunca cambio. Algunos administradores los establecen en un año o incluso a Max, lo que los establece en algo como el año 2037. Luego tendré 53 años optimizando las hojas de estilo y las hojas de estilo JavaScripts (archivos .css) y JavaScript (archivos .js) son esencialmente simples simples Archivos de texto, lo que significa que el proceso/lógica de optimización es bastante simple (y lo mismo para ambos, por lo que solo daré un ejemplo en CSS); Si tiene más hojas de estilo, combine todos los archivos en uno, luego elimine todos los espacios y líneas nuevos, por lo que lo que obtiene es una sola línea, pero muy larga.
/ * Antes */ h1 {font-size: 18px; } p {font-size: 13px; } / * After (CSS perfectamente válido) * / H1 {font-size: 18px;} p {font-size: 13px;} Sé que no parece mucho, pero solo haciendo esto reduje el archivo de 51 a 38 ¡Bytes, reduciendo efectivamente su tamaño en un 25%! Y, dependiendo del tamaño y la complejidad de su CSS, puede obtener ahorros hasta el 40% o más. Además, si tiene archivos combinados, ha guardado algunas solicitudes de sus visitantes. Sitio web más rápido AHOY! Por supuesto, hacer este manual no es la forma de seguir, por lo que hay dos soluciones:
Utilice un administrador de actividades como imprimador o gulputilice un complemento
A pesar de que usa un administrador de actividades (escribí una idea para el flujo de trabajo Gulp) para construir su CSS minimizado para su tema, es probable que use algunos complementos que incluyen activos no intencionales, lo que significa que la única forma de hacerlo es usar una sola conecta.
Advertencia: hay altas posibilidades de activación de cualquier complemento de optimización para destruir su sitio, ¡así que intente primero en un entorno de preparación! Si ha seguido mi tutorial anterior de WP-Rocket, entonces la activación de optimización es muy fácil, solo visite la configuración y marque estas dos casillas de verificación:
La configuración de minimización de cohetes de WP de si no, entonces la mayoría de los otros caché (como el caché total W3) también aceptan esto, pero personalmente no soy un gran fanático, por lo que recomiendo otros dos complementos para hacer el trabajo: minería y minería. -Yui. No estoy en el almacén oficial y requiere que su servidor tenga instalado Java, pero el esfuerzo es muy bueno. SSH en el servidor, luego ingrese el siguiente comando (¡asegúrese de ingresar la ruta correcta al director del complemento!):
$ sudo apt-get -y install git Openjdk-6-jre $ cd ~/www/www.wp-kickstart.com/wp-content/plugins $ git clone https://github.com/kasparsd/minit $ git clone https://github.com/bjornjansen/minit-yui.git ahora conéctese con WordPress, active ambos complementos y vea cómo sucede la magia. Desafortunadamente, Minit viene sin ninguna pantalla de configuración, por lo que si tiene que excluir algunos archivos del minimento, como hojas de estilo condicional para Internet Explorer, entonces tendrá que agregarlos a funciones.php, así que (un ejemplo de veintisépecas cosas) . ): Function Exclude_stylesheets ($ stylelheets) {return array (‘veintiséis -ie -ie’, ‘veintiséis -17’); } Add_filter (‘Minit-Exclude-CSS’, ‘Exclude_stylesheets’); Optimización de imágenes Las imágenes no se guardan como archivos de texto simples, sino en código binario, lo que significa que no puede adoptar el mismo enfoque para su optimización. Al igual que con las hojas de estilo, puede hacerlo manualmente con el software de procesamiento de imágenes, hay muchos complementos (gratuitos y premium) que lo hacen por usted. Una vez que lo instale, es probable que vea algunos errores de permiso como:
EWWW Errores de optimización de imágenes para resolver, SSH en el servidor, ejecute los siguientes comandos (nuevamente, asegúrese de que el directorio sea correcto): $ cd /home/webmaster/www/ww.wp-kickstart.com/wp- content/$ mkdir Ewww $ sudo chown: www -ata ewww $ sudo chmod 775 el complemento EWWW copiará automáticamente los archivos para procesar los archivos cargados. Una vez que lo pruebe, notará que las dimensiones de algunos archivos se reducen en un 30% o más. También hay un complemento que me gustaría mencionar y este es Kraken. Es un complemento que optimiza sus imágenes desde la distancia, para que todo el procesamiento tenga lugar en sus servidores. Sus planes comienzan con $ 5/mes y permanecen en su latitud. Decida si desea (o necesita) descargar esta tarea. Un solo GZIP para gobernarlos a todos mientras transmitir activos optimizados ayuda a reducir la cantidad de solicitudes dirigidas al servidor. En transferencias de archivos más rápidas (debido a su tamaño más pequeño), hay otro paso que hacer: comprimir archivos. Todos los navegadores modernos aceptan archivos comprimidos, y la diferencia puede ser bastante significativa. Para que esto funcione, todo lo que tiene que hacer es agregar la siguiente configuración a su archivo NGINX: GZIP ON; GZIP_BUFFERS 16 8K; GZIP_COMP_LEVEL 9; gzip_http_version 1.0; gzip_min_length 0; Gzip_types text/sencillo/css Image/X-icon Image/SVG+XML Image/PG Image/JPG Image/JPEG Text/JS Text/Php Application/JavaScript Application/X-JavaScript; gzip_vary on; GZIP_PROXIED Caducado No-Cache No Store Private; gzip_disable “Mie [1-6].”;

O, si usa Apache, use el fragmento recomendado de Codex y colóquelo en .htaccess.Probablemente no vea una mejora significativa con las imágenes, pero las hojas de estilo y los javascripts a veces se comprimen con el 90%.Sí, eso significa noventa por ciento, aquí le explica: la diferencia entre el tamaño del archivo comprimido y sin comprimir.¿Pero el CDN?Cuando se trata de la optimización de velocidad de WordPress, hay numerosos elementos en línea que utiliza una red de entrega de contenido.Diría que en realidad es el último paso que debe dar al optimizar sus activos.