Share
¡Dale un impulso a tu sitio! Implemente técnicas de optimización cruciales que mejorarán no solo su yslow puntuación, pero su rango de Google también. En este tutorial cubriremos todos los aspectos del almacenamiento en caché de W3, ySlow, la velocidad de la página de Google, los sprites de CSS y las reglas de htaccess, para lograr una alta puntuación de ySlow como lo he hecho en mi blog.
Una nota rápida antes de comenzar, aunque este tutorial abarcará todo lo detalladamente que sea necesario, habrá (siempre que sea posible) accesos directos, para ahorrarle algo de tiempo..
Instalar un complemento de caché: Primero, sea cual sea el complemento de almacenamiento en caché que esté utilizando, ¡apáguelo AHORA! A menos que sea el poderoso Caché de W3 Total, ya que es con lo que trabajaremos aquí. (Ok, eso fue un poco fuerte, pero he usado muchos de los complementos de almacenamiento en caché y W3 es mi favorito. Si usas otro por cualquier razón, probablemente esté bien, nos moveremos junto con W3 Sin embargo, diríjase a la sección "Agregar nuevos" complementos dentro de WordPress, busque "W3 Total Cache", descárguelo, instálelo pero no lo encienda ... bueno, todavía no..
Instalar un complemento de administrador de base de datos: A continuación, necesitará otro complemento llamado "WP-DBmanager". Busque e instale esto de nuevo, asegurándose de que no tenga ningún otro complemento de base de datos instalado..
Antes de seguir adelante y comenzar a mejorar su sitio, veamos primero con qué tratamos. Abre Google Chrome o instálalo si aún no lo tienes. Una vez que esté en Chrome, instale el complemento ySlow AQUÍ una vez instalado, verá un nuevo ícono en la parte superior derecha de su pantalla. Pinchalo. (Asegurándote de que estás en la página de inicio de tu sitio)
ySlow revisará su sitio, le dirá lo que es bueno, lo que es malo y todo lo que está en medio. Queremos enfocarnos primero en todo lo que está por debajo de un grado B. A continuación, analizaré cada configuración W3 que necesite para mejorar el tiempo de carga de sus sitios..
Una vez que se haya activado W3 Total Cache, verá una nueva pestaña de la barra lateral llamada "Rendimiento". Ahora, obviamente, ejecutaremos todas las diferentes secciones de W3, pero para ahorrarle un poco de tiempo, podrá importar el archivo de configuración de W3, incluido en los "archivos de origen" y saltar al paso 2C.
Aquí es donde se encuentran todos los ajustes para W3. Primero veamos la "Configuración general", tendrá que marcar las siguientes casillas (para habilitar):
Caché de página (seleccione "Disco: Mejorado" en el menú desplegable): el almacenamiento en caché de las páginas reducirá el tiempo de respuesta de su sitio y aumentará la escala de su servidor web.
Reducir (seleccione "Manual", deje las otras configuraciones): Minification puede disminuir el tamaño del archivo de HTML, CSS, JS y feeds respectivamente en aproximadamente un 10% en promedio.
No marque la memoria caché de la base de datos (ordenaremos esto más adelante mediante un método diferente)
Caché de objetos (seleccione "Disco" en el menú desplegable): el caché de objetos aumenta considerablemente el rendimiento de los sitios altamente dinámicos (que utilizan la API de caché de objetos).
Caché del navegador: habilite la compresión HTTP y agregue encabezados para reducir la carga del servidor y disminuir el tiempo de carga del archivo.
Deja CDN, barniz y cloudflare intactos. (De nuevo, para hacer esto, cargue rápidamente el archivo de configuración incluido en los "archivos fuente" a través de la opción en la parte inferior de la "Configuración general")
Haga clic en la pestaña / vínculo "Reducir" en la parte superior del panel / página de W3. En la sección "HTML y XML", asegúrese de que las tres primeras casillas estén marcadas. Luego haga clic en el botón "Ayuda" en la parte superior.
Una vez que se cargue esta ventana emergente, se encontrará con una lista de archivos javascript, seguidos de las hojas de estilo a las que se vincula su sitio. Esencialmente queremos probar y marcar todo EXCEPTO:
Archivos jquery
Anuncios de Google (o cualquier anuncio para esa materia)
Cualquier archivo de stats.wordpress.js (los tendrá si tiene instalado jetpack
Sin embargo, para CSS puedes seleccionarlos de forma bastante segura. Ahora bien, esto no es una ciencia exacta, ya que está minimizando sus archivos de temas (no se preocupe, no es destructivo) y hay muchos temas diferentes que emplean una amplia gama de archivos, complementos y funciones diferentes. Básicamente previsualice sus cambios antes de enviarlos.
Minify es una de las mejoras más grandes que integrará, una vez que haya seleccionado todos sus archivos (y haya hecho lo mismo con cada tema, si está usando más de uno), haga clic en "Aplicar y cerrar", seguido directamente de "Guardar todo configuración "(Implementar si su sitio todavía se ve / funciona igual).
Una vez que esté en la pestaña / página de "Caché del navegador", deberá cambiar el "Vencimiento de la vida útil del encabezado" a 691200 segundos. Esto aumentará inmediatamente tu puntuación de ySlow..
Ahora vuelva a "Configuración general" y haga clic en "vaciar todos los cachés", luego vaya a su página de inicio y ejecute la prueba ySlow nuevamente, debería ver una buena mejora.
Debajo de la pestaña de la barra lateral "Rendimiento" en el backend de WordPress debería haber otra pestaña con el nombre "Base de datos" (de lo contrario, vuelva atrás y actívela).
Ahora esto es muy simple, necesita hacer tres cosas, hacer copias de seguridad, reparar y optimizar.
Para hacer una copia de seguridad, haga clic en "Copia de seguridad de la base de datos" y, a continuación, haga clic en "Copia de seguridad" (No se preocupe por gzipping).
A continuación, queremos reparar su base de datos (solo en caso), así que vaya a "Reparar DB" en la barra lateral. Haga clic en el botón "Reparar" en la parte inferior.
Por último, optimizarlo. Haga clic en el botón de la barra lateral "Optimizar base de datos" y sí, lo ha adivinado, haga clic en el botón "Optimizar" en la parte inferior.
Para evitar este proceso, vuelva a aparecer en la pestaña de la barra lateral "Opciones de base de datos". En la parte inferior habrá una sección de "Programación automática". Asegúrese de que las copias de seguridad se realicen TODOS LOS DÍAS (no puede ser demasiado cuidadoso), luego configúrelas para optimizar cada día y reparar una vez por semana. Luego guarda los cambios.
Ahora en ySlow probablemente habrá notado en la sección "Hacer menos solicitudes HTTP" una cadena de texto que dice algo así como "Esta página tiene 10 imágenes de fondo externas. Intenta combinarlos con sprites CSS ".
Imagine el ahorro si todas esas pequeñas imágenes pudieran ser solo una imagen ... Seguro que aceleraría las cosas. Para esto vamos a utilizar una herramienta gratuita llamada "Spriteme", así que dirígete al sitio AQUÍ (hazlo en una nueva pestaña, pero asegúrate de que tu sitio esté en la página principal).
Una vez que tenga abierta su página de inicio en una pestaña y spriteme abierta en otra, arrastre el texto "SpriteMe" a la pestaña que contiene su sitio. Aparecerá un cuadro en la parte superior derecha de la pestaña / ventana. Querrá hacer clic en el botón "hacer sprite" que se encuentra dentro del cuadro "Sprites Sugeridos". Una vez que lo haga, es mágico descargar la imagen que ha creado y cargarla en algún lugar de su sitio (preferiblemente dentro del tema que está usando). 
Ahora haga clic en el botón "exportar CSS" en la parte superior derecha de la ventana emergente "SpriteMe", copie y pegue el código css que le ha proporcionado (así es TODO) directamente en la parte inferior de sus temas "style.css" o en cualquier lugar se usará en lugar del código predeterminado (ya que no queremos sobrescribir el código de tema predeterminado). Deberá asegurarse de que la segunda "imagen de fondo: url" se cambie de "http://www.jaredhirsch.com" a donde guardó la imagen del sprite anterior.
Una vez que haya hecho esto, una vez más, "vacíe todos los cachés" en la pestaña de barra lateral "Rendimiento".
En su mayor parte, personalmente, siempre uso Photoshop para comprimir mis imágenes antes de subirlas, pero para muchos de ustedes esta no es una opción, ya que no tiene Photoshop. Así que aquí te ayudaré a reducir el tamaño de archivo de tus imágenes..
En primer lugar, querrás asegurarte de que las imágenes de los temas estén optimizadas, y puedes hacer esto comprando, capturándolas todas y golpeandolas en esta fantástica aplicación llamada "ImageOptim".
Una vez que las imágenes de sus temas sean agradables y comprimidas, es posible que desee ver complementos como "Smush.it" para Wordpress que optimizará las imágenes que puede usar en publicaciones y similares..
Esta es sin duda una técnica de optimización crucial. Para habilitar la compresión GZIP de PHP, edite php.ini (ubicaciones de ejemplo como en / etc / o / usr / local / lib) con cualquier editor de texto como vi, y localice la siguiente directiva:
zlib.output_compression
El valor predeterminado es Desactivado, cambie la configuración a Activado para que la línea se vea a continuación:
zlib.output_compression = On
Reinicie el servidor HTTPD de Apache después del cambio. Todas las páginas web producidas por PHP ahora se comprimirán antes de enviarlas por Internet al navegador web para decodificarlas..
PHP también tiene una directiva que se puede utilizar para ajustar el nivel de compresión. Para establecer el nivel de compresión, use la siguiente línea en php.ini, con valores válidos entre 1 y 9, donde 1 es la menor compresión y 9 la mayor compresión. El nivel de compresión predeterminado es 6, que proporciona la mejor compresión sin degradar el rendimiento del servidor.
zlib.output_compression_level = 6
Anteriormente, la compresión PHP se logra al ingresar Código al comienzo de cada script PHP. No se recomienda el método, ya que todos y cada uno de los scripts deben cambiarse. La habilitación de zlib en php.ini se aplicará a todos los scripts PHP en el servidor web sin exclusión.
Si es imposible modificar el archivo php.ini, o no tiene control sobre php.ini especialmente en un alojamiento compartido, la compresión GZIP de PHP también se puede configurar a través del archivo .htaccess, que normalmente se encuentra en la raíz del sitio web. Para habilitar la compresión GZIP de PHP a través de Zlib, simplemente agregue la siguiente línea al archivo .htaccess. Tenga en cuenta que cada sitio web tiene que ser cambiado individualmente.
php_flag zlib.output_compression en
La desventaja de habilitar la compresión GZIP a través de PHP es que solo las páginas web generadas por scripts PHP serán comprimidas por la codificación GZIP. Todos los archivos CSS o JavaScript externos no serán comprimidos. Para la capacidad de habilitar la compresión GZIP en todos los tipos de archivos, usa mod_deflate o mod_gzip en el servidor web HTTPD en su lugar.
Verifique y verifique que la compresión GZIP esté funcionando correctamente
A medida que nos acercamos al final de este tutorial, solo quiero ver algunas de las últimas cosas. Ahora que sus imágenes han sido aplastadas y se han hecho sprites, es posible que desee borrar tanto el caché de su navegador como una vez más "vaciar todos los cachés" en la pestaña de barra lateral "Rendimiento".
Ahora regresemos, salgamos de WordPress, carguemos la página de inicio de sus sitios y hagamos una prueba de ySlow. Una vez más, debería haber aumentado, en la sección CDN de ySlow tiene la opción de "Agregar como CDN" en algunos componentes. Hacer esto aumentará tu calificación aún más.
Si desea agregar correctamente un CDN dedicado, le sugiero que siga este TUTORIAL.
Ahora, con los dedos cruzados, deberías estar viendo un puntaje de prueba de grado A y si lo comparas con el examen de reporte de velocidad de la página de Google, verás un puntaje muy saludable.
Una sección de ySlow que no he cubierto es el "dominio sin cookies", que es cuando el navegador solicita una imagen estática y envía cookies junto con la solicitud, el servidor no tiene ningún uso para esas cookies. Así que solo crean tráfico de red sin una buena razón. Debe asegurarse de que los componentes estáticos se soliciten con solicitudes sin cookies. Crea un subdominio y aloja todos tus componentes estáticos allí..
Si su dominio es www.example.org, puede alojar sus componentes estáticos onstatic.example.org. Sin embargo, si ya ha establecido cookies en el dominio de nivel superior example.org en lugar de www.example.org, todas las solicitudes a static.example.org incluirán esas cookies. En este caso, puede comprar un dominio completamente nuevo, alojar sus componentes estáticos allí y mantener este dominio sin cookies. Yahoo! usa yimg.com, YouTube usa ytimg.com, Amazon usa images-amazon.com y así sucesivamente.
Otra ventaja de alojar componentes estáticos en un dominio sin cookies es que algunos proxies pueden negarse a almacenar en caché los componentes que se solicitan con cookies. En una nota relacionada, si se pregunta si debería usar example.org o www.example.org para su página de inicio, considere el impacto de las cookies. Omitir www no le deja más remedio que escribir cookies en * .example.org, por lo que, por razones de rendimiento, es mejor usar el subdominio www y escribir las cookies en ese subdominio.
No voy a entrar en esto, pero lo anterior debería darle una buena idea. Voy a repasar esto en profundidad en un tutorial posterior. Esto mejora la puntuación pero no es completamente esencial.
Estos son los pasos que tomo cuando construyo sitios web y hacen una gran diferencia cuando se trata de mejorar la velocidad y permitir tiempos de respuesta rápidos. Para aquellos que necesiten más información o que quieran ayuda para llevar a cabo los procedimientos, comenten a continuación o envíenme un mensaje a través de mi perfil de autor.
Accentsconagua