{"id":1063,"date":"2018-01-02T13:23:40","date_gmt":"2018-01-02T13:23:40","guid":{"rendered":"https:\/\/sitechecker.pro\/?page_id=1063"},"modified":"2024-03-14T13:45:36","modified_gmt":"2024-03-14T11:45:36","slug":"speed-test","status":"publish","type":"page","link":"https:\/\/test.sitechecker.pro\/es\/speed-test\/","title":{"rendered":"\u00a1Haga una prueba de velocidad en un sitio web y descubra c\u00f3mo acelerar el proceso de carga del sitio!"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>Todos saben que un sitio web lento es malo. Cuando una plataforma de este tipo se frena al cargar, surgen problemas serios en la soluci\u00f3n de las tareas cotidianas. A veces es simplemente molesto.<\/p>\n<p>A menudo, el frenado del sitio es un colapso, y con este existe un servicio negativo: las personas no esperan las descargas y deciden irse. Esto es relevante para los casos donde hay un frenado radical en el sitio, por ejemplo, cuando el inicio del procesamiento de la p\u00e1gina comienza entre 8 y 10 segundos despu\u00e9s del clic.<\/p>\n<p>Incluso con una situaci\u00f3n relativamente favorable hacia el sitio (con una descarga r\u00e1pida en Internet por cable y una computadora moderna), las demoras en la descarga pueden provocar la p\u00e9rdida de audiencia y tambi\u00e9n generar menores tasas de conversi\u00f3n. Por ejemplo, Amazon llev\u00f3 a cabo un experimento en el que descubri\u00f3 que cada retraso de 100 ms (0,1s) generaba una disminuci\u00f3n de las ventas en un 1%.<\/p>\n<p>Incluso, m\u00e1s de la mitad de la audiencia del Internet hoy usa dispositivos m\u00f3viles para acceder a las plataformas web, de modo que pueden acceder a canales lentos para el ingreso y proceso de descargar el sitio.<\/p>\n<p>Otra raz\u00f3n de gran importancia sobre la velocidad del sitio es la t\u00e9cnica. Normalmente, los sitios lentos consumen una mayor cantidad de recursos de alojamiento, lo que genera costos adicionales. En s\u00ed, los frenos por parte del servidor reducen la capacidad de experimentar picos de carga problem\u00e1ticos en el sitio.<\/p>\n<p>Por lo tanto, la velocidad del sitio debe abordarse desde un punto de vista t\u00e9cnico y econ\u00f3mico. En este art\u00edculo nos concentraremos en el aspecto t\u00e9cnico de la aceleraci\u00f3n de los sitios web.<\/p>\n    <div class=\"blog__conversion blog__conversion-app element__logged_out\">\n        <div class=\"blog__conversion-inner\">\n            <p class=\"title\">Detectar p\u00e1ginas con c\u00f3digo redundante.<\/p>\n            <p class=\"description\">Audite su sitio web para descubrir p\u00e1ginas que tengan una relaci\u00f3n de contenido a c\u00f3digo inferior al 10%<\/p>\n            <form id=\"audit__form\"\n                  class=\"article__seo-search audit__form Audite su sitio web para descubrir p\u00e1ginas que tengan una relaci\u00f3n de contenido a c\u00f3digo inferior al 10%\"\n                  action=\"\"\n                  method=\"POST\"\n                  autocomplete=\"off\">\n                <span class=\"error\"><\/span>\n                <div class=\"error__limits\">Something went wrong. Please, try again later.<\/div>\n                <input name=\"url\"\n                       type=\"text\"\n                       placeholder=\"Ingrese su nombre de dominio\">\n                                <button type=\"submit\"\n                        class=\"sitechecker__text\">\n                    <span>Comienzo<\/span>\n                    <img src=\"\/wp-content\/themes\/sitechecker\/out\/img_design\/loading.svg\"\n                         width=\"31\"\n                         height=\"30\"\n                         class=\"loading\">\n                <\/button>\n            <\/form>\n        <\/div>\n    <\/div>\n    \n<p>&nbsp;<\/p>\n<h2 id=\"components\">Velocidad del sitio web: los componentes principales<\/h2>\n<p>&nbsp;<\/p>\n<p>La velocidad del sitio se compone de dos partes: el cliente y el servidor. Hasta la fecha, cada una de estas partes es equivalente al resultado final, y cada una viene con sus propias caracter\u00edsticas.<\/p>\n<p>Para entender cu\u00e1l es el tiempo de carga de una p\u00e1gina web, echemos un vistazo al proceso. Como resultado, podremos entender d\u00f3nde se encuentran las capacidades de optimizaci\u00f3n del servidor y del cliente.<\/p>\n<p>El proceso completo de descarga del sitio (en la primera visita) es el siguiente:<\/p>\n<ul>\n<li>\u00a0Se consulta alc <a href=\"http:\/\/test.sitechecker.pro\/es\/dns-checker\/\">DNS<\/a> por nombre del sitio.<\/li>\n<li>\u00a0Se establece una conexi\u00f3n al servidor por IP (conexi\u00f3n TCP).<\/li>\n<li>\u00a0Se establece una conexi\u00f3n segura cuando se usa HTTPS (conexi\u00f3n TLS).<\/li>\n<li>\u00a0Se realiza una solicitud de p\u00e1gina HTML por la URL y posteriormente, se espera el servidor (solicitud HTTP).<\/li>\n<li>\u00a0Se establece la carga del HTML.<\/li>\n<li>\u00a0Se realiza un an\u00e1lisis del documento HTML por parte del navegador, y luego se crea una lista de consulta en los recursos del documento.<\/li>\n<li>\u00a0Se carga y analiza el estilo CSS.<\/li>\n<li>\u00a0Se carga y ejecuta el c\u00f3digo JS.<\/li>\n<li>\u00a0Inicio de la representaci\u00f3n de la p\u00e1gina, y posterior ejecuci\u00f3n del c\u00f3digo JS.<\/li>\n<li>\u00a0Descarga de las fuentes de la web.<\/li>\n<li>\u00a0Carga de im\u00e1genes y otros elementos.<\/li>\n<li>\u00a0Final de la representaci\u00f3n de la p\u00e1gina y ejecuci\u00f3n del c\u00f3digo JS diferido.<\/li>\n<\/ul>\n<p>En este proceso, algunas fases ocurren en paralelo y algunas pueden cambiar lugares, pero la esencia sigue siendo la misma.<\/p>\n<p>La optimizaci\u00f3n del servidor se ocupa de la primera y hasta la cuarta etapa. Los pasos que transcurren del 5 a 12 son referidos a la optimizaci\u00f3n del cliente. El tiempo dedicado a cada una de estas etapas es individual para cada sitio, por lo que se debe obtener sus m\u00e9tricas e identificar la fuente principal de los problemas.<\/p>\n<p>Y aqu\u00ed pasamos a la pregunta de c\u00f3mo obtener estas m\u00e9tricas e interpretarlas.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"measuring\">Medici\u00f3n de la velocidad del sitio web<\/h2>\n<p>&nbsp;<\/p>\n<p>La pregunta principal es: \u00bfqu\u00e9 debe ser medido?<\/p>\n<p>Hay muchas m\u00e9tricas para la velocidad de sitios web, pero no muchas de ellas son b\u00e1sicas.<\/p>\n<p><strong>Primero,<\/strong> el Time To de First Byte (TTFB &#8211; tiempo hasta el primer byte) es el tiempo desde el inicio del proceso de descarga hasta la recepci\u00f3n de la primera porci\u00f3n de datos del servidor. Esta es la m\u00e9trica principal para que se d\u00e9 la optimizaci\u00f3n del servidor.<\/p>\n<p>En <strong>segundo<\/strong> lugar, se da el comienzo de la representaci\u00f3n \u2013o rendering\u2013 de la p\u00e1gina (representaci\u00f3n de inicio &#8211; primera pintura). La m\u00e9trica muestra el tiempo hasta el final del per\u00edodo de &#8220;pantalla blanca&#8221; en el navegador, que es cuando la p\u00e1gina comienza a dibujarse.<\/p>\n<p>En <strong>tercer<\/strong> lugar, se cargan los elementos principales de la p\u00e1gina (tiempo de carga). Esto incluye establecer e interpretar todos los recursos para trabajar con la p\u00e1gina, despu\u00e9s de esta se\u00f1al, el indicador de carga de la p\u00e1gina deja de girar.<\/p>\n<p>En <strong>cuarto<\/strong> lugar esta la carga completa de la p\u00e1gina: el tiempo antes del final de la principal actividad del navegador, en la que todos los recursos principales y diferidos se cargan.<\/p>\n<p>Estas m\u00e9tricas o medidas b\u00e1sicas son medidas (valga la redundancia) en segundos. Tambi\u00e9n es \u00fatil tener una estimaci\u00f3n de la cantidad de tr\u00e1fico para la tercera y cuarta m\u00e9trica. Es necesario conocer el tr\u00e1fico para evaluar el efecto de la velocidad de conexi\u00f3n en el tiempo de carga.<\/p>\n<p>Ahora tenemos que comprender c\u00f3mo probar la velocidad; hay muchos servicios y herramientas para evaluar las m\u00e9tricas de la velocidad de descarga de sitios, cada uno de los cuales sea mejor para su tarea o rol principal.<\/p>\n<p>Una de las herramientas m\u00e1s potentes es el panel de desarrolladores en el navegador. La funcionalidad m\u00e1s avanzada en el panel est\u00e1 en Chrome. En la pesta\u00f1a Red se puede obtener m\u00e9tricas sobre el tiempo de carga de todos los elementos, incluido el mism\u00edsimo documento HTML. Cuando se pasa el cursor sobre un elemento, se puede ver cu\u00e1nto tiempo se dedica a cada paso para obtener el recurso que se espera. Para evaluar todo del proceso de carga de la p\u00e1gina, se puede usar la pesta\u00f1a Rendimiento, la cual proporciona completos detalles sobre el momento de la decodificaci\u00f3n de las im\u00e1genes.<\/p>\n<p>Si necesita evaluar la velocidad de un sitio web, pero sin su granularidad completa, es \u00fatil comenzar una auditor\u00eda del sitio (en la pesta\u00f1a Auditor\u00edas). Esta se llevar\u00e1 a cabo utilizando el plug-in Lighthouse. En el informe, usted obtendr\u00e1 una estimaci\u00f3n de la velocidad en los dispositivos m\u00f3viles (integral en los puntos, por lo tanto con nuestras m\u00e9tricas b\u00e1sicas), as\u00ed como varios otros informes.<\/p>\n<p>Para evaluar r\u00e1pidamente la optimizaci\u00f3n del cliente, puede usar los servicios de <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">Google PageSpeed Insights<\/a> o Sitechecker (utilizamos el API de Google PageSpeed Insights). Finalmente, es \u00fatil analizar el tiempo de descarga del sitio de usuarios reales. Para esto, hay informes especiales en los sistemas de an\u00e1lisis web Yandex.Metrics y Google Analytics.<\/p>\n<p>Los puntos de referencia para el tiempo de carga del sitio son los siguientes: el inicio de la presentaci\u00f3n es de aproximadamente 1 segundo, cargando la p\u00e1gina luego de 3-5 segundos. En dicho marco, los usuarios no se quejar\u00e1n de la velocidad del sitio y el tiempo de descarga no limitar\u00e1 la efectividad del sitio.<\/p>\n<p>Estas cifras deben ser alcanzadas por usuarios reales, incluso en condiciones dif\u00edciles de conexi\u00f3n m\u00f3vil y dispositivos desactualizados.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"serveroptimization\">Optimizaci\u00f3n del servidor<\/h2>\n<p>&nbsp;<\/p>\n<p>Pasemos ahora a la aceleraci\u00f3n del propio sitio. La optimizaci\u00f3n de la parte del servidor es la medida m\u00e1s comprehensible y obvia para los desarrolladores. En primer lugar, la parte del servidor se supervisa y controla f\u00e1cilmente por parte de los administradores del sistema. En segundo lugar, con serios problemas con el tiempo de respuesta del servidor, la desaceleraci\u00f3n es notable para todos, independientemente de la velocidad de la conexi\u00f3n o el dispositivo.<\/p>\n<p>Si bien las razones para frenar el servidor pueden ser muy diversas, hay problemas t\u00edpicos a los que estar atentos mirar.<\/p>\n<p>&nbsp;<\/p>\n<h3>Hosting (recursos del servidor)<\/h3>\n<p>Esta es la raz\u00f3n n\u00famero uno del frenado en sitios web peque\u00f1os. Para <a href=\"http:\/\/test.sitechecker.pro\/es\/hosting-checker\/\">averiguar qui\u00e9n hosting un sitio web<\/a>, use nuestra herramienta en l\u00ednea. Ocurre que para cargar el sitio simplemente no hay suficientes recursos de alojamiento (por lo general, la CPU y la velocidad del sistema de disco). Si puede aumentar r\u00e1pidamente estos recursos, vale la pena intentarlo. En algunos casos, el problema ser\u00e1 resuelto. Si el costo de los recursos adicionales supera el costo del trabajo de optimizaci\u00f3n, debe continuar con los siguientes m\u00e9todos.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3>DBMS (base de datos del servidor)<\/h3>\n<p>Aqu\u00ed ya estamos entrando a la fuente del problema: la baja velocidad del c\u00f3digo fuente. A menudo, una aplicaci\u00f3n web se gasta en solicitudes de bases de datos. Esto es l\u00f3gico, ya que la tarea de una aplicaci\u00f3n web es recopilar datos y convertirlos seg\u00fan un patr\u00f3n determinado.<\/p>\n<p>Resolver el problema de respuestas lentas por parte de la base de datos generalmente se divide en dos etapas: ajuste del DBMS y optimizaci\u00f3n de las consultas y esquemas de datos.<\/p>\n<p>Afinar el DBMS (por ejemplo, usando MySQL) puede dar datos de aceleraci\u00f3n varias veces, en caso de que la sintonizaci\u00f3n no se haya realizado previamente. La afinaci\u00f3n puede dar un efecto dentro del 12%.<\/p>\n<p>La optimizaci\u00f3n de consultas y esquemas de datos es una forma radical de acelerar. Debido a esta optimizaci\u00f3n, es posible obtener una magnitud de aceleraci\u00f3n de diversos campos. Si el cambio en la estructura de la base de datos puede ocurrir sin intrusi\u00f3n en el c\u00f3digo del programa del sitio, entonces la optimizaci\u00f3n de solicitudes requerir\u00e1 tal intervenci\u00f3n.<\/p>\n<p>Para identificar las consultas lentas, se debe recopilar estad\u00edsticas sobre su carga en la base de datos durante un per\u00edodo bastante largo de tiempo. Luego, se analiza el registro y se identifican los candidatos para recibir una optimizaci\u00f3n.<\/p>\n<p>&nbsp;<\/p>\n<h3>Efecto del CMS y c\u00f3digo fuente<\/h3>\n<p>Se cree que la velocidad del sitio depende solo del CMS (motor). Los propietarios del sitio a menudo intentan dividir el CMS en r\u00e1pido y lento. Pero actualmente esto no es verdad.<\/p>\n<p>Por supuesto, la carga en el servidor depende del c\u00f3digo que se incluye en el CMS en uso. Sin embargo, los sistemas m\u00e1s populares intentan optimizarse para obtener la m\u00e1xima velocidad, as\u00ed que no deber\u00eda haber problemas fatales con la velocidad del sitio.<\/p>\n<p>Sin embargo, adem\u00e1s del c\u00f3digo CMS principal, el sitio puede contener m\u00f3dulos adicionales (complementos o plug-ins), extensiones y modificaciones a\u00f1adidas por parte de los desarrolladores del sitio. Este c\u00f3digo puede tener un impacto negativo en la velocidad del sitio.<\/p>\n<p>Adem\u00e1s, los problemas de velocidad ocurren cuando el sistema es mal utilizado. Por ejemplo, el sistema de blogs se usa para crear una tienda, as\u00ed como el sistema para sitios peque\u00f1os se usa para desarrollar un portal.<\/p>\n<p>&nbsp;<\/p>\n<h3>Caching o Almacenamiento de Cach\u00e9<\/h3>\n<p>El medio m\u00e1s poderoso y universal para aumentar la velocidad del servidor es tradicionalmente el almacenamiento en cach\u00e9. Aqu\u00ed estamos hablando de cach\u00e9 del lado del servidor, y no del almacenamiento de cach\u00e9 que se basa en encabezados de p\u00e1ginas. Si el c\u00e1lculo del resultado (ensamblaje de la p\u00e1gina o bloque) requiere de recursos significativos, coloque el resultado en el cach\u00e9 y actual\u00edcelo peri\u00f3dicamente.<\/p>\n<p>La idea es simple y compleja al mismo tiempo: los sistemas de almacenamiento en cach\u00e9 est\u00e1n construidos en los lenguajes de programaci\u00f3n, tambi\u00e9n los sistemas de administraci\u00f3n de sitios y los servidores web.<\/p>\n<p>Normalmente, el caching de las p\u00e1ginas le permite reducir el tiempo de \u201crenderizaci\u00f3n\u201d a decenas de milisegundos. Naturalmente, en este caso, el servidor experimenta f\u00e1cilmente picos de concurrencia.<\/p>\n<p>Aqu\u00ed hay dos problemas: no todo se puede almacenar en el cach\u00e9 y la memoria cach\u00e9 se debe deshabilitar correctamente (o descartar). Si se resuelven los problemas, se puede recomendar el almacenamiento en cach\u00e9 como un medio eficaz de aceleraci\u00f3n del servidor.<\/p>\n<p>&nbsp;<\/p>\n<h3>Optimizaci\u00f3n de TCP, TLS, HTTP\/2<\/h3>\n<p>En esta parte, combinamos optimizaciones sutiles de red que dan aceleraci\u00f3n al servidor. El efecto aqu\u00ed no es tan grande como en otros m\u00e9todos, pero se logra exclusivamente por configuraci\u00f3n, es decir, \u00a1gratis!<\/p>\n<p>Hoy se necesita ajustar el TCP para grandes proyectos y servidores con una conexi\u00f3n de 10G o m\u00e1s. Por esto debemos recordar: el subsistema de red se actualiza regularmente con el lanzamiento de nuevos n\u00facleos de Linux, por lo que vale la pena actualizarlo. La configuraci\u00f3n correcta del TLS (HTTPS) permite obtener un alto nivel de seguridad y minimizar el tiempo para establecer una conexi\u00f3n segura.<\/p>\n<p>Mozilla hace muy buenas recomendaciones al respecto.<\/p>\n<p>La nueva versi\u00f3n del protocolo HTTP &#8211; HTTP\/2 est\u00e1 dise\u00f1ada para acelerar la descarga de sitios web. Este protocolo apareci\u00f3 recientemente y ahora se usa activamente (alrededor del 20% del total de los sitios web). En general, en el protocolo HTTP\/2 los mecanismos de aceleraci\u00f3n est\u00e1n establecidos, el objetivo principal es reducir el efecto de los retrasos de la red en el tiempo de carga de la p\u00e1gina (solicitudes multiplexadas). Pero la aceleraci\u00f3n gracias al HTTP\/2 no siempre es exitosa, as\u00ed que mejor no conf\u00ede del todo en este protocolo.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"customeroptimization\">Optimizaci\u00f3n del cliente<\/h2>\n<p>&nbsp;<\/p>\n<p>A diferencia de la optimizaci\u00f3n del servidor, el cliente se refiere a todo lo que sucede en el navegador del usuario. Debido a esto, el control se hace complicado (diferentes dispositivos y navegadores) y surgen muchas reglas diferentes de optimizaci\u00f3n.<\/p>\n<p>A continuaci\u00f3n veremos los m\u00e9todos m\u00e1s efectivos y universales que se pueden usar en casi cualquier proyecto.<\/p>\n<p>&nbsp;<\/p>\n<h3>Optimizaci\u00f3n de ruta cr\u00edtica en CSS y JS<\/h3>\n<p>Ruta cr\u00edtica de representaci\u00f3n (o ruta cr\u00edtica de interpretaci\u00f3n): un conjunto de recursos para iniciar la representaci\u00f3n de la p\u00e1gina en el navegador. Normalmente, esta lista incluye el documento HTML, estilos CSS, fuentes y c\u00f3digo JS.<\/p>\n<p>Nuestra tarea como optimizadores de velocidad es acortar este camino, tanto en tiempo (teniendo en cuenta los retrasos de la red) como en tr\u00e1fico (tener en cuenta las conexiones lentas).<\/p>\n<p>La forma m\u00e1s f\u00e1cil de determinar la ruta cr\u00edtica es iniciar una auditor\u00eda en Chrome (en el Panel del desarrollador), ya que el plug-in Lighthouse determina su composici\u00f3n y el tiempo de arranque, teniendo en cuenta las conexiones lentas.<\/p>\n<p>La t\u00e9cnica principal para reducir la ruta cr\u00edtica es: eliminar todo lo que no es necesario o todo lo que pueda posponerse. Por ejemplo, la mayor parte del c\u00f3digo JS puede diferirse antes de que se cargue la p\u00e1gina. Para hacer esto, coloque la llamada de recurso JS al final del documento HTML o use el atributo \u201casync\u201d.<\/p>\n<p>Para la carga diferida o retrasada del CSS, es posible utilizar una conexi\u00f3n din\u00e1mica de estilos a trav\u00e9s de JS (esperando el evento domContentLoaded).<\/p>\n<p>&nbsp;<\/p>\n<h3>Optimizando las fuentes web<\/h3>\n<p>La conexi\u00f3n de fuentes web hoy en d\u00eda se ha convertido casi en un est\u00e1ndar en dise\u00f1o. Desafortunadamente, afectan negativamente la velocidad de la representaci\u00f3n de la p\u00e1gina. Las fuentes web son recursos adicionales que se deben obtener antes de comenzar a dibujar el texto.<\/p>\n<p>La situaci\u00f3n empeora porque a menudo los punteros de los archivos de fuentes est\u00e1n ocultos en un archivo CSS, y su carga tampoco ocurre al instante. A muchos desarrolladores les gusta usar servicios p\u00fablicos de fuentes web (por ejemplo, Google Fonts), que causan a\u00fan m\u00e1s retrasos (conexiones adicionales y m\u00e1s archivos CSS).<\/p>\n<p>Las reglas de optimizaci\u00f3n consisten en reducir el tama\u00f1o del tr\u00e1fico de fuentes web y obtenerlas lo m\u00e1s r\u00e1pido posible.<\/p>\n<p>Para reducir el tr\u00e1fico, se debe usar formatos modernos: WOFF2 para navegadores modernos, o WOFF para lograr compatibilidad. Adem\u00e1s, solo necesita incluir aquellos juegos de caracteres que se usan en el sitio (por ejemplo, lat\u00edn \u00f3 cir\u00edlico).<\/p>\n<p>Para influir en la r\u00e1pida visualizaci\u00f3n de las fuentes web, se puede usar el nuevo enlace de especificaci\u00f3n rel=&#8221;preload&#8221; y la propiedad font-display de CSS. Esta pre-carga (preload) permitir\u00e1 expresarle al navegador lo antes posible la necesidad de descargar un archivo de fuentes, mientras que font-display proporciona una forma flexible de controlar el comportamiento del navegador en caso de retrasos del archivo (esperar, usar un repuesto, no esperar una fuente de m\u00e1s de tres segundos).<\/p>\n<p>&nbsp;<\/p>\n<h3>Optimizando las im\u00e1genes<\/h3>\n<p>Las im\u00e1genes son la mayor parte del peso de un sitio moderno. Por supuesto, las im\u00e1genes no son recursos tan extremos para una p\u00e1gina como CSS y c\u00f3digo JS. Pero para muchos sitios, las im\u00e1genes son una parte importante del contenido: recuerde que cualquier tarjeta de producto en una tienda en l\u00ednea tiene una imagen.<\/p>\n<p>La t\u00e9cnica principal para optimizar im\u00e1genes es reducir su tama\u00f1o. Para hacer esto, use los formatos correctos y herramientas de compresi\u00f3n:<\/p>\n<ul>\n<li>\u00a0PNG para im\u00e1genes con transparencia y texto;<\/li>\n<li>JPEG para fotos e im\u00e1genes complejas;<\/li>\n<li>SVG para gr\u00e1ficos y vectores.<\/li>\n<\/ul>\n<p>Adem\u00e1s de estos formatos, se est\u00e1n desarrollando otros nuevos: por ejemplo, el WebP de Google. Este formato puede cubrir el \u00e1rea de uso de PNG y JPEG: admite compresi\u00f3n con perdida y sin perdida, transparencia e incluso animaci\u00f3n. Para usarlo, es suficiente crear una copia de las im\u00e1genes en WebP y d\u00e1rselas a los navegadores que las admiten.<\/p>\n<p>Para el formato PNG hay muchas utilidades de optimizaci\u00f3n que se pueden usar para reducir el <a href=\"http:\/\/test.sitechecker.pro\/es\/page-size\/\">tama\u00f1o web<\/a>, por ejemplo, OptiPNG, PNGout, <a href=\"https:\/\/ewww.io\/plans\/ref\/156\/\">EWWW Image Optimizer<\/a> y otros. Adem\u00e1s, la optimizaci\u00f3n interna de la compresi\u00f3n de datos se puede realizar utilizando zopfliPNG.<\/p>\n<p>La idea principal de dicho software es seleccionar los par\u00e1metros de compresi\u00f3n \u00f3ptimos, eliminando datos innecesarios del archivo. Debes tener cuidado aqu\u00ed: algunas utilidades sufren p\u00e9rdida de calidad, lo cual puede no ser adecuado para ti (si esperas que salga la misma imagen).<\/p>\n<p>La optimizaci\u00f3n de JPEG tambi\u00e9n se divide en dos tipos: con p\u00e9rdida y sin p\u00e9rdida. En general, podemos recomendar el paquete Mozilla JPEG, que est\u00e1 especialmente dise\u00f1ado para una mejor compresi\u00f3n en este formato. Para la optimizaci\u00f3n sin p\u00e9rdida, se puede usar jpegtran, y para la optimizaci\u00f3n con p\u00e9rdidas, se puede utilizar cjpeg.<\/p>\n<p>&nbsp;<\/p>\n<h3>Encabezados Cach\u00e9<\/h3>\n<p>Este es el m\u00e9todo m\u00e1s simple de optimizaci\u00f3n para el cliente. Su efectividad radica en el almacenamiento de recursos excepcionales en el cach\u00e9 del navegador: im\u00e1genes, CSS y archivos JS, fuentes, a veces incluso el documento HTML en s\u00ed mismo. Como resultado, cada recurso se solicita del servidor solo una vez.<\/p>\n<p>Si est\u00e1 usando Nginx, simplemente agregue el comando:<\/p>\n<div class=\"code\"><code>add_header Cache-Control \"max-age=31536000, immutable\";<\/code><\/div>\n<p>Si est\u00e1 usando Nginx, simplemente agregue el comando:<\/p>\n<p>A partir de ahora, el navegador tiene derecho a almacenar en el cach\u00e9 los recursos hasta por un a\u00f1o (lo cual es casi para siempre). El nuevo par\u00e1metro &#8220;inmutable&#8221; indica que el recurso no va a cambiar.<\/p>\n<p>Por supuesto, surge la pregunta: \u00bfy si necesitamos cambiar el recurso almacenado? La respuesta es simple: cambie su direcci\u00f3n URL.<\/p>\n<p>Por ejemplo, puede agregar una versi\u00f3n a un nombre de archivo. Para los documentos HTML, este m\u00e9todo tambi\u00e9n es aplicable, pero, como regla general, se utiliza un per\u00edodo m\u00e1s corto de almacenamiento en cach\u00e9 (por ejemplo, un minuto o una hora).<\/p>\n<p>&nbsp;<\/p>\n<h3>Compresi\u00f3n de datos<\/h3>\n<p>Una pr\u00e1ctica obligatoria es la compresi\u00f3n de cualquier informaci\u00f3n de texto cuando se transfiere desde el servidor al navegador. La mayor\u00eda de los servidores web tienen una implementaci\u00f3n de respuestas en gzip-compression.<\/p>\n<p>Sin embargo, la activaci\u00f3n de una compresi\u00f3n simple no es suficiente.<\/p>\n<p>Primero, la relaci\u00f3n de compresi\u00f3n es ajustable y debe estar cerca del m\u00e1ximo.<\/p>\n<p>En segundo lugar, se puede usar la compresi\u00f3n est\u00e1tica, es decir, precomprimir archivos y colocarlos en el disco. Luego, el servidor web buscar\u00e1 la versi\u00f3n comprimida y la har\u00e1 llegar de inmediato.<\/p>\n<p>En tercer lugar, se puede utilizar algoritmos de compresi\u00f3n m\u00e1s eficientes: zopfli (compatible con gzip) y brotli (un nuevo algoritmo de compresi\u00f3n). Brotli solo funcionar\u00e1 con HTTPS.<\/p>\n<p>Como estos algoritmos (especialmente zopfli) son costosos cuando se trata de comprimir, siempre los usamos en la versi\u00f3n est\u00e1tica.<\/p>\n<p>Para maximizar el efecto de la compresi\u00f3n de archivos, el proceso de \u201cminificaci\u00f3n\u201d se aplica de manera preliminar: elimina traducciones innecesarias de cadenas, espacios y otros caracteres innecesarios. Este proceso es espec\u00edfico para cada formato. Adem\u00e1s, se debe comprimir otros datos de texto en el sitio.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"usingcdn\">Usando el CDN<\/h2>\n<p>&nbsp;<\/p>\n<p>Aplicar el CDN (red de entrega de contenido) para la aceleraci\u00f3n del sitio web es una medida muy punlicitada, que tiene un mont\u00f3n de marketing en torno a su esencia tecnol\u00f3gica.<\/p>\n<p>&nbsp;<\/p>\n<h3>Teor\u00eda: el porqu\u00e9<\/h3>\n<p>Inicialmente, los CDN se dise\u00f1aron para descargar los canales de Internet de los sitios web de medios de difusi\u00f3n. Por ejemplo, cuando se ve un video en vivo, varios miles de espectadores crean una carga muy pesada en el ancho de la banda del servidor.<\/p>\n<p>Adem\u00e1s, se pensaron para garantizar la calidad ininterrumpida de la comunicaci\u00f3n con grandes clientes y la eliminaci\u00f3n del servidor que es extremadamente dif\u00edcil (debido a retrasos e inestabilidad de la red).<\/p>\n<p>La soluci\u00f3n a este problema fue crear un CDN, es decir, una red distribuida a la que los clientes (por ejemplo, los espectadores) estaban conectados, y los hosts de esta red ya est\u00e1n en el servidor (origen). Al mismo tiempo, el n\u00famero de conexiones al servidor se redujo a uno (de varios), y el n\u00famero de conexiones al CDN podr\u00eda llegar a millones debido al almacenamiento en cach\u00e9 del contenido de la red.<\/p>\n<p>Hoy en d\u00eda, la mayor\u00eda de los CDN se posicionan como un medio para acelerar los sitios web, principalmente al reducir la distancia entre el contenido y el cliente (el visitante del sitio).<\/p>\n<p>&nbsp;<\/p>\n<h3>Posibles efectos<\/h3>\n<p>\u00bfC\u00f3mo se puede acelerar un sitio usando CDN?<\/p>\n<p>S\u00ed, de hecho, por regla general, el usuario se conecta al servidor de red m\u00e1s cercano (seg\u00fan su tiempo de acceso) y obtiene un r\u00e1pido procesamiento para establecer la conexi\u00f3n TCP y TLS. Adem\u00e1s, si el contenido est\u00e1 en el servidor CDN, el usuario puede recibirlo r\u00e1pidamente. Por lo tanto, la carga en nuestro propio servidor se reduce.<\/p>\n<p>En segundo lugar, el CDN no puede simplemente distribuir contenido sin cambios, sino optimizarlo por su lado y entregarlo en una forma m\u00e1s compacta: este comprime im\u00e1genes, aplica compresi\u00f3n a la prueba, entre tantas otras pr\u00e1cticas. Debido a tales optimizaciones, puede obtener un tiempo de descarga m\u00e1s corto.<\/p>\n<p>&nbsp;<\/p>\n<h3>Desventajas del uso de CDN<\/h3>\n<p>Las desventajas, como de costumbre, siguen tras las ventajas: el objeto puede no estar en la memoria cach\u00e9 del nodo CDN. Por ejemplo, a\u00fan no se ha solicitado o no se puede almacenar en cach\u00e9 (como un documento HTML). En este caso, tenemos retrasos adicionales entre el nodo CDN y nuestro servidor.<\/p>\n<p>A pesar de que las CDN est\u00e1n dise\u00f1adas para acelerar el acceso al sitio, hay situaciones en las que la ruta de la red ser\u00e1 menos \u00f3ptima que sin la CDN. Es especialmente importante para las CDN globales, para lo cual Rusia no es un mercado prioritario.<\/p>\n<p>Finalmente, las redes de entrega de contenido son sistemas muy complejos, donde los bloqueos, la inestabilidad y otros problemas tambi\u00e9n son posibles en todas partes. Usando CDN, agregamos un nivel m\u00e1s de complejidad.<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"conclusions\">Nosotros optimizamos los resultados<\/h2>\n<p>&nbsp;<\/p>\n<p>Digamos que usted logr\u00f3 alcanzar una buena velocidad en su sitio web. Los usuarios y los propietarios del lugar est\u00e1n contentos. \u00bfSignifica que puede olvidarse del problema de la velocidad? Por supuesto que no. Por supuesto no. Para lograr una calidad constante en el trabajo del sitio, debe <a href=\"http:\/\/test.sitechecker.pro\/es\/website-monitoring\/\">monitorear el sitio web<\/a> de forma permanente.<\/p>\n<p>&nbsp;<\/p>\n<h3>Soporte de aceleraci\u00f3n<\/h3>\n<p>Cualquier proyecci\u00f3n web en vivo se actualiza regularmente, los cambios ocurren tanto en plantillas comunes (temas de dise\u00f1o, interfaces) como en contenido. Adem\u00e1s, el c\u00f3digo fuente (tanto en cliente como en servidor) est\u00e1 cambiando activamente.<\/p>\n<p>Cada cambio puede afectar la velocidad del sitio. Para monitorear este impacto, se debe implementar un sistema de monitoreo de velocidad sint\u00e9tica de sitio sint\u00e9tico en la etapa de desarrollo. Por lo tanto, los problemas de velocidad pueden ser interceptados antes de que los usuarios los noten.<\/p>\n<p>Para optimizar el contenido entrante o nuevo, se requiere la integraci\u00f3n de procedimientos de optimizaci\u00f3n en el sistema de gesti\u00f3n de contenido. En primer lugar, esto se refiere al procesamiento de im\u00e1genes.<\/p>\n<p>La aceleraci\u00f3n de sitios es un \u00e1rea muy din\u00e1mica; est\u00e1n surgiendo nuevos est\u00e1ndares y su soporte por parte de los navegadores est\u00e1 cambiando. Por lo tanto, es importante auditar peri\u00f3dicamente la tecnolog\u00eda del proyecto, los procesos y el software utilizado.<\/p>\n<p>&nbsp;<\/p>\n<h3>Monitoreo de la velocidad real del usuario<\/h3>\n<p>Las pruebas sint\u00e9ticas en condiciones ideales de laboratorio son muy \u00fatiles para evaluar los cambios en el c\u00f3digo fuente, pero no son suficientes. Al final, queremos que el sitio funcione r\u00e1pido para usuarios reales. Para recopilar estos datos, hay un control de velocidad en el lado del usuario (RUM &#8211; monitoreo real del usuario).<\/p>\n<p>Para organizar el RUM, basta con conectar uno de los sistemas de an\u00e1lisis web (Yandex.Metrica, Google Analytics) y ver informes sobre el momento de la descarga del sitio. Para obtener datos m\u00e1s detallados y precisos, se pueden usar servicios especializados de monitoreo de velocidad.<\/p>\n<p>&nbsp;<\/p>\n<h3>Conclusiones<\/h3>\n<p>El tema de velocidad del sitio web es extenso y afecta muchos aspectos del desarrollo y soporte de una aplicaci\u00f3n web: desde el c\u00f3digo del servidor hasta el contenido del mismo. Esto significa que obtener buenos resultados es imposible sin involucrar al equipo de desarrollo.<\/p>\n<p>Lo m\u00e1s importante: recuerde a los usuarios y tenga en cuenta las diversas condiciones para usar el sitio.<\/p>\n<p>La aceleraci\u00f3n del sitio es un proceso que ocurre con diferente intensidad a lo largo del ciclo de vida del proyecto.<\/p>","protected":false},"excerpt":{"rendered":"&nbsp; Todos saben que un sitio web lento es malo. Cuando una plataforma de este tipo se frena al cargar, surgen problemas serios en la soluci\u00f3n de las tareas cotidianas. A veces es simplemente molesto. A menudo, el frenado del sitio es un colapso, y con este existe un servicio negativo: las personas no esperan&#8230;","protected":false},"author":10380808,"featured_media":3348,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"pages-templates\/pages-minitools-3.php","meta":[],"categories":[60],"tags":[],"_links":{"self":[{"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/pages\/1063"}],"collection":[{"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/users\/10380808"}],"replies":[{"embeddable":true,"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/comments?post=1063"}],"version-history":[{"count":0,"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/pages\/1063\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/media\/3348"}],"wp:attachment":[{"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/media?parent=1063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/categories?post=1063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/test.sitechecker.pro\/es\/wp-json\/wp\/v2\/tags?post=1063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}