Share
Lo que vas a crearBienvenido a la segunda parte de nuestra serie en Google PageSpeed. En el primer episodio, optimicé la velocidad de la página del tema de mi sitio en ese momento, MySiteMyWay's Construct. Conseguí llegar a 70 Mobile y 86 Desktop..
Sin embargo, con el cierre de MySite, elegí un tema nuevo y alcancé una velocidad de 100 Page para dispositivos móviles y de escritorio. Me tomó cerca de 12 horas de esfuerzo adicional para lograr esto. Ahora, el rendimiento de mi sitio es uno de los sitios de WordPress más rápidos que he visto en mucho tiempo. La navegación es casi instantánea..
En este tutorial, te mostraré cómo logré esto y lo que aprendí sobre WordPress y Google PageSpeed. Durante la mayor parte del día que trabajé en ello, pensé que podría superar en los años 90. Me sorprendió un poco cuando saltó repentinamente a 100 para escritorio, y solo faltaban algunos detalles para maximizar el móvil..
Para aquellos que no lo saben, Google 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 más información sobre los beneficios de una mayor velocidad del sitio, lea Por qué la optimización de la velocidad del sitio de Moz debe ser parte de su estrategia de SEO. Destaca, "... varios estudios de caso han mostrado que las páginas de carga más rápidas se correlacionan con ingresos más altos".
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.
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-ahem-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, incluidos los archivos JavaScript, y quieres minimizarlos y combinarlos en uno solo, mientras permites las actualizaciones regulares de los complementos, es un gran desafío en el mundo de WordPress de temas y complementos que cambian constantemente..
Esto hace que muchos desarrolladores estén tristes:
Crédito de la imagen: Mi foto de Picasso Museo en París. Ahora se podría llamar "Desarrollador triste que enfrenta la velocidad de la página de Mobile 55 / Desktop 62"
Dicho esto, déjame animarte mostrando cómo lo hice (no tienes nada útil que hacer hoy, ¿verdad?). Tenga en cuenta que las necesidades de su sitio pueden diferir un poco de las mías..
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.
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..
Como ejemplo de las expectativas de la industria, el sitio web de The New York Times tiene un puntaje de 53/55 para mí, muy por debajo de 100.
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. Algunos creadores no parecen mirar sus PageSpeeds mientras construyen.
Para este tutorial, me centraré en mejorar mi sitio web personal, JeffReifman.com. Escogí Medium by Array Themes por varias razones.
El primero fue su velocidad de referencia. Puntuaciones medias Mobile 74 y Desktop 89 para comenzar desde su servidor de demostración. Si bien esto ya era un poco mejor de lo que había maximizado Construct, era un tema más moderno y había muchos pasos de optimización restantes que podía probar. Tenía la esperanza de llevar a PageSpeed a los 80 o 90..
Además, dado el crecimiento de los lectores móviles, quise dejar de confiar en las barras laterales, especialmente para la colocación de anuncios. (Espero escribir sobre mis nuevas direcciones de ingresos en nuestro serie de Google DFP en curso). El tema Medio hace un buen trabajo doblando la barra lateral izquierda en un menú receptivo y ocultando su barra lateral derecha.
Aquí fue la página inicial de velocidad para la demostración de Medium (el alojamiento de la demostración nunca está optimizado). En realidad, fue alentador ver que tenía muchos problemas sin resolver porque mostró que era mejor que mi Construct optimizado antes de aplicar un esfuerzo adicional y tareas similares que sabía que realizar para maximizar su puntaje:
Aquí hay más de los problemas:
Y más:
Y los desafíos de la experiencia del usuario, que fueron más localizados:
Finalmente, aquí está su puntaje de escritorio de demostración:
Alentado por la puntuación de la fundación, compré e instalé el tema Medio en mi servidor y me puse a trabajar.
Tenga en cuenta que cambiar de tema puede ser bastante complicado. Para mí, la sustitución, eliminación y actualización de los códigos cortos incorporados del tema Construir tomó la mayor parte del tiempo, y no estoy completamente terminado, por ejemplo. Dropcaps, variaciones de pullquote, botones, pestañas y menús de navegación basados en páginas. Mi unidad de 100 me empujó a seguir adelante a pesar de todo. Cómo realizar una búsqueda masiva y reemplazar en WordPress ofrece algunas buenas soluciones para encontrar y reemplazar códigos cortos.
Si bien este tutorial no lo guiará a través de los pasos exactos para aumentar el PageSpeed de su sitio a 100, lo guiará a través de muchas soluciones posibles e identificará obstáculos comunes. Hay otro gran recurso generalizado que compartiré al final..
Me puse en contacto con ArrayThemes un poco sobre el rendimiento de demostración sub-100 del tema Medio. Enviaron una excelente respuesta:
La prueba de optimización de PageSpeed debe tomarse con un grano de sal ... nuestra demostración está siendo dañada por no almacenar en caché, pero en realidad no necesitamos el almacenamiento en caché en nuestras demostraciones ... Las sugerencias de PageSpeed no son del todo precisas o ejemplares del rendimiento de un tema. Dependerá completamente de su configuración, servidor, almacenamiento en caché y otras optimizaciones que decida realizar.
Esto constituye un punto de inicio perfecto para revisar los elementos básicos comunes para el rendimiento de WordPress. Todas las áreas de desempeño a continuación abordan los puntajes de PageSpeed subyacentes, no completamente sino lo básico.
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.
Resulta que hay un puñado de complementos diseñados para ayudarte a enfrentar el desafío de un almacenamiento en caché eficiente. Aquí están dos de los mejores que probé:
Credito de imagen: WordPress Tavern
Ambos fueron útiles, pero ninguno eliminó las barreras relacionadas con PageSpeed, como incrustar CSS en mi etiqueta para eliminar los problemas de PageSpeed; en otras palabras, este complemento probablemente no te llevará hasta 100 PageSpeed. Considero que la Minificación de dependencia es eficiente y útil, pero su falta de flexibilidad me hizo alejarme.
En última instancia, volvería repetidamente a W3 Total Cache y encontraría nuevas formas más poderosas de presionarlo para obtener un mejor rendimiento. No es perfecto y definitivamente tiene algunos errores de UX, funcionó bien en suficientes formas para que encuentre mi camino con otros enfoques para PageSpeed 100.
Al final, elegí solo un nuevo complemento que facilitó la eliminación de los problemas de PageSpeed con Disqus. Revisaré esto más adelante..
Otro servicio que es crítico es una red de entrega de contenido. Anteriormente, escribí sobre Acelere su entrega de contenido con KeyCDN en Envato Tuts + y luego decidí cambiar a ellos como cliente..
Al final, hay una variedad de CDN que puede elegir, como CloudFlare y RackSpace para nombrar algunos.
Recientemente, comencé a experimentar con el nuevo servicio Optimus de optimización de imágenes de KeyCDN y el complemento de WordPress. Existe una pequeña posibilidad de que sea operado por robots construidos con Apple Lisas y Macs antiguos:
Funciona bien, pero otra alternativa popular es WP-Smush, un plugin más antiguo con más de 300,000 usuarios..
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:
Este puede ser un elemento de WordPress difícil de eliminar debido al tema y la arquitectura del complemento. Volveremos a ello.
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..
Vayamos paso a paso a través de las áreas problemáticas identificadas y las formas en que las resolví. En verdad, hice una gran cantidad de experimentos con diferentes herramientas y enfoques. Regularmente solté un enfoque y volví a otro. Mi solución resultó ser un mosaico de soluciones bastante bien administrado. El camino no fue directo a Yoda..
Por ejemplo, así es como minimiza HTML en W3 Total Cache:
Del mismo modo, es fácil minimizar JavaScript en W3 Total Cache. Tenga en cuenta que estoy ordenando a W3TC que incruste el archivo comprimido que no está en el pero en cambio justo antes . Retrasar JavaScript puede mejorar tu puntuación de PageSpeed.
Debido a que tanto los temas como los complementos usan JavaScript y CSS, se necesita un poco de trabajo para minimizarlos juntos y combinarlos en un solo archivo (y eso no es suficiente para PageSpeed, que analizaré más adelante).
Para evitar que los complementos carguen su propio CSS e instruir a W3TC para que cargue versiones comprimidas y combinadas, debe encontrar el identificador del complemento para el archivo CSS (distinto de los nombres de archivo) y agregar código a su tema para interrumpir las instrucciones de carga del complemento. Luego, ingrese la ruta a cada archivo CSS dentro del cuadro de diálogo W3TC de arriba para cargarlo con los demás..
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, comenzando con el CSS: tiene 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'); 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 como se muestra arriba.
W3TC puede combinar todos mis archivos de temas y complementos, pero a PageSpeed aún no le gusta ver ni siquiera un CSS incluido (tanto para las buenas prácticas de desarrollo de HTML):
En última instancia, cargué nueve archivos CSS (sólo se muestran siete a continuación). En primer lugar, debe encontrar los controladores de los complementos para CSS y cancelar su registro en su tema como se describe anteriormente. Luego, tienes que apuntarlas todas a W3TC..
Si bien hay varias formas de obtener una versión reducida de todas estas, en realidad solo agarré el archivo comprimido de W3TC. Eliminé todos los argumentos de consulta de almacenamiento en caché, por ejemplo,. ?cbe3w2, con buscar y reemplazar en TextEditor. Sigo siendo un usuario leal de TextMate, pero en realidad tenía grandes retrasos y bloqueos cada vez que intentaba navegar por un archivo CSS minificado. Así que TextEditor me ayudó a editar estos archivos individualmente.. Disculpas a los puristas, todavía no he pasado a Sublime..
Aunque me funcionó pegar mi CSS minificado en mi encabezado, más tarde tuve que cambiarlo para obtener dinámicamente el contenido de los archivos CSS y hacerlos eco en su lugar.
Una vez que agregué otro complemento para compartir en redes sociales, el pegado ya no funcionaba y tuve que separar los archivos con el mecanismo anterior. Esto también proporciona más flexibilidad para el futuro. Google PageSpeed nunca ve esto, y mi caché de Varnish oculta cualquier desaceleración al incluir dos archivos.
En última instancia, configuré todos mis archivos CSS en W3TC, hice copias de los archivos comprimidos y, a continuación, desactivé esta característica de inclusión:
Un inconveniente de W3TC es que muestra repetidamente mensajes de error molestos a pesar de que lo está utilizando deliberadamente de una manera inusual.
Cuando mueva los archivos CSS de los directorios de complementos, asegúrese de establecer las rutas relativas correctas a las imágenes, etc. para operar desde el directorio raíz del sitio. Tuve muchas situaciones en las que las imágenes no se cargarían hasta encontrar dónde resolver estas cosas. Voy a compartir un ejemplo en el Solución de problemas sección a continuación.
Curiosamente, el PageSpeed de Google se queja si carga sus bibliotecas de JavaScript externamente. Recibí deméritos para scripts externos relacionados con Flickr, Disqus y Google Analytics:
Esto resultó ser un gran obstáculo y requiere mucho tiempo y complejidad para resolver completamente estos problemas..
En primer lugar, había regresado recientemente de un viaje a la India y había colocado publicaciones de blog individuales con fotos incrustadas en Flickr en la página de inicio. El tema Mi medio se desplaza rápidamente a través de una serie de publicaciones, por lo que PageSpeed se quejó de todas ellas.
Después de observar que PageSpeed se quejaba tanto de los tamaños de las imágenes incrustadas alojadas en Flickr (en varios recuentos de píxeles) como de ver las limitaciones de JavaScript externas, volví a las imágenes optimizadas de alojamiento automático en mi sitio. Todavía enlazan a Flickr para mi álbum en curso de la India.
Este es un buen ejemplo de cómo tratar de usar un servicio de terceros poderoso con el simple propósito de incrustar fotos mata su puntuación de PageSpeed. Flickr no ha hecho un trabajo óptimo de ayudar a los usuarios de WordPress a resolver esto. Solo como ejemplo, necesitarían:
Con los archivos de Google restantes, la mejor solución era alojar localmente una copia de los scripts para Analytics y DFP y usar los cron scripts para actualizarlos regularmente en un servidor..
Primero, dejé de usar mi complemento de Google Analytics y agregué manualmente el código modificado al encabezado de mi tema:
//…
Note que cambié las rutas a mis copias locales de los scripts. Luego, hice copias locales de los scripts para Google Analytics y Google DFP, y poco después de que se resolviera el almacenamiento en caché de mi navegador en PageSpeed, a excepción de Disqus.
No estoy seguro de si es por seguridad o soporte multiplataforma o pura "inteligencia", pero Disqus y otros proveedores como Flickr parecen ocultar los archivos reales que están cargando con otros archivos. Esto hace que la optimización de PageSpeed sea mucho más difícil y, a menudo, sin solución.
Es cierto que pasé de dos a tres horas probando diferentes enfoques para optimizar el complemento Disqus; nada me funcionó.
Finalmente, desinstalé el complemento de Disqus e instalé la Carga condicional de Disqus:
Si bien está pensado para hacer muchas cosas, también hace posible optimizar PageSpeed con la instalación..
De repente, los deméritos de PageSpeed's Leverage Browser Caching desaparecieron. Felicitaciones a DCL!
PageSpeed a menudo se queja de enlaces demasiado espaciados en dispositivos móviles. Experimenté con algunos enfoques y finalmente dejé de mostrar etiquetas en dispositivos móviles.
Si paso más tiempo, probablemente pueda mejorar su UX y pasar con PageSpeed.
El complemento de ArrayToolkit, que muestra los íconos de la barra lateral derecha, dejó de funcionar para mí. Me tomó un tiempo para determinar qué rutas necesitaban ser codificadas con rutas absolutas para que funcionara.
En última instancia, encontré y reemplacé estas rutas con rutas relativas corregidas al directorio del complemento original:
// Tuvo que poner la ruta en el complemento css @ font-face font-family: 'array'; src: url ('./ fontello / array.eot'); src: url ('./ fontello / array.eot # iefix') formato ('embedded-opentype'), url ('./ fontello / array.woff') formato ('woff'), url ('./ fontello Formato /array.ttf ') (' truetype '), formato url (' ./ fontello / array.svg # array ') (' svg '); fuente-peso: normal; estilo de letra: normal; Todavía tengo un problema que necesito resolver. Mi nuevo complemento de pestañas (Construct tenía pestañas integradas) dejó de funcionar en el camino. Solo necesito dedicar tiempo a la depuración, pero debería ser bastante fácil de resolver.
Experimenté con YUI Compressor con W3TC para comprimir mis archivos JavaScript y CSS. En lugar de llevar a una mayor velocidad, todo se rompió.
Si está interesado en descubrir qué hice mal, puede instalar Java y YUICompressor de la siguiente manera:
#buena suerte sudo apt-get install openjdk-6-jre cd / usr / local / lib sudo wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar
Por favor, publique en los comentarios si sabe cómo hacerlo funcionar bien con WordPress..
Después de esta segunda ronda de trabajo sobre el nuevo tema, todo funcionó mejor de lo que esperaba. Nunca estuve seguro de alcanzar mi meta óptima.
Obtuve una puntuación de 100 PageSpeed para dispositivos móviles y de escritorio. Aún más notable, mi sitio se estaba ejecutando súper rápido y más rápido de lo que nunca antes había ejecutado un blog. Tengo mucha curiosidad por ver cómo el tráfico de búsqueda entrante y la actividad de lectores reacciona a los puntajes y el rendimiento más rápidos en los próximos meses.
Aquí están mis puntajes finales de PageSpeed, primer móvil:
Y ahora Desktop:
El escritorio llegó a 100 primero, y tuve que volver atrás y terminar algunos ajustes (dirigiéndome a los botones táctiles) para obtener Mobile allí.
Y nuevamente, la velocidad del sitio hace que valga la pena una visita rápida. Si conoces otros sitios web comerciales que se ejecutan a 100 PageSpeed, compártelos en los comentarios. Me gustaria verlos.
Solo como un ejemplo de los cambios de SEO, mi ensayo popular sobre las citas saltó al tercer puesto en los resultados móviles bajo "Citas en Seattle"(no está en el escritorio todavía.) Esto me dice que quizás las historias en los sitios principales que lo superan tienen un mal PageSpeeds móvil, porque no es fácil.
Para maximizar el PageSpeed de mi sitio, tuve que realizar una serie de ajustes en mi tema, que ahora crearán dependencias en los cambios a scripts externos y actualizaciones del tema y los complementos. Ahora que he terminado con mi objetivo a corto plazo, tengo trabajo que hacer para organizar mis sistemas para administrar esto más fácilmente.
Pronto tendré que implementar ese script cron para sincronizar mis scripts de Google auto-alojados para Analytics y DFP.
Aquí hay una compañía que proporciona un enfoque más simple para usar Analytics sin que se penalice a PageSpeed, lo que soluciona el último punto en Google PageSpeed Insights. Prefiero no confiar en otros terceros.
También necesitaré hacer un mejor seguimiento de las actualizaciones de los temas de Medium e integrar los cambios. Crear un tema secundario a partir de mis cambios también podría facilitar este proceso. Principalmente buscaré cambios que sobrescriban los archivos JavaScript y CSS míos, actualizados (o adicionales).
Del mismo modo, cuando se actualicen los complementos, tendré que estar atento a los mismos tipos de actualizaciones. Puede ayudarme a organizar mejor mi uso de GitHub con los complementos de WordPress. Ya lo uso para mi tema.
Es posible que desee dedicar algo de tiempo a escribir scripts para rastrear qué archivos JavaScript y CSS están en uso con el tema y los complementos actualizados, descargarlos en mi servidor y minimizar y empaquetar los archivos apropiados para vincular o incluir.
Finalmente, una de mis sorpresas es que no se requiere SSL para alcanzar un PageSpeed de 100. Esto tiene sentido, pero destaca que una variedad de componentes diferentes pueden afectar su clasificación de búsqueda de Google. Estaré escribiendo sobre la implementación de SSL gratuito de Let's Encrypt con WordPress pronto.
Si ha disfrutado de esto pero desea leer un tutorial más general que no profundiza en detalles específicos que pueden o no aplicarse a usted, Google PageSpeed Scoring 100/100 de KeyCDN con WordPress es una excelente pieza complementaria. También escribí un artículo patrocinado sobre su CDN en Envato Tuts + (Acelere su entrega de contenido con KeyCDN) y continúo con ellos como cliente.
Mientras tanto, si está buscando otras utilidades que lo ayuden a desarrollar su creciente conjunto de herramientas para WordPress o para que el código se estudie y adquiera más conocimientos en WordPress, no olvide ver lo que tenemos disponible en Envato. Mercado.En el futuro, veré algunas mejoras más para mejorar el rendimiento general de mi sitio. Éstos incluyen:
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 del instructor de Envato Tuts + para ver otros tutoriales que he escrito, como Clonar WordPress en Linux (en 90 segundos).
