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:
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.
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.
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.
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.
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:
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.
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.
Esto resolvió los requisitos de minificado CSS solicitados por PageSpeed.
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).
Los tres archivos restantes pertenecían a directorios de plugins externos a mi tema (los veremos más tarde):
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.
Enlistó diez de mis archivos JS que quería que arreglara:
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:
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:
Mientras W3TC había combinado muchos de ellos en su include.c46b63.css, los tres siguientes fueron de mis plugins.
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:
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.
Usando el enfoque de Tadlock, esto es lo
que parecía el bloqueo de renderizado PageSpeed después:
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:
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.
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.
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:
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.
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í):
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:
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:
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:
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):
Y, aquí está la versión proporcionada por PageSpeed en su descarga comprimida:
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:
Aquí están las optimizaciones de imagen restantes:
Y aquí está un resumen de todas las reglas aprobadas:
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:
Escritorio Page Speed
La puntuación final de escritorio fue de 86, no está mal:
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:
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.
The New York Times
Obviamente, una importante organización de noticias, tienen terribles resultados de PageSpeed:
The Seattle Times
Sorprendentemente, nuestro trapo local con su anuncio horrible y modelo de rebote de suscripción es mucho peor:
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:
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.
Jeff Reifman is a experienced technology consultant, former Microsoft Group Program Manager, writer, activist and yogi. He's the founder of Meeting Planner and author of the Envato Tuts+ series, Building Your Startup. He enjoys travel, photography and snowboarding in his free time.
