Bienvenidos a la segunda parte de nuestra serie sobre Google PageSpeed. En el primer episodio, optimicé el PageSpeed del tema de mi sitio, Instalación MySiteMyWay's. He conseguido llegar a 70 en Móvil y 86 en Escritorio.
En cualquier caso, con el cierre de MySite, he elegido un nuevo tema y llegado a un PageSpeed del 100 tanto para Móvil como para Escritorio. Me llevó unas 12 horas de esfuerzo extra para lograrlo. Ahora, el rendimiento de mi página we es uno de los sitios WordPress más rápidos que he visto desde hace tiempo.echa un vistazo. La navegación es casi instantánea.
En este tutorial, te guiaré para que consigas esto y te enseñaré todo lo que he aprendido sobre WordPress y Google PageSpeed. Trabajé durante gran parte de la jornada en ello, y pensé que podría tener resultados superiores a 90. Me sorprendí un poco cuando me topé con un 100 para Escritorio—aún quedaban algunos detalles para maximizar en Móvil.
Para aquellos que no lo sepan, Google PageSpeed es una herramienta gratuita que analiza el rendimiento y usabilidad de tu página web tanto para la plataforma Móvil como para el ordenador de escritorio. Es muy importante ya que Google lo usa para determinar elementos clave de nuestra clasificación SEO, p. ej. la prioridad con la que apareceremos en los resultados de búsqueda, más arriba o abajo del listado.
Al final, la optimización de mi PageSpeed me llevó mucho tiempo y esfuerzo y dejé mi web vulnerable con respecto a futuras actualizaciones de scripts de plugins y de Google. Gran parte de este trabajo es bastante confuso, enfocado en pequeños detalles y necesita muchas horas de trabajo. Además es un poco soporífero y como para volverse loco. Gracias, Google.
Una web estática, normalmente consta de un archivo que incluye su CSS y JS respectivo, el cual puede ser minificado y combinado facilmente. WordPress es mucho más complicado. Gran parte de una web realizada con WordPress se crea dinámicamente a través de la arquitectura de este, algo que no es ni mucho menos perfecto.
Puede llevar tiempo saber que archivos se crean, si estos pertenecen a los temas o a los plugins, y cómo acercarse a estos problemas. Parece ser que cuando tienes siete plugins que incluyen archivos JavaScript y deseas minimizar y combinar estos últimos en un único archivo JavaScript, mientras al mismo tiempo quieres permitir la actualización de los plugins, el resultado es un desafío en el ámbito de WordPress en el cual los temas y plugins están cambiando constantemente.
Créditos de imagen: Mi foto del Museo Picasso en París. Ahora podría llamarse "Desarrollador Desesperado Enfrentándose al PageSpeed Móvil 55 / Escritorio 62"
Dicho esto, permíteme animarte mostrándote cómo lo hice yo (no tienes nada interesante que hacer hoy, ¿verdad?). Recuerda, las necesidades de tu web pueden diferir de las de la mía un poco.
Antes de que empecemos, por favor no olvides, que intento participar en las conversaciones al final del artículo. Si tienes cualquier pregunta o sugerencia sobre el tema, por favor envía tu comentario abajo o contáctame vía Twitter reifman. Me gustaría saber cual ha sido tu experiencia con WordPress y PageSpeed.
Los Pasos Fundacionales para un PageSpeed de 100
Seleccionar un Nuevo Tema
Si estás buscando en el mercado un nuevo tema para WordPress y quieres evaluar su PageSpeed, te sorprendería saber que los resultados de temas muy conocidos están comprendidos entre 60s y 70s, e incluso llegan a los 90s. Aquí tienes algunos artículos que analizan temas y PageSpeed a través de ColorLib y WPMU. En cualquier caso, esperaba resultados más altos.
Simplemente como ejemplo de las expectativas en la industria, la web de The New York Times a mi me da un resultado de 53/55, muy inferior a 100.
El PageSpeed de varios temas se ve afectado en gran medida debido a la cantidad y peso de los archivos JavaScript y CSS que usan, el número de imágenes que emplean y su tamaño, pero también debido a su enfoque a la hora de implementar la compatibilidad móvil, p. ej. lo que actualmente denominamos web responsiva o "responsive". Algunos creadores no parece que se fijen en el PageSpeed mientras construyen.
Lo principal fue por su velocidad promedio. Los resultados de la demo de Medium desde su servidor son de 74 para Móvil y 89 para Escritorio. Aunque esto era solo un poco mejor de lo que yo ya había alcanzado maximizando Construct, era un tema más moderno y aun quedaban muchos pasos de optimización que podía intentar. Esperaba llegar a un PageSpeed mayor que 80s o inferior a 90s.
Además, dado el aumento de lectores en dispositivos móviles, quería evitar depender de columnas laterales—especialmente para la ubicación de anuncios (espero escribir sobre ello en mi nuevas fuentes ingresos en nuestracontinuación de la serie sobre Google DFP). El tema Medium hace un buen trabajo al transformar la columna izquierda en un menú responsivo y ocultar la derecha.
PageSpeed Inicial de Medium
Aquí tenemos el PageSpeed inicial de la demo de Medium (el alojamiento de las demos nunca está extremadamente optimizado). Fue realmente alentador ver que tenía muchos problemas no resueltos, ya que mostraba que era mejor que mi tema Construct optimizado incluso antes de haber aplicado ningún esfuerzo ni ninguna técnica de las que conozco para maximizar sus resultados.
Aquí están algunos de los problemas:
Y más:
Y los retos en cuanto a experiencia de usuario, los cuales estaban más localizados:
Finalmente, aquí tenemos su resultado para Escritorio:
No olvides que cambiar de tema puede ser complicado. En mi caso particular, reemplazar, eliminar y actualizar los shortcodes inherentes al tema Construct me tomó la mayor parte del tiempo, y aun no he acabado del todo, p. ej. capitales, variaciones de , botones, pestañas y menús de navegación basados en páginas. Mi objetivo de alcanzar los 100 me empujó hacia adelante sin descanso. Cómo Realizar una Búsqueda y Reempalzo Masivos en WordPress ofrece algunas soluciones útiles para encontrar y reemplazar shortcodes.
Aunque este tutorial no te guiará a través de los pasos exactos que aumenten tu PageSpeed a 100, sí te guiará sobre todas las posibles soluciones y te ayudará a identificar los obstáculos habituales. Existe otro recurso común que compartiré al final.
Obstáculos del Rendimiento en WordPress
Contacté con ArrayThemes hace poco para hablar sobre el rendimiento de 100 del tema Medium. Me enviaron un excelente respuesta:
El test PageSpeed de optimización debería considerarse como aproximación... nuestra demo está preparada para no cachear, no necesitamos cache en nuestras demos... las sugerencias de PageSpeed no son completamente acertadas o muestras del rendimiento de un tema. Ya que esto dependerá absolutamente de tus ajustes, tu servidor, tu configuración de cache y otras optimizaciones que decidas realizar.
Constituye un punto ideal como inicio para observar los elementos estructurales comunes del rendimiento de WordPress. Todas las áreas de rendimiento de abajo, están orientadas a mejorar los resultados de PageSpeed, no completamente pero sí a sentar unas bases.
Cachear
Establecer la cache en WordPress es un paso crítico para su rendimiento, y ya he escrito de forma regular sobre mis favoritos: W3TC y Vanish Cache, p. ej. Optimizando WordPress con Vanish y W3 Total Cache.
Parece ser que existe un puñado de plugins diseñados para ayudarte con el reto de establecer unos ajustes de cache eficientes. Aquí tienes dos de los mejores que he probado:
Minit: Un plugin de WordPress para combinar archivos CSS y JavaScript.
Dependency Minification: Concatena y minifica automáticamente cualquier script y hoja de estilos vinculados a través del sistema de dependencia estándar.
Crédito de imagen: WordPress Tavern
Ambos son de gran ayuda, pero ninguno elimina en mi opinión las barreras relativas a PageSpeed, como la incrustación de CSS dentro de la etiqueta <head> para evitar problemas con PageSpeed; en otras palabras, este plugin no te hará alcanzar por sí mismo un PageSpeed de 100. Creo que Dependency Minification es eficiente y ayuda, pero carece de flexibilidad, lo que me ha hecho descartarlo.
Finalmente, vuelvo a W3 Total Cache y encuentro poderosas nuevas formas de exprimirlo para mejorar el rendimiento. No es perfecto y evidentemente tiene algunos fallos en UX, a mi me funciona suficientemente bien como para encontrar mi camino para alcanzar un PageSpeed de 100.
Al final, elijo solo un nuevo plugin que me hizo sencilla la eliminar los problemas de PageSpeed con Disqus—veremos esto más adelante.
Redes de Distribución de Contenido (CDN)
Otro servicio crítico son las redes de distribución de contenidos (Content Delivery Networks, CDN). Anteriormente escribí sobre cómo Acelerar Tu Distribución de Contenidos Con KeyCDN en Envato Tuts+ y después decidí convertirme en uno de sus clientes.
Al final, existe una gran variedad de CDNs entre los que puedes elegir, como CloudFrare y RackSpace por nombrar algunos.
Optimización de Imágenes
Recientemente, comencé a experimentar con el nuevo Optimus image optimization service y plugin para WordPress de KeyCDN. Existe una pequeña posibilidad de que sea procesado por robots construidos con viejos Apple Lisas y Macs:
Funciona bien, pero otra alternativa popular es WP-Smush, un plugin más antiguo con más de 300,000 usuarios.
Eliminar el Bloqueo de Renderizado
Si tienes una gran variedad de archivos que necesitan ser cargados para dar estilo (CSS) y activar (JS) la funcionalidad de tu página web, la mayoría de los navegadores se ralentizarán tras la solicitud de cuatro recursos en paralelo.
Aquí tienes un ejemplo de reclamación en PageSpeed sobre el bloqueo del renderizado de CSS:
Esto puede constituir un elemento de WordPress difícil de eliminar debido a la arquitectura del tema y del plugin. Bienvenido de nuevo a ello.
¿Cuáles Fueron los Pasos Que Impulsaron Definitivamente Mi Web a 100?
Enfoques de Optimización Orientados
Si ya has realizado casi todo lo elemental que acabamos de ver, mejorando tu PageSpeed con WordPress, te habrás dado cuenta de que requiere gran esfuerzo y mucho tiempo.
Vayamos paso a paso a través de las áreas problemáticas identificadas y las formas en las que lo resolví. La verdad es que experimentación bastante con diferentes herramientas y enfoques. Habitualmente abandonaba una de las formas de abordarlo y volvía a otra. Mi solución resultó ser más bien un rompecabezas bien gestionado de diferentes soluciones. El camino no fue directo Yoda.
Minificado de HTML, JavaScript y CSS
Por ejemplo, aquí tienes como minificar HTML desde W3 Total Cache:
Agrupar JavaScipt al Final de la Página
Igualmente, es sencillo minimizar JavaScript con W3 Total Cache. Observa en el ejemplo de abajo que estoy indicando a W3TC que no incruste el archivo comprimido en <head> sino inmediatamente antes de </body>. Retrasar la carga de JavaScript podría mejorar tu resultado en PageSpeed.
Minimizar el CSS Combinado De Los Temas y Plugins
Debido a que los temas y plugins emplean tanto JavaScript como CSS, minimizarlos y combinarlos en un solo archivo implica un poco de trabajo (además, esto ni siquiera es suficiente para PageSpeed, pero lo discutiremos más adelante).
Para evitar que los plugins carguen su propio CSS e indicar a W3TC que cargue las versiones comprimidas y combinadas, necesitas encontrar el archivo del plugin que maneja el CSS (diferente a los nombres de archivo) y añadir código a tu tema para que interrumpa las instrucciones de carga del plugin Después, introduce junto al resto, la ruta a cada archivo CSS dentro del cuadro de diálogo anterior en W3TC.
Siguiendo las sugerencias de Tadlock, he eliminado los registros de lo que mis plugins incluían a través del functions.php de mi tema, empezando por el CSS—tendrás que encontrarlos con ayuda de las referencias del desarrollador del plugin:
Manualmente cree un archivo CSS combinando las hojas de estilo de estos tres plugins. Después, le indiqué a W3TC que lo minificara y combinase junto con su mega-hoja de estilos tal y como se muestra arriba.
Optimizar la Carga de CSS para PageSpeed
W3TC podría combinar todos los archivos de mi tema y mis plugins, pero aun así a PageSpeed no le gusta encontrar ni siquiera un CSS incluido (mucho mejor para las buenas practicas en el desarrollo de HTML):
Finalmente cargué nueve archivos CSS (solo muestro siete quí abajo). Para empezar, tienes que localizar los manejadores de CSS del plugin y eliminar sus registros en el tema tal y como hemos descrito arriba. Luego, añadirlos todos en W3TC.
Aunque hay varias formas de obtener una versión minificada de todos ellos, yo los cogí del archivo comprimido de W3TC. Eliminé todas las cadenas de argumentos de cacheado, p. ej. ?cbe3w2, con un "búscar y reemplazar" en TextEdit. Todavía soy un leal usuario de TextMate, pero realmente tuve bastante retrasos y paradas en cualquier momento que intentaba minificar archivos CSS. Así que TextEditor me ayudó a editar estos archivos individualmente. Mis disculpas a los puristas, todavía no me he mudado a Sublime.
Aunque si me funcionó pegando mi CSS minificado a mi encabezado, más tarde necesité cambiarlo para obtener dinámicamente los contenidos de los archivos CSS y reflejarlos donde les correspondía.
Cuando añadí otro plugin para compartir en social media, la solución de pegar ya no me funcionó y tuve que separar los archivos con el mecanismo que acabo de describir. Esto también proporciona mayor flexibilidad en el futuro. Google PageSpeed no lo tiene en consideración, y mi configuración para la cache en Varnish concilia cualquier disminución de la velocidad de carga debida a la inclusión de dos archivos.
Finalmente, configuré todos mis archivos CSS en W3TC, realicé copias de los archivos comprimidos, y luego desactivé esta característica de incorporación:
Un inconveniente de W3TC es que continuamente muestra un enervante mensaje de error aunque sea debido a que lo estés usando de forma no convencional deliberadamente.
Cuando mueves archivos CSS fuera de los directorios de los plugins, asegúrate de que indicas adecuadamente la ruta a las imágenes y demás para que operen desde el directorio raíz de tu sitio. Me he visto en muchas situaciones en las que las imágenes no cargaban, hasta que supe donde tenía que resolverlo. Compartiré un ejemplo más abajo en la sección Solución de Problemas.
Cachear Scripts Externos en el Navegador
Resulta gracioso que Google PageSpeed se queje si cargas sus propias librerías JavaScript de forma externa. He recibido informes negativos por scripts externos procedentes de Flickr, Disqus y Google Analytics:
Esto resultó ser un gran obstáculo y resolver estos problemas requirió mucho tiempo y afrontar complejidades.
Eliminar los Problemas con la Integración de Flickr
Para empezar, recientemente había vuelto de un viaje a la India y coloqué una entrada con fotos incrustadas desde Flickr en la página de inicio. Mi tema Medium desplaza rápidamente a través de un número de entradas, así que PageSpeed se quejó sobre de esto.
Tras observar la queja de PageSpeed sobre las imágenes almacenadas en Flickr y sobre los tamaños de las imágenes incrustadas (en varias tamaños de pixel) y ver estos deméritos de JavaScript externos, regresé a las imágenes optimizadas y alojadas en el servidor privado de mi sitio. Todavía enlazaban a mi actual álbum sobre la India de Flickr.
Este es un buen ejemplo de cómo al tratar de utilizar un servicio de terceros potente con el simple objetivo de incrustrar fotos matas tu puntuación PageSpeed. Flickr no ha hecho un trabajo óptimo para ayudar a los usuarios de WordPress a solucionarlo. Sólo como ejemplo, deberían:
Ofrecermos tamaños incrustados que satisfaciese la optimización de imagen de PageSpeed (posiblemente en forma de opciones separadas sobre calidad de la imagen para la exportación desde Flickr de lo que pudiera poner en peligro tu PageSpeed)
hacer publico el código JavaScript para facilitar la integración en WordPress y la combinación de archivos W3TC
Advierte los cambios en las rutas hacia mis copias locales de los scripts. Luego, hice copias locales de los scripts de Google Analytics y Google DFP, y poco después el cacheado de mi navegador se resolvió en PageSpeed excepto para Disqus.
Resolver los Problemas de Carga del Plugin Disqus
No sé exactamente si es por seguridad o para dar soporte a múltiples plataformas o pura "inteligencia", pero Disqus y otros proveedores como Flickr parecen ocultar los archivos que cargan junto a otros. Esto hace que la optimización para PageSpeed sea mucho más difícil y a menudo insoluble.
Es cierto que pasé dos o tres horas tratando de encontrar enfoques diferentes para la optimización del plugin Disqus, nada me dio resultado.
Al final, desinstalé el plugin e instalé Disqus Conditional Load (Carga Lógica para Disqus):
Aunque esto ha significado hacer un montón de cosas, también me ha permitido optimizar PageSpeed con instalación.
De repente, los deméritos en el aviso Aprovechamiento del Cacheado del Navegador en Page Speed desaparecieron. ¡Felicitaciones a DCL!
Fijar los Objetivos del Grifo
PageSpeed se queja a menudo de los enlaces situados con demasiada proximidad unos de otros en los dispositivos móviles. He experimentado con algunos enfoques y al final opté por dejar de mostrar las etiquetas en los dispositivos móviles.
Si dedico más tiempo, probablemente puedo mejorar su UX y mejorar los resultados en PageSpeed.
Pérdida de Imágenes Procedentes de Archivos CSS Comprimidos y Combinados
El Plugin ArrayToolkit, que muestra iconos de seguimiento en la barra lateral derecha, a mí me dejó de funcionar. Me llevó algún tiempo averiguar que rutas debían ser codificadas de nuevo con rutas absolutas para que volviese a funcionar.
Al final, las encontré y reemplacé dichas rutas con las rutas relativas corregidas al directorio original del plugin:
Todavía tengo un problema que necesito resolver. Las nuevas pestañas de mi plugin (Construct tiene pestañas incluidas) dejó de funcionar en el camino. Simplemente necesito algún tiempo de depuración, pero parece ser bastante fácil de resolver.
Elegir el Mejor Minificador
Experimenté con el Compresor de YUI junto con W3C para comprimir mis archivos JavaSript y CSS. En lugar de conducirme a un aumento de la velocidad, todo se rompió.
Si estás interesado en averiguar qué hice mal y puedes instalar Java y YUICompressor de la siguiente forma:
Por favor publícalo en los comentarios si sabes como hacer que funcione correctamente en WordPress.
Y Para Concluir
Después de esta segunda ronda de trabajo en el nuevo tema, todo ha salido mejor de lo que esperaba. Nunca estuve seguro de alcanzar mi objetivo óptimo.
Mi Puntuación Final en PageSpeed
Conseguí una puntuación de 100 en PageSpeed tanto para dispositivos de escritorio y como para los móviles. Y lo que es aún más destacable, mi sitio funcionaba super rápido, el blog más rápido que he tenido nunca. Tengo una gran curiosidad por ver cómo las entrandas de tráfico procedente de búsquedas y la reacción en la actividad de los lectores a los buenos resultados en la velocidad y el rendimiento durante los próximos meses.
Estas son mis puntuaciones finales en PageSpeed, primero en móviles:
Y ahora para Ordenadores de Escritorio:
Primero alcancé un 100 para Escritorio y después tuve que volver y hacer algunos ajustes (abordar los enlaces pulsables) para alcanzar el mismo resultado en el móvil.
Y otra de nuevo, la velocidad alcanzada en el sitio merece una visita rápida. Si conoces otros sitios web comerciales que funcionen con una puntuación en PageSpeed del 100, por favor, compartirlos en la sección de comentarios. Me encantará echarles un vistazo.
Como ejemplo sobre como cambia el SEO, mi popular ensayo sobre Las Citas saltó al la tercera clasificación en los resultados para móvil bajo el titular "Seattle Data" (sin embargo, no ocurrió igual para escritorio). Esto me dice que tal vez historias en sitios más importantes compitiendo con él tienen puntuaciones en PageSpeeds bajas para dispositivos móviles, porque no es fácil.
El Reto del Mantenimiento Futuro
Para maximizar el PageSpeed de mi sitio, tuve que hacer varios ajustes en mi tema, los cuales ahora crean dependencias cuando se realizan cambios con los scripts externos y las actualizaciones del tema y de los plugins. Ahora que he terminado con mi objetivo a corto plazo, tengo trabajo que hacer para organizar mis sistemas para conseguir hacerlo de forma más fácil.
También tengo que mejorar el seguimiento de las actualizaciones del tema Medium e integrar los cambios. Crear un tema hijo para mis cambios también podría hacer más facil este proceso. Sobre todo buscaré los cambios que sobreescriban los míos, actualizaciones (o adiciones) de JavaScript y CSS.
Gestionar las Actualizaciones de los Plugins
Del mismo modo, cuando se actualizan los plugins, necesitaré buscar los mismos tipos de cambios. Me podría ayudar a organizar mejor el uso que hago de GitHub con plugins de WordPress. Ya lo uso para mi tema.
Automatización
Quiero pasar algún tiempo escribiendo scripts para hacer un seguimiento de los archivos JavaScript y CSS que se están usando con el tema actualizado y los plugins, descargarlos a mi servidor, minimizarlos y empaquetar los archivos adecuados a vincular o incluir.
SSL
Finalmente, una de mis sorpresas es que SSL no es necesaria para lograr un PageSpeed de 100. Esto de algún modo tiene sentido, pero desvela el hecho de que una variedad de componentes diferentes podría afectar tu ranking en las búsqueda de Google. Escribiré sobre la implementación de Let's Encrypt's free SSL con WordPress próximamente.
¿Qué Será lo Próximo?
Si has disfrutado esto pero quieres leer un tutorial más general que no profundice tanto en detalles que podrían o no aplicarse a tu caso, el artículo de KeyCDN Puntuar 100/100 en Google PageSpeed con WordPress es una excelente pieza de lectura complementaria. También he escrito una pieza patrocinada sobre su CDN en Envato Tuts + (Acelera la Entrega de Tu Contenido con KeyCDN) y continué con ellos como cliente.
Mientras tanto, si estás buscando otras utilidades que te ayuden a construir un conjunto creciente de herramientas para WordPress o código para estudiar y mejorar tus conocimientos sobre WordPress, no te olvides de revisar lo que tenemos disponible en Envato Market.
En el futuro, voy a buscar algunas mejoras más para aumentar el rendimiento general de mi sitio. Entre estas se incluyen:
Una revisión del PageSpeed individual de mis entradas más populares como el Explicación Sencilla del Fraude en el Marketplace de Amazon (actualmente 97), para asegurar que se están ejecutando con una valoración de 100. Como en este ejemplo, a menudo simplemente se incrusta el tamaño(s) de la/las imagen/imágenes que puedan perturbar a PageSpeed.
Mejorar la gestión de mi tema y mis plugins para mantener estas optimizaciones lo más fácilmente posibles conforme llegan actualizaciones, por ejemplo, haciendo un seguimiento de los cambios en los archivos JS y CSS en las actualizaciones, haciendo copias periódicas de los archivos JS externos como las actualizaciones de Analytics, volver a comprimir los archivos actualizados, etc.
Actualizar mi servidor a PHP7. La actualización promete casi la duplicación de las mejoras en el rendimiento. No es sencillo actualizar antes del lanzamiento del paquete Ubuntu, pero no es demasiado difícil.
Actualizar mi servidor a Varnish4. La actualización requiere realizar algo de trabajo en los archivos de configuración y no estoy seguro de que la optimización del rendimiento y su compatibilidad con W3 Total Cache, pero estoy dispuesto a darle una oportunidad.
ExplorarCacheEnabler de KeyCDNpara servir las imágenes Webp de forma más eficiente a los usuarios de Chrome. El tamaño de los archivos WebP es significativamente inferior pero aún no es admitido por Safari. Estoy bastante emocionado en las mejoras sobre la experiencia del usuario que se puedan conseguir con esto.
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.
