Recientemente Google ha comenzado a hacer un gran impulso hacia la velocidad de la página del sitio web y Tendencias móviles cuando se trata de su ranking de página. De la introducción de su indexación móvil primero , al desarrollo e inclusión de Lighthouse En las herramientas de auditoría de Google Chrome, está claro que prestar más atención a los dispositivos móviles es importante para el SEO de su sitio web.
con Las velocidades 4G LTE 4G de primera línea actualmente alrededor de 36 MB/s [1], y el Promedio nacional para un ISP de 18.7 Mb/s [2] en los Estados Unidos, Tener un sitio web optimizado es importante no solo para los dispositivos móviles, sino también escritorio también. Dicho esto, ha sido mi experiencia reciente que El impulso de Google hacia "Mobile First" está poniendo un énfasis mucho mayor en el tiempo de carga de la página que antes.
en A principios de 2015, ssanmy.storeenzó a construir un nuevo sitio web para uno de nuestros clientes. Habíamos estado haciendo trabajos de marketing para ellos durante un año antes de Lanzamiento del nuevo sitio y estábamos viendo alrededor de 180 visitantes únicos para su sitio por día. Después del lanzamiento de un nuevo sitio web en 2016, Vi una pequeña caída en el tráfico de búsqueda orgánica, habiendo perdido unos 301 redirige, pero rápidamente pudieron recuperarse.
por utilizando una combinación de creación de contenido y optimización en todo 2017, pudimos aumentar la cantidad de visitantes únicos al sitio Desde el tráfico de búsqueda orgánica hasta alrededor de 700 por día. A principios de 2018 nosotros Comenzó a mirar la optimización del sitio web para aumentar aún más el tráfico. Ejecutamos el sitio a través de Google's PageSpeed Insights y obtuvimos algunos puntajes bastante bajos.
PageSpeed Insights, se enfoca en algunas áreas clave para mejorar el tiempo de carga:
- Bloqueo de Javascript. caching
- Enabling GZIP compression on the server
- Browser caching
- Minifying CSS, HTML, and JavaScript
- Optimizing Images.
You can also get a far more in-depth report by using Google Chrome’s Audit tool .
Below, Voy a repasar rápidamente lo que significan algunas de estas cosas y cómo Puede acercarse a mejorarlos para aumentar sus ideas de la velocidad de la página puntaje.
Bloqueo de bloqueo JavaScript
Esto puede ser tan simple como mover todo su JavaScript incluye al pie de página y agregar una etiqueta de `deferta`.
Puede hacer otras cosas, eso incluye mejor, incluyendo:
- Sirviéndolos de un CDN || 85
- Adding to the url to control caching
- Combinando todos sus archivos en un solo JavaScript incluye
Todos de estas cosas permiten que el contenido de la página se cargue y renderice sin tener que esperar a que los archivos JavaScript más grandes terminen.
Render Bloqueo CSS
Google Sugiere tener CSS en línea pequeños en la parte superior de la página y Carga asíncrona de la mayor parte de los estilos después del resto de la página ha cargado. Esta puede ser una espada de doble filo: por una mano, mejoras el tiempo de carga, pero puede obtener saltos de contenido, donde un sitio sin estilo Puede aparecer y luego saltar a su lugar cuando el CSS termina de cargar. Personalmente, Estoy de acuerdo con esto, pero muchas personas no lo son.
son algunas maneras en que puedes manejar esto. En primer lugar, debes saber que La ventana de congestión inicial es típicamente alrededor de 14.6 kb cuando comprimido, y cualquier cosa más allá de esto requerirá viajes redondos adicionales entre su servidor y el navegador. Esto significa que deberías intentarlo Para minimizar el tamaño de su contenido superior y pequeño CSS en línea a alrededor de 14.6kb. Hacer esto puede ayudar a minimizar cualquier salto de estilo y Permite que el contenido se entregue al usuario lo más rápido posible.
Minificación de HTML, CSS y JavaScript
si Utiliza un preprocesador CSS, minificar sus estilos debe ser tan simple como configuración de la salida en `comprimido` o una configuración equivalente.
JavaScript es un poco diferente. Querrás ovlificar tu código fuente, cuándo es el Proceso de eliminación de espacios en exceso. Puede usar alguna herramienta en línea o Puede configurar un sistema de compilación con Gulp , Grunt , o Webpack para minificar su JavaScript.
SEGUIMENTE, SEA HTML se puede comprimir con una herramienta de compilación del proyecto o a través de PHP directamente con `ob_start ()`. Esto puede causar un problema si Tenga algún JavaScript en línea, así que asegúrese de tener cuidado con eso.
Colocación El siguiente fragmento en su encabezado minificará el código dentro de su proyecto. Es crudo y puede causar algunos problemas con cualquier CSS en línea o JavaScript, pero puede funcionar si está aplazando su JavaScript incluye correctamente.
php // min html function sanitize_output ($ buffer) { $ search = array ( '/\> [^\ s]+/s', // sholeSpaces después de las etiquetas, excepto el espacio '/[^\ s]+\ // selle whiteSpaces antes de las etiquetas, excepto el espacio'/(\ s)+/s', // múltiples secuencias Whitespace '//' // Eliminar comentarios ); $ reemplazar = array ('>', '<', '\\ 1', ''); $ buffer = preg_replace ($ search, $ reemplazar, $ buffer); return $ buffer; } ob_start ("sanitize_output"); ?>
Optimización de imágenes
Esto es solo un paso de lo que debes hacer con las imágenes, pero puedes Use una herramienta como ImageOptim o Photoshop para calificar sus imágenes antes Subirlos a su sitio. En un mundo perfecto, deberías estar haciendo Esto además de "la carga perezosa".
si Estás utilizando un sistema de compilación, puede trabajar en el proceso de compilación. Tenga en cuenta que esto no funcionará si las imágenes están alojadas en un Servidor diferente, como un cubo S3. Porque usamos gulp, hacemos esto con el paquete Imagemin NPM.
gulp.task ('imágenes: min', function () { return gulp.src (settings.img.input) . pipe (caché ('minificación')) . Pipe (Imagemin ([ imagemin.gifsicle ({entrelazado: true}), imagemin.jpegtran ({ Progressive: True, OptimizationLevel: 6 }), imagemin.optipng ({OptimizationLevel: 6}) ])) .pipe (gulp.dest (settings.img.output)) });
Los resultados
por Reducir los tamaños de nuestra imagen, diferiendo la carga de gran parte de nuestro JavaScript, y minificando aún más el CSS y HTML, pudimos Mejore nuestros puntajes de 45/34 a 70/79. Alrededor de una semana después de hacerlo, nosotros vio un salto en las visitas de la búsqueda orgánica de aproximadamente el 60%, a alrededor de 1.200 usuarios diarios sin otros cambios de marketing que ocurren en ese mismo Semana.
Es Difícil atribuir completamente el cambio en el tráfico de búsqueda orgánica al aumento en el tiempo de carga del sitio web, pero al menos vimos un dramático aumentar. Ciertamente lo suficiente como para garantizar investigar estas mejoras también para los sitios de nuestros otros clientes.