Share
Lo que vas a crearGoogle PageSpeed es una herramienta gratuita que evalúa el rendimiento y la facilidad de uso de su sitio web para plataformas móviles y de escritorio. Es muy importante porque Google lo usa para determinar los elementos clave de nuestro ranking de SEO, es decir, qué tan alto estamos en sus resultados de búsqueda.
Si desea obtener más información sobre los beneficios de una mayor velocidad del sitio, lea Por qué la optimización de la velocidad del sitio debería ser parte de su estrategia de SEO, que destaca: "... varios estudios de casos han mostrado que las páginas de carga más rápidas se correlacionan con mayores ingresos".
En este tutorial, lo guiaré a través de algunos enfoques técnicos para optimizar el PageSpeed de su sitio web de WordPress. Si bien los cambios básicos pueden ser bastante simples y fáciles, las actualizaciones más completas pueden ser bastante desafiantes.
Curiosamente, los sitios web personalizados pueden ser más fáciles de optimizar que los sitios de WordPress, debido al uso extensivo del marco de temas y complementos de terceros. También se basa en una arquitectura que fue diseñada antes de su popularidad y se basa en una arquitectura imperfecta para la compatibilidad con versiones anteriores.
Antes de comenzar, recuerde que trato de participar en las discusiones a continuación. Si tiene alguna pregunta o sugerencia sobre un tema, publique un comentario a continuación o contácteme en Twitter @reifman. Estoy interesado en su experiencia con WordPress y PageSpeed.
Para este tutorial, me centraré en mejorar mi sitio web personal, JeffReifman.com.
Hace un tiempo, mi PageSpeed era Mobile 65 y Desktop 64, no muy bueno:
Nota: aquí está el artículo para leer si tiene curiosidad por la divertida captura de pantalla móvil con Russell Wilson.
Antes de comenzar a hacer optimizaciones, hablemos sobre algunos de los factores básicos de rendimiento de WordPress.
Hay algunas formas principales de comenzar a optimizar su sitio de WordPress para obtener un mejor rendimiento y aumentar la velocidad de la página..
El PageSpeed de varios temas se ve afectado en gran medida por la cantidad y el tamaño de los archivos JavaScript y CSS que usan, la cantidad de imágenes utilizadas y su tamaño, y el enfoque de su implementación móvil, es decir, típicamente de respuesta en la actualidad.
Si está en el mercado para un nuevo tema de WordPress y desea evaluar PageSpeed, es posible que se sorprenda de que los puntajes de los temas más conocidos a menudo se ejecutan en los años 60 y 70, pero también hasta los 90. Aquí hay un par de artículos que evalúan temas y PageSpeed a través de ColorLib y WPMU. En cualquier caso, esperaba más alto..
He usado el tema de construcción de My Site My Way por varios años. Curiosamente, el sitio de soporte de la compañía quedó en silencio recientemente, y no han dejado ninguna explicación para los usuarios.
Sin embargo, dado que no habrá más actualizaciones del tema, me facilita un poco realizar cambios radicales en el rendimiento de este tutorial sin tener que lidiar con futuras actualizaciones de código de la compañía. Llegaré a esto en breve.
El uso de servidores dedicados probablemente tendrá un mejor desempeño que los servidores virtuales compartidos cada vez más comunes y más asequibles. En el pasado, he escrito sobre cómo instalar WordPress en proveedores compartidos como Digital Ocean. También está el intermedio de servicios como WP Engine, que ofrece atención a los desarrolladores y a los servidores compartidos y dedicados..
La calidad del anfitrión también será importante. Una gran cantidad de proveedores de WordPress compartidos pueden proporcionar un rendimiento inconsistente.
Por ejemplo, uso el tema KnowHow en ambas publicaciones con WordPress alojado en un servidor virtual de Digital Ocean y Flee the Jungle alojado en WP Engine. Los sitios son bastante similares en peso de contenido, por ejemplo, Uso de textos e imágenes. PageSpeed para publicación con PageSpeed de WordPress es Mobile 73 y Desktop 88, mientras que Huir la jungla en WP Engine fue un poco más rápido (Mobile 78 y Desktop 91); El hospedaje administrado de WP Engine es un poco más rápido que mi alojamiento propio con un servidor compartido.
También he visto un bajo rendimiento con el alojamiento de AWS de gama baja de Amazon. Tienes lo que pagas.
El almacenamiento en caché de WordPress es fundamental para el rendimiento, y he escrito regularmente sobre mis favoritos: W3TC y Varnish Cache, por ejemplo. Optimizando WordPress con Varnish y W3 Total Cache.
Otro servicio que es crítico es una red de entrega de contenido. Anteriormente escribí sobre Acelerar la entrega de contenido con KeyCDN para Envato Tuts + y luego decidí cambiar a ellos.
La reducción regular de las dimensiones y el tamaño del archivo de las imágenes en WordPress requiere mucho tiempo pero es crítico.
Regularmente uso Acorn como una herramienta liviana para reducir rápidamente las imágenes para la web. Me reí cuando alguien twitteó recientemente que acababan de abrir Photoshop y que estaría disponible para llamadas telefónicas por un tiempo mientras se cargaba: Acorn es pequeño y rápido. Ese modelo de suscripción de Adobe es tan lento para cargar, lo siento, suscriptores.
También hay complementos de optimización de imagen automatizados como WP-Smush. Recientemente comencé a experimentar con el nuevo Optimus de KeyCDN. Además, aquí está el resumen de WPMU de los 10 mejores complementos de optimización de imagen para acelerar su sitio de WordPress.
Cada vez más, también accedo a imágenes en mi publicación externamente desde Flickr. Por ejemplo, cuando mi publicación sobre el crecimiento del vecindario impulsado por Amazon en Seattle se volvió viral en Slashdot, no hubo problemas de rendimiento ni de ancho de banda en todas las fotos, porque Flickr lo manejó.
Puede leer la Guía de optimización de imágenes de Google PageSpeed, pero cada vez encuentro que la ayuda de Google está muy orientada a la investigación (lo que es bueno tener como recurso) pero no es muy útil para resolver problemas por su cuenta. Puede haber demasiados doctorados allí y uno muy pocos usuarios reales.
Si bien siempre he tenido W3TC y Varnish, agregar KeyCDN y Optimus aumentó mi PageSpeed a Mobile 72 y Desktop 82, una buena mejora de 65 y 64:
Curiosamente, las quejas de almacenamiento de imágenes de Google parecen como si pudieran continuar indefinidamente, sin importar lo que usted mejore. Para este tutorial, experimenté con la optimización de algunos de los delincuentes restantes identificados para ver qué sucedería. El resultado fue interesante, y les contaré más sobre esto en breve..
Si ha realizado todos los conceptos básicos principales mencionados anteriormente, mejorar su PageSpeed con WordPress requiere un esfuerzo considerable y puede llevar bastante tiempo..
Por lo general, un sitio estático tiene un archivo con CSS y JS incluye que se puede minimizar y combinar fácilmente. WordPress es mucho más complejo.
Tanto se crea dinámicamente a través de WordPress's, mucho menos que la arquitectura perfecta. Puede llevar tiempo descubrir dónde se están creando los archivos, ya sea que estén en los temas o complementos, y cómo abordar estos problemas. Resulta que cuando tienes siete complementos que incluyen archivos JavaScript y quieres minimizarlos y combinarlos en uno solo, mientras que permites las actualizaciones regulares de los complementos, es todo un desafío..
Actualizar mi configuración W3TC HTML minify resolvió rápidamente la queja de PageSpeed sobre eso.
Para CSS, tuve que agregar individualmente los archivos de PageSpeed que me alertaron sobre la Administración de archivos CSS de W3TC. W3TC luego comenzó a minimizar mi CSS y combinar los archivos nombrados en un solo archivo para incluir.
Esto resolvió el requisito de minificación de CSS de PageSpeed.
También redujo la cantidad de archivos CSS que se reportan para el bloqueo de procesamiento de siete a cuatro archivos relacionados con el tema (enumerados primero en Optimizar la entrega de CSS):
Los tres archivos restantes eran de directorios de complementos fuera de mi tema (que exploraremos más adelante):
Espero que esto le dé una idea del agujero del conejo en el que WordPress PageSpeed optimization se convierte rápidamente.
Aunque minimizar y combinar CSS es generalmente bastante fácil, JavaScript tiende a fallar mucho cuando intentas hacer esto, creando errores importantes que rompen sitios..
Curiosamente, PageSpeed ahora ofrece descargas comprimidas completas de sus versiones comprimidas de sus archivos que no le gustan.
Enumeraba diez de mis archivos JS que quería que yo solucionara:
Para referencia, aquí hay más recursos de minimización de Google PageSpeed para HTML, CSS y JS. También utilicé Refresh SF, que proporciona un fácil acceso web a varias herramientas de compresión..
Comprimir y combinar JavaScript definitivamente puede crear errores, así que tuve que ir paso a paso. Usando JS File Management de W3TC, minimicé y combiné los siete archivos JS dentro del tema Construct:
Esto no me permitió abordar los archivos JS de mis complementos o los problemas que estaba viendo con un misterioso archivo base.js alojado externamente. Continuemos con los problemas de bloqueo de procesamiento y luego volvamos a la minificación de JS después de.
Si tiene una gran variedad de archivos que deben cargarse al 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.
Aquí hay un ejemplo de la queja de bloqueo de procesamiento CSS en PageSpeed:
Mientras que W3TC había combinado muchos de ellos en su include.c46b63.css, los siguientes tres anteriores fueron de mis complementos.
El blogger Justin Tadlock ofreció una guía que explica cómo pedir a WordPress que no cargue los archivos CSS que mis complementos habían puesto en cola para cargar. La respuesta es anular su registro y luego cargar un archivo combinado por su cuenta..
Aquí está mi complemento de tabla de contenido que pone en cola sus archivos JS y CSS:
Accentsconagua
/ ** * Registrar y cargar archivos CSS y javascript para la interfaz. * / function wp_enqueue_scripts () $ js_vars = array (); // registrar nuestro CSS y scripts wp_register_style ('toc-screen', $ this-> path. '/screen.min.css', array (), TOC_VERSION); wp_register_script ('toc-front', $ this-> path. '/front.min.js', array ('jquery'), TOC_VERSION, true); // ¡Encolarlos! if (! $ this-> options ['exclude_css']) wp_enqueue_style ("toc-screen"); if ($ this-> options ['smooth_scroll']) $ js_vars ['smooth_scroll'] = true; wp_enqueue_script ('toc-front');Siguiendo la sugerencia de Tadlock, anulé el registro de mis complementos incluidos en las funciones de mi tema.php, primero el CSS: tienes que encontrar las referencias utilizadas por el desarrollador del complemento:
add_action ('wp_print_styles', 'my_deregister_styles', 100); function my_deregister_styles () wp_deregister_style ('toc-screen'); wp_deregister_style ('blogsynthesis_jss_css'); wp_deregister_style ('edd-styles'); Creé manualmente un archivo CSS combinado con esas tres hojas de estilo de plugin. Luego, le pedí a W3TC que minimice y combine ese archivo en su propia mega hoja de estilo:
Hay un problema importante aquí, ya que cuando actualizo mis complementos, es posible que deba actualizar este archivo CSS combinado y los archivos JS que lo acompañan..
Aquí hay una publicación de blog con algunos otros enfoques que puede utilizar para estos desafíos..
Usando el enfoque de Tadlock, esto es lo que el bloqueo de procesamiento de PageSpeed se vio después:
Seguí los mismos pasos para los archivos JS, solo un poco más cuidadosamente. Poco a poco, la queja JS de mi PageSpeed para mi sitio se volvió bastante menor:
Sin embargo, como puede ver a continuación, también se quejaba de los problemas de almacenamiento en caché del navegador con los archivos JS a los que no pude encontrar enlaces en mi código base, como ad_status.js de Doubleclick.
Eliminación de un reproductor de YouTube heredado
Finalmente, descubrí que tanto el problema de minificación de JS como el problema de almacenamiento en caché estaban relacionados con mi uso de un reproductor de video externo de YouTube..
Si bien tenía curiosidad por probar una pequeña solución sugerida aquí para evitar que el video se cargue sin la acción del usuario, decidí simplemente quitar el video de la presentación de mi página de inicio.
Es probable que la forma en que mi tema de Construir incrustara archivos de YouTube fuera una solución heredada. El soporte HTML5 de YouTube puede funcionar mucho mejor ahora. Aún así, es algo gracioso cómo un servicio de Google afecta la puntuación de rendimiento de otro servicio de Google.
Eliminar una característica en mi página de inicio que incrustó un video de YouTube solucionó algunos problemas:
Ya que no quiero que se pierda mi mejor parte antes de que WordPress me corrompiera, incluiré el video aquí. Solía ser un buen chico.
Esto es lo que estaba pasando:
Una vez que se realizaron los cambios anteriores en JS y se eliminó el video, el problema de minificación de JavaScript se resolvió para mi maestro PageSpeed:
El error de almacenamiento en caché del navegador que se muestra a continuación también desapareció.
Ahora, en realidad solo necesitaba almacenar en caché gpt.js y ga.js, otros dos servicios de Google alojados externamente:
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 usar los cron scripts para actualizarlos regularmente en su servidor. Alice comenzó a aburrirse conmigo, espero que sigas siguiéndolo..
Miré otros temas que uso con el complemento de Google Analytics (Construir tiene configuraciones para Analytics) y tampoco abordaron esto.
Entonces, hice copias locales de los scripts para Google Analytics y Google DFP, y poco después, el almacenamiento en caché de mi navegador se resolvió en PageSpeed:
Aquí hay más información de Google sobre el caché del navegador, una vez más 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, minificados y combinados para apoyar mejor a PageSpeed de los editores. También ayudaría si no estuvieran cargando sus archivos de forma individual y oscura en los scripts..
Volvamos brevemente a las quejas sobre el tamaño de la imagen de PageSpeed antes de finalizar.
Las sugerencias de imágenes de Google PageSpeed pueden debilitar la usabilidad de su sitio. Aquí hay un ejemplo, una imagen destacada que alojé 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 de 281 x 200 (Se muestra aquí ligeramente ajustado para requisitos Tuts +):
Y, aquí está la versión provista por PageSpeed en su descarga comprimida:
Puedes ver que la calidad es aún peor, pero lo más importante es que PageSpeed quiere que reduzca 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 imagen de PageSpeed, bajando mis puntuaciones.
Después de todo este trabajo, ¿dónde terminó mi sitio??
Las puntuaciones finales de PageSpeed incluyeron Mobile 70, que muestra algunas de las quejas restantes a continuación:
Aquí están las optimizaciones de imagen restantes:
Y aquí hay un resumen de todas las reglas aprobadas:
Además, aquí están las puntuaciones finales de UX. La mayoría de los sitios no tienen grandes problemas con estos, por lo que no los abordé hoy:
La puntuación final de escritorio fue de 86, no está mal:
JavaScript es meticuloso. Nunca pude minimizar y combinar con éxito esos 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ó a mi sitio vulnerable a futuras actualizaciones de plugins y scripts de Google. Gran parte de este trabajo es bastante confuso, orientado a los detalles y requiere mucho tiempo. También es un poco loco y aturdidor. Gracias google.
PageSpeed no lo es todo. El contenido también importa. Aquí hay algunos sitios conocidos y su PageSpeed. Los resultados te sorprenderán.
Daring Fireball (DF) es uno de los blogs más rápidos enfocados en el contenido. Promueve a los anunciantes de forma mínima. Las páginas corren ligeras y rápidas. El CMS de Gruber es una versión personalizada de Movable Type. Las puntuaciones son un poco mejores que mi sitio. DF también genera una tonelada de ingresos con publicidad mínima.
Obviamente, una importante organización de noticias, tienen puntuaciones terribles de PageSpeed:
Sorprendentemente, nuestro trapo local con su horrible anuncio y modelo de rebote de suscripción es mucho peor:
Un sitio de comercio electrónico popular, B&H Photo, tiene una puntuación móvil terrible y una puntuación de escritorio justo debajo de la mía:
Es posible que haya oído hablar de esta compañía en mi ensayo reciente Cómo hacer que los sitios de WordPress sean diferentes por geografía: venden muchas cosas en línea. Mis puntajes de PageSpeed son significativamente más altos que los de ellos:
En el futuro, veré algunas mejoras más para mejorar el PageSpeed de mi sitio:
Si no migro los temas en breve, tendré que implementar el script cron para sincronizar mis scripts de Google para Google Analytics y DFP y averiguar cómo monitorear las actualizaciones de los complementos para los cambios de JS y CSS. Podría tener que revertir estas ganancias específicas de PageSpeed, honestamente.
Si tiene preguntas, por favor publíquelas a continuación. O bien, puede ponerse en contacto conmigo en Twitter @reifman. Por favor, consulte mi página de instructor de Envato Tuts + para ver otros tutoriales que he escrito, como mi serie de inicio (Construyendo su inicio con PHP).
