Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Google
Code

Prácticas para Mejorar Google PageSpeed

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Improving Google PageSpeed.
Optimizing Google PageSpeed to 100 in WordPress

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Final product image
What You'll Be Creating

¿Qué es Google PageSpeed?

Google PageSpeed es una herramienta gratuita que analiza el rendimiento y la usabilidad de tu página web tanto en la plataforma móvil como en ordenadores de sobremesa. Es muy importante porque Google lo usa para determinar elementos críticos para nuestro ranking SEO, p. ej. nuestra posición dentro del listado en los resultados de búsqueda.

Si te apetece saber más sobre los beneficios del aumento de la velocidad de tu web, lee 

En este tutorial, voy a guiarte a través de algunas técnicas de optimización para el PageSpeed de tu web WordPress. Mientras que los cambios básicos pueden resultar sencillos y fáciles, las actualizaciones completas pueden resultar más complicadas.

Curiosamente, podría parecer que las webs a medida resultan más fáciles de optimizar—esto es debido a que su estructura base emplea en gran medida temas y plugins de terceros. También está basado en que su arquitectura fue diseñada antes que creciese su popularidad y depende de una arquitectura imperfecta en cuanto a la retroactividad de su compatibilidad.

Antes de empezar, por favor recuerda que intento ser activo en las discusiones finales. Si tienes cualquier pregunta o sugerencia, te animo a que envíes un comentario o contactes conmigo en Twitter @reifman. Me encantaría conocer tu experiencia con WordPress y PageSpeed.

Mis Resultados Iniciales en PageSpeed

En este tutorial me voy a centrar en la mejora de mi página web personal, JeffReifman.com.

Hace un tiempo, mi PageSpeed estaba en 65 y 64 para Móvil y Sobremesa respectivamente — lo cual no es mucho:

Optimizing PageSpeed - Initial Mobile

Advertencia: aquí tienes el artículo para leer por si sientes curiosidad acerca de los divertidos pantallazos con Russell Wilson.

Optimizing PageSpeed - Initial Desktop

Antes de que nos metamos de lleno con la optimización, hablemos un poco sobre los factores básicos de rendimiento en WordPress.

Rendimiento Básico en WordPress

Existen varios métodos principales para empezar con la optimización de tu sitio WordPress para mejorar su rendimiento y aumentar su PageSpeed.

Elección del Tema

El PageSpeed de varios temas se ve en gran medida afectado por el número y el tamaño de los archivos JavaScript y CSS que emplean, el número de imágenes y su tamaño, y el enfoque con el que han aplicado la implementación para dispositivos móviles, p. ej. hoy en día hablaríamos de web responsiva o multidispositivo.

Si estás buscando en el mercado un tema para WordPress y quieres evaluar su PageSpeed, te sorprenderá saber que los resultados de temas muy populares giran en torno a los 60 y 70s, algunos alcanzan hasta 90s. Aquí tienes algunos artículos vía ColorLib y WPMU, que tratan específicamente la relación entre los temas y PageSpeed. En cualquier caso, esperaba mejores resultados.

Yo he usado en My Site My Way el tema Construct durante varios años. Curiosamente, el servicio de soporte de la compañía cerró recientemente, y no han dado explicación alguna a los usuarios.

MySiteMyWay Discontinued - User Forum Erupts

De cualquier forma, como no van a actualizar más el tema, me pone más fácil la decisión de realizar cambios radicales en su rendimiento para este tutorial sin preocuparme por lidiar con el código en futuras actualizaciones de la compañía. Llegaremos a esto en breve.

Empresa de Alojamiento

El uso de servidores dedicados seguramente conseguirá que mejore el rendimiento si lo comparamos con el más barato alojamiento de servidores virtuales compartidos. En el pasado, escribí sobre cómo instalar WordPress en un proveedor compartido como Digital Ocean. También existe un servicio de gama intermedia como WP Engine, el cual ofrece atención a desarrolladores y ambos comparten servidores dedicados.

La calidad del alojamiento también importa. Muchos proveedores de servicio compartido para WordPress ofrecen un rendimiento inconsistente.

Por ejemplo, yo uso el tema KnowHow tanto en Publishing with WordPress (Publicar con WordPress) alojado en el servidor virtual Digital Ocean, como en Flee the Jungle alojado en WP Engine. Ambas son muy similares en cuanto al peso del contenido, p. ej. volumen de texto e imagen.  El PageSpeed para Publishing with WordPress es de 73 para Móvil y de 88 para Escritorio, mientras que Flee the Jungle alojada en WP Engine es más rápida (78 para Móvil y 91 para Escritorio); el alojamiento gestionado de WP Engine es un poco más rápido que mi alojamiento privado en un servidor compartido.

También he visto un rendimiento bajo con el alojamiento Amazon low-end AWS (Amazon Web Services). Tienes lo que pagas.

Cachear

Gestionar correctamente la cache en WordPress es clave para su rendimiento, y he escrito con regularidad sobre mis favoritos: W3TC y Varnish Cache, p. ej. Optimización de WordPress con Varnish y W· Total Cache.

Google PageSpeed improved with W3 Total Cache

Red de Distribución de Contenidos (CDN, Content Delivery Network)

Otro servicio crítico son los sistema de distribución de contenidos. Anteriormente escribí sobre la Aceleración de Tu Contenido Con KeyCDN para Envato Tuts+ y después me decidí a cambiarme con ellos.

Optimizing PageSpeed - KeyCDN Dashboard

Optimización de Imagen

Reducir las dimensiones y el tamaño de archivo de las imágenes a través del propio WordPress es laborioso, además no es la mejor opción.

Yo normalmente uso Acorn, una herramienta ágil que reduce de forma rápida la escala de las imágenes para la web. Me reí cuando alguien tuiteó recientemente diciendo que ellos habían abierto Photoshop y que por tanto estarían disponibles para llamadas telefónicas un buen rato mientras cargaba—Acorn es ligero y rápido. El modelo de subscripción de Adobe es tarda muchísimo en cargar—lo siento, subscriptores.

También existen plugins para la optimización automatizada como WP-Smush. Recientemente experimenté con el nuevo Optimus de KeyCDN. Además, aquí tienes un sumario de WPMU con los 10 Mejores Plugins de Optimización para Acelerar Tu Sitio WordPress.

Con frecuencia accedo desde mis entradas a imágenes alojadas externamente en Flickr. Por ejemplo, cuando mi artículo sobre el crecimiento del barrio de Seattle originado por Amazon se hizo viral en Slashdot, no existían problemas de rendimiento o de costo de ancho de banda relativos a la cantidad de fotos, ya que Flickr las gestionaba.

Puedes leer la Guía para Optimizar las Imágenes de Google PageSpeed, pero curiosamente he descubierto que la ayuda de Google está excesivamente orientada a las búsquedas (lo cual está bien como recurso) pero no es muy útil para solucionar por ti mismo los problemas. Debe haber unos cuantos partidarios de Photoshop por aquí y algún usuario actual.

Mis Resultados Actualizados de PageSpeed

Como siempre había usado W3TC y Varnish, el cambio a KeyCDN y Optimus aumentó mi PageSpeed hasta 72 para Móvil y 82 en Sobremesa, una mejora considerable partiendo de 65 y 64:

Optimizing PageSpeed - Updated Scores

Resulta interesante ver que las advertencias de Google sobre el cacheo de imágenes no cesa nunca, da igual cuanto la mejores. Para este tutorial, he hecho experimentos optimizando algunos de los problemas identificados que restaban para ver que pasaba. El resultado fue interesante, y te diré aun más sobre ello en breve.

El Reto de la Optimización en PageSpeed

Si ya has hecho los cambios indicados anteriormente, mejorar tu PageSpeed con WordPress requerirá un gran esfuerzo y tiempo.

El Reto de WordPress

Una web estática normalmente tiene un archivo que incluye CSS y JS que puede ser fácilmente minificado y combinado. WordPress es mucho más complicado.

Tanto se crea dinámicamente a través de WordPress—ahem—menos de la arquitectura perfecta. Puede tomar tiempo para encontrar dónde se están creando los archivos, si están en los temas o complementos, y cómo abordar estos problemas. Resulta que cuando tienes siete plugins incluyendo archivos JavaScript y quieres minimizarlos y combinarlos en uno, incluye al mismo tiempo permitir actualizaciones regulares de complementos, es un gran desafío.

Usar la Minificación

Minificado de HTML

Actualizar mis ajustes de minificación de HTML en W3TC resolvió rápidamente las advertencias de PageSpeed al respecto.

Optimizing PageSpeed - Minify HTML with W3TC

Minificación del CSS

Para CSS, tuve que añadir individualmente al Gestor de CSS en W3TC los archivos que PageSpeed me indicaba. W3TC comenzó a minificar mi CSS y a combinar los archivos en uno solo con el fin de incluirlo.

Optimizing PageSpeed - Minify CSS

Esto resolvió los requisitos de minificado CSS solicitados por PageSpeed.

Optimizing PageSpeed - Post HTML and CSS Minify Scores

Esto también redujo el número de archivos CSS notificados por bloquear el renderizado de alrededor de entre seis a cuatro archivos del tema (enumerados en Distribución de CSS Optimizado). 

Optimizing PageSpeed - Render Blocking After Minifying CSS

Los tres archivos restantes pertenecían a directorios de plugins externos a mi tema (los veremos más tarde):

Optimizing PageSpeed - CSS Files from Plugins

Espero que esto te oriente en la conejera en la que se convierte la optimización de PageSpeed con WordPress.

Minificación de JavaScript

Aunque minificar y fusionar CSS es generalmente bastante fácil, JavaScript tiende a fallar mucho cuando intenta hacer esto, creando grandes errores que rompen sitios.

Curiosamente, PageSpeed ahora ofrece descargas comprimidas completas de sus versiones comprimidas de los archivos que no le gusta.

Optimizing PageSpeed - Download optimized files

Enlistó diez de mis archivos JS que quería que arreglara:

Optimizing PageSpeed - Downloaded Files

Para referencia, aquí hay más recursos de minimización de Google PageSpeed para HTML, CSS y JS. También hice uso de Refresh SF, que proporciona acceso web fácil a varias herramientas de compresión.

Comprimir y combinar JavaScript definitivamente puede crear errores, así que tuve que tomar las cosas paso a paso. Utilizando la gestión de archivos JS de W3TC, minifiqué y combiné los siete archivos JS dentro del tema Construct:

Google PageSpeed - W3TC JS File Management

Esto no me permitió abordar los archivos JS de los complementos o los problemas que estaba viendo con un misterioso archivo de base.js hospedado externamente. Vamos a pasar a los problemas de Render Blocking y luego regresar a JS minificación después.

Eliminación del bloqueo de procesamiento

Si tiene una gran variedad de archivos que deben cargarse para estilo (CSS) y activar (JS) la funcionalidad de su página web, la mayoría de los navegadores se ralentizarán después de que se soliciten cuatro recursos en paralelo.

He aquí un ejemplo de la queja de bloqueo de renderización CSS en PageSpeed:

Google Page Speed - CSS Render Blocking

Mientras W3TC había combinado muchos de ellos en su include.c46b63.css, los tres siguientes fueron de mis plugins.

El blogger Justin Tadlock ofreció una guía explicando cómo pedir a WordPress que no cargara los archivos CSS que mis complementos habían enlistado para cargar. La respuesta es anular su registro y luego cargar un archivo combinado por su cuenta.

Aquí está mi plugin de la Tabla de Contenidos que enlaza sus archivos JS y CSS:

Siguiendo la sugerencia de Tadlock, he cancelado el registro de mi complemento en las functions.php de mi tema, primero el CSS, tienes que encontrar las referencias utilizadas por el desarrollador de plugins:

Creé manualmente un conjunto de archivos CSS con esas tres hojas de estilo de plugin. Entonces, le pedí a W3TC que minificara y combinara ese archivo en su propia hoja de estilo:

Google PageSpeed - W3TC Combine CSS

Hay un problema importante aquí en que cuando actualizo mis complementos, es posible que deba actualizar este archivo CSS combinado y sus archivos JS que lo acompañan.

Esta es una entrada del blog con algunos otros enfoques que puede s utilizar para estos desafíos.

Usando el enfoque de Tadlock, esto es lo que parecía el bloqueo de renderizado PageSpeed después:

Optimizing PageSpeed

Seguí los mismos pasos para los archivos JS, sólo un poco más cuidadosamente. Poco a poco, la queja de mi PageSpeed JS para mi sitio se hizo bastante menor:

Optimizing PageSpeed - JavaScript Minify Results

Sin embargo, como se puede ver a continuación, también se quejaba de los problemas de caché del navegador con archivos JS en los que no podía encontrar vínculos en mi base de código, como ad_status.js de Doubleclick.

Google PageSpeed - Leverage Browser Caching

Eliminación del reproductor de YouTube inscrustado antiguo

Eventualmente, me di cuenta de que tanto el problema de minificación JS y este problema de almacenamiento en caché estaban relacionados con mi uso de un reproductor de vídeo externo de YouTube.

Aunque tuve curiosidad de probar una pequeña corrección sugerida aquí para evitar que el video se cargue sin la acción del usuario, decidí eliminar el video de mi presentación de página principal.

Es probable que la forma en que mi tema Construir archivos incrustados de YouTube era una solución antigua. La compatibilidad con HTML5 de YouTube puede funcionar mucho mejor ahora. Sin embargo, es curioso cómo un servicio de Google impacta en la puntuación de rendimiento de otro servicio de Google.

Eliminar una característica de mi página de inicio que incluyó un video de YouTube resolvió algunos problemas:

Optimizing PageSpeed - Troublesome YouTube on my home page

Puesto que no quiero que te pierdas de ver mi mejor mitad antes de que se corrompió por WordPress, voy a incluir el video aquí. Solía ser un buen tipo.

Esto es lo que estaba sucediendo:

  • El archivo de base.js s.ytimg.com alojado externamente que quería comprimido fue generado por este reproductor de vídeo de YouTube.
  • Y el static.doubleclick.net/instream/ad_status.js también lo era. Tomó un rato para seguir la localización de este archivo. La consola de desarrolladores de Safari me ayudó a ver tanto base.js como ad_status.js dentro del marco de YouTube (tan profundo en el agujero de conejo de mejora de PageSpeed era ahora que Alice se presentó a mí):
Optimizing PageSpeed - Safari Developer Console

Una vez que se hicieron los cambios JS anteriores y se eliminó el video, el problema de minificación de JavaScript resolvió para mi maestro PageSpeed:

Optimizing PageSpeed - Minify JavaScript Resolved

El error de caché del navegador con Doubleclick mostrado a continuación también desapareció.

Uso del almacenamiento en caché del navegador

Ahora, en realidad solo necesitaba almacenar en caché gpt.js y ga.js, dos servicios de Google alojados externamente:

Optimizing PageSpeed

Esto resultó ser un gran obstáculo y requirió mucha complejidad para resolver completamente estos problemas. La mejor solución es alojar localmente una copia de los scripts de Google para Analytics y DFP y utilizar scripts cron para actualizarlos regularmente en su servidor. Alice empezó a aburrirse conmigo, espero que aun estes al mismo ritmo.

Miré otros temas que utilizo con el complemento de Google Analytics (Construct tiene la configuración de Analytics) y tampoco lo abordaron.

Así, hice copias locales de los scripts de Google Analytics y Google DFP, y poco después, el caché de mi navegador se resolvió en PageSpeed:

Optimizing PageSpeed - Local use of Google Scripts

Aquí hay más información de Google en la caché del navegador, de nuevo un recurso técnico muy profundo sin mucha orientación para los administradores de WordPress.

Google podría proporcionar agrupaciones comunes de sus archivos JavaScript populares minified y combinado para mejorar el apoyo a PageSpeed de los editores. También ayudaría si no cargaran sus archivos de forma individual y oscura en los scripts.

Vamos a regresar brevemente a las reclamaciones de tamaño de imagen PageSpeed antes de terminar.

Volver a la optimización de imagen

Las sugerencias de imagen de Google PageSpeed pueden debilitar la usabilidad de su sitio. Aquí hay un ejemplo, una imagen destacada que recibí en mi página de inicio.

Para que mis publicaciones aparezcan en Facebook con una imagen en miniatura, la red social requiere dimensiones mínimas de 200 píxeles en su lado más corto. Mi versión es 281 x 200 (se muestra aquí ligeramente ajustado para Tuts + requisitos):

Jeff Reifman Featured Image on Home Page

Y, aquí está la versión proporcionada por PageSpeed en su descarga comprimida:

Google Page Speed Recommended Jeff Reifman Featured Image on Home Page

Usted puede ver que la calidad es aún peor, pero lo más importante de PageSpeed quiere que reducir la imagen a una dimensión que Facebook no aceptaría mostrar en sus publicaciones.

En última instancia, decidí dejar mi sitio con un puñado de quejas de optimización de la imagen PageSpeed, bajando mis puntuaciones.

Para concluir

Después de todo este trabajo, ¿dónde terminó mi sitio?

Mis puntuaciones finales de PageSpeed

Mobile PageSpeed

Las puntuaciones finales de PageSpeed incluyeron Mobile 70, mostrando algunas de las quejas restantes a continuación:

Optimizing PageSpeed - Final Scores Mobile

Aquí están las optimizaciones de imagen restantes:

Optimizing PageSpeed - Final Scores Mobile with Image issues

Y aquí está un resumen de todas las reglas aprobadas:

Optimizing PageSpeed - Final Scores Passed Rules

Además, aquí están las puntuaciones UX finales. La mayoría de los sitios no tienen grandes problemas con estos, así que no les trate hoy:

Optimizing PageSpeed

Escritorio Page Speed

La puntuación final de escritorio fue de 86, no está mal:

Google PageSpeed Final Desktop Score

JavaScript es mezquino. Nunca fui capaz de minificar con éxito y combinar los dos últimos archivos en el primero. Incluso dejarlos sin comprimir nunca funcionó. Trabajar con temas y complementos es difícil. Habría requerido varios días de trabajo dedicado para resolver esto.

Aquí están sus quejas de tamaño de archivo de imagen:

Google PageSpeed Final Desktop Score Image Complaints

En última instancia, la optimización de mi PageSpeed tomó mucho tiempo y esfuerzo y dejó mi sitio vulnerable a futuros complementos y actualizaciones de scripts de Google. Mucho de este trabajo es bastante confuso, detallista y lento. También es un poco enloquecedor y mente-entumecedor. Gracias Google.

La PageSpeed de otros sitios importantes

PageSpeed no lo es todo. El contenido también es importante. Aquí hay algunos sitios bien conocidos y su PageSpeed. Los resultados te sorprenderán.

Daring Fireball de John Gruber

Daring Fireball (DF) es uno de los blogs de contenidos más rápidos. Promueve a los anunciantes de una manera mínima. Las páginas funcionan ligeras y rápidas. CMS de Gruber es una versión personalizada de Movable Type. Las puntuaciones son sólo un poco mejores que mi sitio. DF también genera una tonelada de ingresos con un mínimo de publicidad.

Daring Fireball PageSpeed

The New York Times

Obviamente, una importante organización de noticias, tienen terribles resultados de PageSpeed:

PageSpeed for New York Times

The Seattle Times

Sorprendentemente, nuestro trapo local con su anuncio horrible y modelo de rebote de suscripción es mucho peor:

Google PageSpeed - The Seattle Times

B&H Photo

Un popular sitio de comercio electrónico, B & H Photo, tiene una puntuación terrible móvil y un puntaje de escritorio justo debajo de la mía:

PageSpeed BH Photo

Amazon

Usted puede ser que haya oído hablar de esta compañía en mi ensayo reciente cómo hacer los sitios de WordPress diferentes por la geografía—venden muchas cosas en línea. Mis puntuaciones de PageSpeed son significativamente más altas que las suyas:

PageSpeed Amazon

¿Que sigue?

En el futuro, estudiaré algunas mejoras adicionales para mejorar el PageSpeed ​​de mi sitio:

  • Migración a un nuevo tema de WordPress. Principalmente, estoy buscando un diseño más limpio, de mayor rendimiento y respuesta con rápidas PageSpeeds.
  • Actualización de mi servidor a PHP7. La actualización promete casi 2x mejoras en el rendimiento. No es simple actualizar antes de la versión de Ubuntu, pero no es demasiado difícil.
  • Actualizar mi servidor a Varnish4. La actualización requiere un cierto reelaboración de los archivos de configuración, y no estoy seguro de su compatibilidad con W3 Total Cache, pero estoy dispuesto a darle una oportunidad.
  • Revise mi PageSpeed ​​en todas las páginas de mi sitio, no solo en la página principal.

Si no migro temas en breve, tendré que implementar ese script cron para sincronizar mis scripts de Google alojados automáticamente para Analytics y DFP y averiguar cómo supervisar las actualizaciones de complemento para los cambios de JS y CSS. Yo podría tener que revertir estas ganancias específicas de PageSpeed, honestamente.

Si tiene alguna pregunta, envíela a continuación. O bien, puede ponerse en contacto conmigo en Twitter @reifman. Por favor, echa un vistazo a mi página Envato Tuts+ instructor para ver otros tutoriales que he escrito, como mi serie startup (Construyendo su Startup con PHP).

Enlaces relacionados

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.