Comience a hacer los sitios de rendimiento primero

En 2018, Erlend y yo discutimos que deberíamos tomar nuestra experiencia y pensamientos sobre el desarrollo en el rendimiento y convertirlos en un método y un flujo de trabajo que otros sigan. Nordic WordCamp sería la oportunidad perfecta para presentar el inicio temprano de un flujo de trabajo que cualquiera puede seguir. Entonces, con Nordic WordCamp como fecha límite, comencé a trabajar en lo que es el flujo de trabajo ahora. ¿Por qué necesitamos una nueva forma de trabajar con el rendimiento?
@Thoaud sostuvo una increíble discusión sobre el caché. Podría abrir los ojos de muchos desarrolladores. #Wcnordic pic.twitter.com/ny2upzemx
– Maciek Palmowski (@palmiak_fp) 8 de marzo de 2019
Cuando observamos las velocidades de las páginas promedio, está claro que hacemos sitios web que no abordan las mejores prácticas durante tres segundos. Para mí, esto me dice que tenemos que comenzar a desarrollar diferentes sitios web.

Datos de Google sobre la velocidad de la página para países europeos. Fuente: Google Nuestra teoría es que la mayoría de los desarrolladores ni siquiera saben qué tan rápido puede ser un mejor código. También creemos que la mayoría de los desarrolladores creen que la memoria de caché es la mejor manera de acelerar un sitio. Probé esta teoría haciendo una encuesta en el grupo avanzado de WordPress en Facebook.

La mayoría de los usuarios de WordPress que respondieron a la encuesta dijeron que usaban caché para la velocidad. Presentado en WordCamp Nordic 2019. La gran mayoría de los encuestados respondieron que la velocidad era por qué usaban el caché de toda la página. La memorización de caché de ninguna manera es una bala mágica cuando se trata de rendimiento. La naturaleza del almacenamiento en caché es que ninguna página está mágicamente en caché y, por lo general, se necesita un visitante para almacenarse en caché para el próximo visitante, por lo que puede obtener la misma página, más rápido, de caché. Solo hay dos cosas pesadas en informática: invalidación y nombres de caché. Phil Karlton también, vemos a partir de los datos en las pruebas de rendimiento completas del sitio que a menudo hacemos, que solo una pequeña parte de las páginas de un sitio está en caché, y que generalmente entre el 5% y el 20% de las solicitudes de la página , Me entregan de toda la página de caché. Conocemos sitios que potencian hasta una tasa de acceso del 50%, pero son muy raros y casi siempre son estáticos (por ejemplo, no comercio electrónico). Aclaración importante: con la memoria de caché, me refiero al almacenamiento de caché de toda la página, también conocido como caché HTML. No estoy hablando de almacenamiento en caché estático de activos, objetos de objetos, caché de CPU, micro-caché y otros tipos de caché en la pila de host.
Información confusa a pesar de que muchos desarrolladores creen que el caché es la solución, muchos de los sitios que intentan servir, generalmente dicen la misma historia. Probaron varias soluciones de caché y una variedad de optimizaciones, pero no creo que el sitio sea realmente más rápido. La disonancia cognitiva es creada por todos los tipos de canales. Artículos en línea, intercambio de pilas, comerciales, grupos de Facebook, blogs, documentos de ayuda y sesiones de marketing. Estamos rodeados de información que dice que el almacenamiento en caché es el remedio para un rendimiento lento y que hará que su sitio sea más rápido. Pero cuando se lo pruebe, no experimente esto usted mismo. Una lista de complementos en WordPress, lleno con complementos activados y deshabilitados y optimización. Y tienen razón. No es más rápido. Algunas páginas son más rápidas si presiona caché, pero debido a que no podrá almacenar todo en caché, no podrá dar una experiencia rápida a todos los visitantes de caché, ya sea la técnica principal de mejorar el rendimiento. Para olvidarse de toda la página de caché en su trabajo de desarrollo, dará como resultado un mejor código que se ejecuta más rápido. Verá, sentirá y sabrá fácilmente cuando algo que hizo ha ralentizado su sitio.
¿Le gustaría aprender más sobre cómo funciona el almacenamiento en caché? Lea mi artículo sobre cómo funciona el almacenamiento en caché en WordPress. El flujo de trabajo no importa principalmente si construye un sitio con complementos, temas de estante y algunos cambios CSS o si construye el sitio completamente a partir de cero con código personalizado. El primer flujo de trabajo de rendimiento está diseñado para ayudarlo y funciona sin importar cómo construya su sitio. Oh, no, algo más, primero en diseño tenemos el móvil, la accesibilidad primero, primero, primero, entre otros. En el código frontend, primero tenemos el móvil y la accesibilidad primero. Todas estas son tendencias en el desarrollo web, porque se asegura que los sitios web y las tiendas en línea que creen tienen el usuario y cómo se utilizará el sitio web. Pero cuando haces un código trasero, no tienes nada como eso. Tiene estándares de codificación y pruebas unitarias, etc. para asegurarse de que su código sea fácil de leer y comprender, que no interrumpe la funcionalidad, etc.

Pero en el código de backend, no tenemos tantos “bonos”. Podría encontrar uno y se llama “atajos primero, debido a los plazos del proyecto”. Y la falta de un método y un enfoque principal es una de las razones por las que primero necesitamos el método y el flujo de trabajo. Los desarrolladores, agencias y clientes deben conocer la importancia del rendimiento y participar en hacer sitios web de código más rápidos y mejores. Cómo trabajar el rendimiento del flujo de trabajo El primer primer primero tiene dos partes principales:
Presupuesto de rendimiento



Prueba de rendimiento
Entre estas dos partes principales, hay “reglas” y un flujo de trabajo a seguir. Hay reglas y un flujo de trabajo para asegurarse de que, como desarrollador, no ingrese el código que ralentice el sitio en el que trabaja. Al igual que con su dinero, no puede exceder el presupuesto en ningún momento. Únase a la conversación de rendimiento en Twitter utilizando el #Perfferst Hashtag Step 1, haga un presupuesto de rendimiento en el primer paso, ya sea que construya un nuevo sitio o comience a trabajar en uno existente. Necesita un presupuesto de rendimiento. El primer presupuesto de rendimiento consta de dos factores principales, tiempo y tamaño.
¿Cuántos segundos tienes que pasar?
¿Cuántos KB puedes transferir durante este tiempo?
Para hacerlo aún más fácil, podemos dividir los dos en cuatro kpis.
Descarga HTML (primera solicitud)
Tamaño de página
Contenido DOM ubicado
Completamente cargado

Puede agregar cuántos KPI de rendimiento desea, cuanto más KPI tenga, mejor. Pero cuanto más agrega KPI, más complicados pasos hagan. Y debe comprender cualquier KPI que agregue bien, porque detrás de cualquier KPI hay indicios sobre dónde está un posible problema de rendimiento. Más sobre esto más tarde. Paso 2: haga el código/modificación del segundo paso es construir todo lo que desea construir o cambiar en el sitio. Cuanto más haya recorrido los pasos en este flujo de trabajo, más rendimiento producirá. Si crea sitios web utilizando generadores de página, probablemente ya cambiará la configuración estándar con una más eficiente cuando haya trabajado varias veces a través del flujo de trabajo primero. de lo que ha entrado o cambiado. ¿Cuál debería ser el propósito de su prueba? Puede probar el rendimiento con diferentes campos:
La función/fracción del código
La página única
Sitio completo
Probar una función o fracción de código Prueba El rendimiento de una función o fracción de código generalmente se realiza durante el proceso de integración continua (IC). Para muchos sitios web normales, esto es innecesariamente complicado y consume mucho tiempo. Una página prueba la mayoría de las personas prueban páginas individuales, utilizando herramientas de prueba de una sola página, como webpagetest.org (o herramientas.pingcom.com, gtmetrix). Estas son herramientas fáciles de usar y lo suficientemente buenas. Sin embargo, el problema es que son solo herramientas de prueba de una página. Probar una sola página es para la mayoría de los sitios un área de aplicación. Una prueba de rendimiento de una sola página no es suficiente, a menos que haya agregado el código que solo afecta una sola página. En la mayoría de los casos, cualquier código que agregue afectará más de una página. Si agrega un complemento o módulo, afectará a más de una página, garantizado. Pruebas completas en el sitio Pruebas completas del sitio es lo que la mayoría de los desarrolladores deberían hacer más. La prueba completa del sitio se realiza probando una selección preestablecida de páginas o accediendo a rastreadores completos del sitio. Con pruebas completas del sitio, puede ver el impacto de su cambio en varias páginas y, por lo tanto, puede identificar problemas de rendimiento con diferentes escenarios. Las pruebas completas del sitio se pueden implementar en el proceso CI o se pueden realizar manualmente con herramientas como Sitebulb y Screaming Frog.
Lo importante, independientemente de la herramienta que use, es que puede obtener los KPI que tiene en el presupuesto de rendimiento para cada página. Personalmente, recomiendo Sitebulb. Realmente me gustan las posibilidades que ofrece y me ofrece mucho más que información de rendimiento. Esencialmente, Sitebulb es una herramienta SEO que le brinda mucha información sobre posibles mejoras de SEO. La razón principal por la que recomiendo el SiteBulb es que puede ejecutar las pruebas locales, desde su propia computadora, en un sitio que está ejecutando localmente. Esto le brinda un entorno controlable y facilita la ejecución independientemente de dónde se encuentre, y la prueba no se verá afectada por la latencia de la red, etc. Lo importante que debe recordar, si ejecuta esto localmente, es que tiene números en relación con su presupuesto en relación con la lento que es su entorno local en comparación con el entorno que ejecutará en producción. Paso 4 – ¿Se ha visto afectado el rendimiento? Una vez que haya realizado la prueba de rendimiento, debe determinar si lo que ha hecho afecta el rendimiento del sitio. Después de haber establecido esto, ingresa a la etapa final. Paso 5 – Mapa de decisión El mapa de decisiones, o bailar, como me gusta llamarlo, es la parte del trabajo que es el más estricto. Si no sigue esta parte, el resto es casi inútil. ¿Comienza desde el mosaico que responde a la pregunta? ¿Ha afectado el rendimiento? Una pregunta simple, ya sea sí, o no. La decisión de la decisión, como se presenta en el Nordic WordCamp 2019 en Helsinki, Finlandia. No. Mi cambio no ha afectado el rendimiento del flujo cuando un cambio no afecta el rendimiento, es bastante simple:
¿Afectó el rendimiento?
¿Ha aumentado el tamaño de la página?
¿Estás superado el presupuesto general? Forzado a volver al paso 2, mejorar, reanudar o reescribir su cambio, es algo bueno. Esto te hace aprender cosas nuevas, pensar de manera diferente y aprender nuevas formas de escribir un código mejor y más rápido. Sí. Mi cambio ha afectado el rendimiento si la modificación o el código agregado han afectado el rendimiento, el flujo de trabajo se vuelve un poco más un baile. Lo primero que tendrá que darse cuenta es si el rendimiento degradado vale la pena. Esta decisión depende completamente de usted. Si no vale la pena, vuelva al paso 2 y encuentre una solución mejor y más rápida para cualquier problema que haya intentado resolver. Sí, vale la pena, por lo que el rendimiento degradado vale la pena. Luego, el primer flujo de trabajo de rendimiento tiene una red de seguridad si toma esta decisión demasiadas veces. El presupuesto de rendimiento general, que es absoluto y nunca se puede superar en ningún momento. El paso después de establecer si el rendimiento degradado vale la pena es verificar si la modificación ha excedido el presupuesto de rendimiento. Si es así, debe volver al paso 2 y reanudar su código o, de otra manera, encontrar una solución mejor y más rápida. ¡Ayuda!
He superado mi presupuesto de rendimiento si ha excedido el presupuesto promedio de rendimiento, deberá volver a elaborar el código.Una nota importante aquí es que no tiene que reanudar el código que acaba de ingresar.Puede ser más fácil e inteligente, reanudar otra parte del código que ocupa una mayor parte del presupuesto de rendimiento.Cuando excede el presupuesto, debe averiguar qué parte del presupuesto.Cuando llega el momento del primer byte (TTFB), tiene dos opciones.Pruebe un host más rápido o reanude el código utilizando herramientas de perfiles para averiguar qué se ha ralentizado.El perfil es de tiempo y, a menudo, difícil, y difícil de hacer si no tiene un conjunto de habilidades avanzadas y diversas.El paso de implementación que trabajó en el trabajo y llegó a la etapa de implementación.¡Buen trabajo!
Implemente la nueva versión de su sitio en Internet, hágalo público y visible en Internet. Pero antes de darle una almohadilla trasera, debemos dar el último paso del primer flujo de trabajo de rendimiento. Activar memoria de caché Activación de caché es el último paso en el flujo de trabajo, siempre. Nunca en ningún momento antes del proceso. La razón por la que este es el último paso es que, en ningún momento, no debe usar el caché (caché de página completa, caché HTML, etc.) como una mejora en el rendimiento. Si usa el caché para el rendimiento, tiene la garantía de que llegará, en un momento, con usuarios que tienen una mala experiencia, porque son los malos guardias que no golpean el caché. Cuando la memoria de caché se elimina del conjunto de herramientas para el rendimiento de su sitio, deberá empujar a usted y su trabajo al siguiente nivel para alcanzar el nivel de rendimiento que los visitantes de su sitio aún tienen, sin embargo, si tiene caché. En la caja de herramientas, es fácil activarlo y más tonto creer que es una buena solución. No es. El rendimiento es algo difícil de resolver, y el modelo anterior puede ayudarlo a dar una mejor perspectiva. Sin embargo, en ServBelt nos esforzamos por aliviar la vida de nuestros clientes y, por la misma razón, hemos desarrollado un servicio de dominios acelerado único que no solo resuelve los problemas de rendimiento de su sitio web, sino que también optimiza los recursos que ayudan a una mejor escalabilidad y Mejora la sostenibilidad.