Pase todas las pruebas de CWV y PageSpeed ​​Insights con estas técnicas de desarrollo de WordPress

En 2021, en StrategiQ, una agencia digital completa con sede en el Reino Unido, nos propusimos comenzar a desarrollar todos y cada uno de los sitios web que desarrollamos y lanzamos para superar el rendimiento de Core Web Vitals (CWV) y PageSpeed ​​Insights (PSI) de Google. reporte.

Core Web Vitals muestra el rendimiento de su sitio web en una variedad de formas. Esto incluye la velocidad de carga del primer contenido en una página (Primera y más grande pintura con contenido), la velocidad de cuánto tiempo tiene que esperar un usuario antes de poder interactuar con él (Tiempo para interactuar) y los cambios de diseño (Cambio de diseño acumulativo) .

Probar su CWV es tan fácil como un pastel: simplemente diríjase a https://pagespeed.web.dev/ e ingrese su dirección. El área superior muestra los últimos datos del mundo real de los últimos 28 días, mientras que la sección inferior (una puntuación de 100, tanto para dispositivos móviles como de escritorio) son datos generados en laboratorio.

¿Por qué importa esto? Bueno, porque Google lo dice.

En julio de 2018, Google anunció que la velocidad es un factor que determina cómo aparece un sitio en los resultados de búsqueda, especialmente en dispositivos móviles. Fuente.

En 2020, también anunciaron que las métricas de la experiencia del usuario (que componen Core Web Vitals / CVW) ahora se utilizan en la clasificación de los sitios. Fuente.

Es simple: cuanto más rápido y mejor funcione un sitio, es más probable que se clasifique.

Entonces, el equipo de desarrollo de StrategiQ decidió que era nuestro turno de ayudar al departamento de SEO. Los expertos en SEO pueden trabajar sus pequeños vagabundos lo más duro que puedan, pero un sitio que funciona terriblemente puede hacer mucho más daño que bien. Sin embargo, un sitio que apruebe CWV y PSI garantizará que su excelente trabajo tenga un trampolín brillante.

Lo que vale la pena señalar es que CWV y PSI son notoriamente difíciles de pasar. La gran mayoría de los sitios no lo hacen, incluso muchos de los sitios web más destacados del mundo . Piense en YouTube, BBC, incluso WP Engine ellos mismos luchan por obtener un pase tanto en dispositivos móviles como de escritorio ( lo siento, muchachos ).

Entonces, ¿qué hicimos para asegurarnos de ver esas deliciosas rosquillas verdes de delicia?

Quitamos todo y trabajamos con un simple mantra:

Cargue lo menos posible, lo más rápido posible.

Si bien no entraré en los detalles más pequeños, repasaré nuestros métodos principales para mantener nuestros temas personalizados de WordPress lo más optimizados posible.

En primer lugar, hablemos de hardware. No podemos continuar sin antes hablar de WP Engine. Sin lugar a dudas, son uno de los mejores proveedores de alojamiento específicos de WordPress, si no el mejor. Estamos encantados con el impresionante soporte, el tiempo de actividad, los entornos para cada instalación, las copias de seguridad y lo fácil que es administrar el certificado SSL y los dominios, entre muchas otras características. Además, su almacenamiento en caché y su optimización de velocidad garantizan que el sitio funcione lo más rápido posible a nivel de servidor.

Con un servidor de alto rendimiento en su núcleo, sabemos que ahora depende de nosotros hacer que un sitio web funcione lo más rápido posible.

Como la mayoría de las agencias, tenemos nuestra propia plantilla base hecha a mano que usamos como punto de partida para todos nuestros sitios web personalizados. Cada sitio que creamos está diseñado y codificado internamente, no es un tema preconstruido a la vista.

Nuestra plantilla base tiene nuestros métodos de optimización de velocidad integrados, así como una serie de funciones inteligentes y componentes reutilizables que necesitamos en cada proyecto. Tener ese punto de partida nos ahorra tiempo a largo plazo y garantiza que cada sitio funcione lo mejor posible con poca sobrecarga requerida por el desarrollador.

Sé lo que estás pensando: ¡ve a lo bueno!

No me voy a molestar en enumerar las cosas aburridas habituales que ves en cada publicación de blog, como "imágenes de carga diferida". Pero si no lo hace, eso es de hecho imprescindible: tenemos una función de imagen que imprime nuestras imágenes cargadas de forma diferida con etiquetas srcset y tamaños (conocidas como imágenes receptivas).

Entremos en ello.

Método 1: trocear y poner en cola

Sucede mucho: un proyecto solo tiene un archivo css y un archivo js, ​​y terminan inflando hasta el tamaño de un pequeño planeta. ¿Qué sigue? Google te pregunta "¿por qué estás cargando estilos y javascript no se usa en esta página?". ¿Por qué? ¡¿Por qué?!

Es un punto válido. ¿Por qué debería cargar grandes cantidades de css y javascript para un sitio web completo cuando solo necesita una fracción de eso por página?

Todos nuestros sitios están completamente construidos con bloques de Gutenberg. Esto significa que para cada bloque, puede utilizar el brillante poder de poner en cola sus archivos css y js.

Para cada bloque, creamos un archivo css y js separado solo para ese archivo (si es necesario). Luego, estos se minimizan (consulte el siguiente punto para obtener más información) y se ponen en cola bloque por bloque.

¿El resultado? Solo cargamos lo que realmente hay en cada página.

Método 2: use un ejecutor de tareas como gulp para combinar y minimizar sus activos

Todos los activos generados son minimizados por una función de trago (otros están disponibles, como grunt). Vale la pena señalar que hace muchas lunas, Google hubiera preferido la concatenación a la minificación (una solicitud grande hubiera sido preferible a 5 solicitudes pequeñas), pero desde el surgimiento de HTTP/2 (que multiplexa varias solicitudes a la vez) esto ya no es una tema.

Nuevamente, hacemos esto para mantener los archivos lo más pequeños posible. Así que ahora no solo estamos cargando activos que están en la página, sino que también tienen un tamaño minúsculo.

Método 3: dejar de renderizar activos de bloqueo

Nos aseguramos de que todos estos activos en cola estén en la parte inferior de la página y, por lo tanto, no bloqueen el procesamiento.

Incluso sacamos de la cola el jQuery que viene con WordPress y ponemos en cola una nueva versión (una que no tiene vulnerabilidades de seguridad), también en la parte inferior de la página.

Pero, ¿qué pasa con un FOUC (Flash of Unstyled Content) que te oigo decir?

Método 4: arriba del pliegue css

Un destello de contenido sin estilo ocurre cuando una página se carga inicialmente sin ningún estilo, ya que la hoja de estilo se encuentra en la parte inferior de la página. Una vez que se carga la hoja de estilo, se aplican los estilos, el sitio parpadea y finalmente se ve correcto.

Para solucionar esto, dividimos los estilos de plegado anteriores y los agregamos como una etiqueta <estilo> en línea en el encabezado. No es un recurso de bloqueo de procesamiento y no obtenemos un FOUC.

Método 5: Cohete WP

La pieza final del rompecabezas es el mejor complemento de rendimiento de su clase, WP Rocket. Construido en conjunto con los ingenieros de WP Engine, es el único complemento de almacenamiento en caché permitido en su plataforma de alojamiento.

¿Los resultados?

Bueno, las puntuaciones hablan por sí solas.

SportsAidEastern es una organización benéfica que apoya a los atletas británicos. De acuerdo con PSI, el sitio que desarrollamos para ellos obtiene un puntaje de 97/100 en dispositivos móviles y 100/100 en computadoras de escritorio.

Calligo ofrece servicios de datos transformadores y los puntajes de su sitio son incluso mejores que los de SportsAid; llegando a un casi perfecto 99/100 en dispositivos móviles y 100/100 en computadoras de escritorio.

Conclusión

Con suerte, esto ha sido una bocanada de aire fresco de todas las demás publicaciones del sitio "cómo acelerar tu WordPress" y, si estás luchando para obtener un pase, quizás lo hayamos resaltado. algo que puedes probar.

StrategiQ es la agencia de marketing que prioriza la estrategia. Al descubrir información valiosa sobre el mercado, revelar oportunidades para vencer a la competencia, definir y ofrecer estrategias de marketing efectivas, nuestro equipo ayuda a las marcas ambiciosas a superar sus objetivos a través de asesoramiento, creatividad, marketing y tecnología.
Ya sea que necesite estrategia, asesoramiento, recursos o experiencia, dé el primer paso. Cuéntanos sobre ti y veremos cómo podemos ayudarte.