{"id":29102,"date":"2021-08-14T13:25:46","date_gmt":"2021-08-14T13:25:46","guid":{"rendered":"https:\/\/www.conectasoftware.com\/glossary\/wpo\/"},"modified":"2021-12-15T13:48:53","modified_gmt":"2021-12-15T13:48:53","slug":"wpo","status":"publish","type":"glossary","link":"https:\/\/www.conectasoftware.com\/magazine\/glosario\/wpo\/","title":{"rendered":"WPO<span class=\"dashicons \" data-icon=\"\" style=\"color:#000;display:inline;vertical-align:baseline;\"><\/span>"},"content":{"rendered":"<p><b>WPO (Web Performance Optimization)<\/b> es un acr\u00f3nimo que se refiere a las t\u00e9cnicas de Optimizaci\u00f3n de Rendimiento de una p\u00e1gina web.<br \/>Est\u00e1 estrechamente relacionado con <a href=\"https:\/\/www.conectasoftware.com\/magazine\/glosario\/seo\/\"><b>SEO<\/b><\/a>, la optimizaci\u00f3n de una web para motores de b\u00fasqueda y la <a href=\"https:\/\/www.conectasoftware.com\/magazine\/glosario\/ux\/\"><b>UX<\/b><\/a>, experiencia de usuario al visitar la web.<\/p>\n<p>\u00bfQu\u00e9 significa rendimiento en el entorno web? Se refiere al tiempo de carga del contenido de la p\u00e1gina web. Cuanto m\u00e1s r\u00e1pido se muestra el contenido al usuario, mejor el rendimiento.<\/p>\n<h2>\u00bfC\u00f3mo optimizar el rendimiento de una web?<\/h2>\n<p>Hay t\u00e9cnicas y herramientas para identificar los posibles problemas que causan un rendimiento deficiente a trav\u00e9s de una auditoria. Una vez identificadas, muchas de estas mismas herramientas ofrecen soluciones para la mejora.<br \/>C\u00f3mo resumen, podemos destacar los siguientes factores principales:<br \/>&#8211; Hosting de calidad<br \/>&#8211; Compresi\u00f3n GZIP<br \/>&#8211; Uso de CDN<br \/>&#8211; Optimizaci\u00f3n de la cach\u00e9 (minimizaci\u00f3n de elementos como <a href=\"https:\/\/www.conectasoftware.com\/magazine\/glosario\/html\/\">HTML<\/a>, <a href=\"https:\/\/www.conectasoftware.com\/magazine\/glosario\/css\/\">CSS<\/a> y <a href=\"https:\/\/www.conectasoftware.com\/magazine\/glosario\/javascript\/\">JavaScript<\/a>)<br \/>&#8211; Plantillas web optimizadas<br \/>&#8211; Im\u00e1genes optimizadas<br \/>&#8211; Plugins optimizados<\/p>\n<h2>La velocidad de carga y la experiencia m\u00f3vil en WPO<\/h2>\n<p>La velocidad de carga es un factor de ranking en SERPS reconocido por Google, y mientras que se tiene en cuenta en todos los tipos de dispositivos, tiene prioridad la experiencia en <b>dispositivos m\u00f3viles<\/b>, dado que dependen del uso de conexiones de datos m\u00f3viles.<\/p>\n<p>Google introduce con sus <a href=\"https:\/\/www.conectasoftware.com\/magazine\/glosario\/web-vitals\/\"><b>Core Web Vitals<\/b><\/a> las m\u00e9tricas m\u00e1s importantes para evaluar el rendimiento de una web para su motor de b\u00fasqueda.<br \/>Para la experiencia en m\u00f3viles, adem\u00e1s promueve las <a href=\"https:\/\/www.conectasoftware.com\/magazine\/glosario\/amp\/\"><b>AMP<\/b><\/a>, P\u00e1ginas M\u00f3viles Aceleradas.<\/p>\n<h2>Herramientas WPO de velocidad de carga web<\/h2>\n<p><\/p>\n<h3>Page Speed Insights de Google<\/h3>\n<p>Page Speed es una de las herramientas m\u00e1s utilizadas para evaluar el rendimiento de una web. Esto tiene dos razones: En primer lugar, es gratuita y en segundo, que es de Google.<br \/>En cuesti\u00f3n de segundos, aporta informaci\u00f3n detallada sobre cada aspecto t\u00e9cnico de la web y sugerencias de mejora.<\/p>\n<p>Ir a <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener\">Page Speed<\/a><\/p>\n<h3>GTmetrix<\/h3>\n<p>GTmetrix es una herramienta gratuita para probar y monitorizar el rendimiento de la p\u00e1gina. Utilizando <a href=\"https:\/\/www.conectasoftware.com\/magazine\/glosario\/google-lighthouse\/\">Lighthouse<\/a>, GTmetrix genera puntuaciones para las p\u00e1ginas y ofrece consejos acionables.<\/p>\n<p>Ir a <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noopener\">GTmetrix<\/a><\/p>\n<h3>WebPageTest<\/h3>\n<p>WebPageTest es otra herramienta gratuita para la velocidad de sitios web utilizando navegadores reales a velocidades de conexi\u00f3n del consumidor con recomendaciones de optimizaci\u00f3n detalladas. Se pueden ejecutar pruebas sencillas o realizar pruebas avanzadas que incluyan transacciones de varios pasos, captura de v\u00eddeo, bloqueo de contenidos y mucho m\u00e1s. El diagn\u00f3stico incluye gr\u00e1ficos de cascada de carga de recursos, comprobaciones de optimizaci\u00f3n de la velocidad de la p\u00e1gina y sugerencias de mejora.<\/p>\n<p>Ir a <a href=\"https:\/\/www.webpagetest.org\/\" target=\"_blank\" rel=\"noopener\">WebPageTest<\/a><\/p>\n<h2>Optimizaci\u00f3n de im\u00e1genes para WPO<\/h2>\n<p>Las im\u00e1genes son m\u00e1s grandes que el texto plano, lo que significa que tardan m\u00e1s en cargarse y pueden ralentizar la carga de la p\u00e1gina web.<br \/>Esto no significa prescindir de im\u00e1genes, ya que ayudan a hacer el contenido de la p\u00e1gina m\u00e1s atractiva, m\u00e1s f\u00e1cil de entender e invitan a la interacci\u00f3n.<\/p>\n<p>La soluci\u00f3n est\u00e1 en elegir que im\u00e1genes son necesarias, prescindir de las que no aportan valor y optimizar aquellas que se publicar\u00e1n.<br \/>La mejor manera de hacerlo es utilizando Photoshop u otro software de edici\u00f3n de im\u00e1genes antes de subir la imagen. La edici\u00f3n previa da m\u00e1s control sobre la calidad de las im\u00e1genes.<br \/>Sin embargo, esta no es la \u00fanica soluci\u00f3n. Si usamos WordPress, hay varios plugins de compresi\u00f3n de im\u00e1genes. Estos optimizan las im\u00e1genes comprimi\u00e9ndolas autom\u00e1ticamente y utilizando la versi\u00f3n de menor tama\u00f1o en la web.<\/p>\n<h3>Formatos de imagen<\/h3>\n<p>Los dos formatos de imagen m\u00e1s utilizados en Internet son JPEG y PNG.<\/p>\n<h4>JPG<\/h4>\n<p>Los archivos JPEG son una buena opci\u00f3n tanto para la impresi\u00f3n como para la web. Este tipo de archivo de imagen utiliza lo que se llama un formato \u00ablossy\u00bb (con p\u00e9rdidas). Esto significa que se pierde informaci\u00f3n de la im\u00e1gen al comprimirla. Esta informaci\u00f3n sin embargo no es necesaria para simplemente mostrar la im\u00e1gen.<\/p>\n<h4>PNG<\/h4>\n<p>Los PNG pueden tener fondos transparentes, por lo que son m\u00e1s vers\u00e1tiles. Utilizan un formato de archivo \u00ablossless(sin p\u00e9rdidas)\u00bb. Esto significa que toda la informaci\u00f3n sobre la imagen se conserva cuando se comprime el archivo. Como resultado, tienden a ser de mayor calidad, pero ofrecen una menor mejora en el tama\u00f1o de los archivos y la velocidad de las p\u00e1ginas.<br \/>Son una buena opci\u00f3n para gr\u00e1ficos e iconos, y para im\u00e1genes de muy alta calidad.<\/p>\n<h2>Lista de plugins WPO para WordPress<\/h2>\n<p>WPOptimize ir al <a href=\"https:\/\/getwpo.com\/\" target=\"_blank\" rel=\"noopener\">plugin<\/a><br \/>Autoptimize ir al <a href=\"https:\/\/wordpress.org\/plugins\/autoptimize\/\" target=\"_blank\" rel=\"noopener\">plugin<\/a><br \/>WPRocket ir al <a href=\"https:\/\/wp-rocket.me\/\" target=\"_blank\" rel=\"noopener\">plugin<\/a><br \/>Smush ir al <a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener\">plugin<\/a><br \/>EWWW Image Optimize ir al <a href=\"https:\/\/ewww.io\/\" target=\"_blank\" rel=\"noopener\">plugin<\/a><br \/>Wordfence Security ir al <a href=\"https:\/\/www.wordfence.com\/\" target=\"_blank\" rel=\"noopener\">plugin<\/a><br \/>W3 Total Cache ir al <a href=\"https:\/\/wordpress.org\/plugins\/w3-total-cache\/\" target=\"_blank\" rel=\"noopener\">plugin<\/a><\/p>\n<div class=\"ms-editor-squiggler\" style=\"color: initial; font: initial; font-feature-settings: initial; font-kerning: initial; font-optical-sizing: initial; font-variation-settings: initial; text-orientation: initial; text-rendering: initial; -webkit-font-smoothing: initial; -webkit-locale: initial; -webkit-text-orientation: initial; -webkit-writing-mode: initial; writing-mode: initial; zoom: initial; place-content: initial; place-items: initial; place-self: initial; alignment-baseline: initial; animation: initial; appearance: initial; backdrop-filter: initial; backface-visibility: initial; background: initial; background-blend-mode: initial; baseline-shift: initial; block-size: initial; border-block: initial; border: initial; border-radius: initial; border-collapse: initial; border-inline: initial; inset: initial; box-shadow: initial; box-sizing: initial; break-after: initial; break-before: initial; break-inside: initial; buffered-rendering: initial; caption-side: initial; caret-color: initial; clear: initial; clip: initial; clip-path: initial; clip-rule: initial; color-interpolation: initial; color-interpolation-filters: initial; color-rendering: initial; color-scheme: initial; columns: initial; column-fill: initial; gap: initial; column-rule: initial; column-span: initial; contain: initial; contain-intrinsic-size: initial; content: initial; content-visibility: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; cursor: initial; cx: initial; cy: initial; d: initial; display: block; dominant-baseline: initial; empty-cells: initial; fill: initial; fill-opacity: initial; fill-rule: initial; filter: initial; flex: initial; flex-flow: initial; float: initial; flood-color: initial; flood-opacity: initial; grid: initial; grid-area: initial; height: 0px; hyphens: initial; image-orientation: initial; image-rendering: initial; inline-size: initial; inset-block: initial; inset-inline: initial; isolation: initial; letter-spacing: initial; lighting-color: initial; line-break: initial; list-style: initial; margin-block: initial; margin: initial; margin-inline: initial; marker: initial; mask: initial; mask-type: initial; max-block-size: initial; max-height: initial; max-inline-size: initial; max-width: initial; min-block-size: initial; min-height: initial; min-inline-size: initial; min-width: initial; mix-blend-mode: initial; object-fit: initial; object-position: initial; offset: initial; opacity: initial; order: initial; origin-trial-test-property: initial; orphans: initial; outline: initial; outline-offset: initial; overflow-anchor: initial; overflow-wrap: initial; overflow: initial; overscroll-behavior-block: initial; overscroll-behavior-inline: initial; overscroll-behavior: initial; padding-block: initial; padding: initial; padding-inline: initial; page: initial; page-orientation: initial; paint-order: initial; perspective: initial; perspective-origin: initial; pointer-events: initial; position: initial; quotes: initial; r: initial; resize: initial; ruby-position: initial; rx: initial; ry: initial; scroll-behavior: initial; scroll-margin-block: initial; scroll-margin: initial; scroll-margin-inline: initial; scroll-padding-block: initial; scroll-padding: initial; scroll-padding-inline: initial; scroll-snap-align: initial; scroll-snap-stop: initial; scroll-snap-type: initial; shape-image-threshold: initial; shape-margin: initial; shape-outside: initial; shape-rendering: initial; size: initial; speak: initial; stop-color: initial; stop-opacity: initial; stroke: initial; stroke-dasharray: initial; stroke-dashoffset: initial; stroke-linecap: initial; stroke-linejoin: initial; stroke-miterlimit: initial; stroke-opacity: initial; stroke-width: initial; tab-size: initial; table-layout: initial; text-align: initial; text-align-last: initial; text-anchor: initial; text-combine-upright: initial; text-decoration: initial; text-decoration-skip-ink: initial; text-indent: initial; text-overflow: initial; text-shadow: initial; text-size-adjust: initial; text-transform: initial; text-underline-offset: initial; text-underline-position: initial; touch-action: initial; transform: initial; transform-box: initial; transform-origin: initial; transform-style: initial; transition: initial; user-select: initial; vector-effect: initial; vertical-align: initial; visibility: initial; -webkit-app-region: initial; border-spacing: initial; -webkit-border-image: initial; -webkit-box-align: initial; -webkit-box-decoration-break: initial; -webkit-box-direction: initial; -webkit-box-flex: initial; -webkit-box-ordinal-group: initial; -webkit-box-orient: initial; -webkit-box-pack: initial; -webkit-box-reflect: initial; -webkit-highlight: initial; -webkit-hyphenate-character: initial; -webkit-line-break: initial; -webkit-line-clamp: initial; -webkit-mask-box-image: initial; -webkit-mask: initial; -webkit-mask-composite: initial; -webkit-perspective-origin-x: initial; -webkit-perspective-origin-y: initial; -webkit-print-color-adjust: initial; -webkit-rtl-ordering: initial; -webkit-ruby-position: initial; -webkit-tap-highlight-color: initial; -webkit-text-combine: initial; -webkit-text-decorations-in-effect: initial; -webkit-text-emphasis: initial; -webkit-text-emphasis-position: initial; -webkit-text-fill-color: initial; -webkit-text-security: initial; -webkit-text-stroke: initial; -webkit-transform-origin-x: initial; -webkit-transform-origin-y: initial; -webkit-transform-origin-z: initial; -webkit-user-drag: initial; -webkit-user-modify: initial; white-space: initial; widows: initial; width: initial; will-change: initial; word-break: initial; word-spacing: initial; x: initial; y: initial; z-index: initial;\"><\/div>\n<p><\/p>\n<div class=\"ms-editor-squiggler\" style=\"color: initial; font: initial; font-feature-settings: initial; font-kerning: initial; font-optical-sizing: initial; font-variation-settings: initial; text-orientation: initial; text-rendering: initial; -webkit-font-smoothing: initial; -webkit-locale: initial; -webkit-text-orientation: initial; -webkit-writing-mode: initial; writing-mode: initial; zoom: initial; place-content: initial; place-items: initial; place-self: initial; alignment-baseline: initial; animation: initial; appearance: initial; backdrop-filter: initial; backface-visibility: initial; background: initial; background-blend-mode: initial; baseline-shift: initial; block-size: initial; border-block: initial; border: initial; border-radius: initial; border-collapse: initial; border-inline: initial; inset: initial; box-shadow: initial; box-sizing: initial; break-after: initial; break-before: initial; break-inside: initial; buffered-rendering: initial; caption-side: initial; caret-color: initial; clear: initial; clip: initial; clip-path: initial; clip-rule: initial; color-interpolation: initial; color-interpolation-filters: initial; color-rendering: initial; color-scheme: initial; columns: initial; column-fill: initial; gap: initial; column-rule: initial; column-span: initial; contain: initial; contain-intrinsic-size: initial; content: initial; content-visibility: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; cursor: initial; cx: initial; cy: initial; d: initial; display: block; dominant-baseline: initial; empty-cells: initial; fill: initial; fill-opacity: initial; fill-rule: initial; filter: initial; flex: initial; flex-flow: initial; float: initial; flood-color: initial; flood-opacity: initial; grid: initial; grid-area: initial; height: 0px; hyphens: initial; image-orientation: initial; image-rendering: initial; inline-size: initial; inset-block: initial; inset-inline: initial; isolation: initial; letter-spacing: initial; lighting-color: initial; line-break: initial; list-style: initial; margin-block: initial; margin: initial; margin-inline: initial; marker: initial; mask: initial; mask-type: initial; max-block-size: initial; max-height: initial; max-inline-size: initial; max-width: initial; min-block-size: initial; min-height: initial; min-inline-size: initial; min-width: initial; mix-blend-mode: initial; object-fit: initial; object-position: initial; offset: initial; opacity: initial; order: initial; origin-trial-test-property: initial; orphans: initial; outline: initial; outline-offset: initial; overflow-anchor: initial; overflow-wrap: initial; overflow: initial; overscroll-behavior-block: initial; overscroll-behavior-inline: initial; overscroll-behavior: initial; padding-block: initial; padding: initial; padding-inline: initial; page: initial; page-orientation: initial; paint-order: initial; perspective: initial; perspective-origin: initial; pointer-events: initial; position: initial; quotes: initial; r: initial; resize: initial; ruby-position: initial; rx: initial; ry: initial; scroll-behavior: initial; scroll-margin-block: initial; scroll-margin: initial; scroll-margin-inline: initial; scroll-padding-block: initial; scroll-padding: initial; scroll-padding-inline: initial; scroll-snap-align: initial; scroll-snap-stop: initial; scroll-snap-type: initial; shape-image-threshold: initial; shape-margin: initial; shape-outside: initial; shape-rendering: initial; size: initial; speak: initial; stop-color: initial; stop-opacity: initial; stroke: initial; stroke-dasharray: initial; stroke-dashoffset: initial; stroke-linecap: initial; stroke-linejoin: initial; stroke-miterlimit: initial; stroke-opacity: initial; stroke-width: initial; tab-size: initial; table-layout: initial; text-align: initial; text-align-last: initial; text-anchor: initial; text-combine-upright: initial; text-decoration: initial; text-decoration-skip-ink: initial; text-indent: initial; text-overflow: initial; text-shadow: initial; text-size-adjust: initial; text-transform: initial; text-underline-offset: initial; text-underline-position: initial; touch-action: initial; transform: initial; transform-box: initial; transform-origin: initial; transform-style: initial; transition: initial; user-select: initial; vector-effect: initial; vertical-align: initial; visibility: initial; -webkit-app-region: initial; border-spacing: initial; -webkit-border-image: initial; -webkit-box-align: initial; -webkit-box-decoration-break: initial; -webkit-box-direction: initial; -webkit-box-flex: initial; -webkit-box-ordinal-group: initial; -webkit-box-orient: initial; -webkit-box-pack: initial; -webkit-box-reflect: initial; -webkit-highlight: initial; -webkit-hyphenate-character: initial; -webkit-line-break: initial; -webkit-line-clamp: initial; -webkit-mask-box-image: initial; -webkit-mask: initial; -webkit-mask-composite: initial; -webkit-perspective-origin-x: initial; -webkit-perspective-origin-y: initial; -webkit-print-color-adjust: initial; -webkit-rtl-ordering: initial; -webkit-ruby-position: initial; -webkit-tap-highlight-color: initial; -webkit-text-combine: initial; -webkit-text-decorations-in-effect: initial; -webkit-text-emphasis: initial; -webkit-text-emphasis-position: initial; -webkit-text-fill-color: initial; -webkit-text-security: initial; -webkit-text-stroke: initial; -webkit-transform-origin-x: initial; -webkit-transform-origin-y: initial; -webkit-transform-origin-z: initial; -webkit-user-drag: initial; -webkit-user-modify: initial; white-space: initial; widows: initial; width: initial; will-change: initial; word-break: initial; word-spacing: initial; x: initial; y: initial; z-index: initial;\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>WPO (Web Performance Optimization) es un acr\u00f3nimo que se refiere a las t\u00e9cnicas de Optimizaci\u00f3n de Rendimiento de una p\u00e1gina web.<br \/>Est\u00e1 estrechamente relacionado con SEO, la optimizaci\u00f3n de una web para motores de b\u00fasqueda y la UX, experiencia de usuario al visitar la web.<\/p>\n","protected":false},"author":1,"featured_media":25956,"menu_order":0,"template":"","meta":{"content-type":"","footnotes":""},"glossary-categories":[94],"glossary-tags":[],"glossary-languages":[],"class_list":{"0":"post-29102","1":"glossary","2":"type-glossary","3":"status-publish","4":"has-post-thumbnail","6":"glossary-categories-seo"},"_links":{"self":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary\/29102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary"}],"about":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/types\/glossary"}],"author":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary\/29102\/revisions"}],"predecessor-version":[{"id":30659,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary\/29102\/revisions\/30659"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media\/25956"}],"wp:attachment":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media?parent=29102"}],"wp:term":[{"taxonomy":"glossary-categories","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary-categories?post=29102"},{"taxonomy":"glossary-tags","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary-tags?post=29102"},{"taxonomy":"glossary-languages","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/glossary-languages?post=29102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}