{"id":52104,"date":"2019-05-30T09:56:25","date_gmt":"2019-05-30T07:56:25","guid":{"rendered":"https:\/\/www.humanlevel.com\/sin-categorizar\/mejorando-el-wpo-la-importancia-de-medir-y-optimizar-el-peso-de-los-recursos-estaticos.html"},"modified":"2023-10-11T09:41:25","modified_gmt":"2023-10-11T07:41:25","slug":"improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources","status":"publish","type":"post","link":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources","title":{"rendered":"Improving WPO: the importance of measuring and optimizing the weight of static resources"},"content":{"rendered":"<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Index<\/p><ul class=\"toc_list\"><li><a href=\"#The_importance_of_image_sizing_CSS_and_JavaScript\">The importance of image sizing, CSS and JavaScript<\/a><\/li><li><a href=\"#How_to_measure_the_weight_of_static_resources\">How to measure the weight of static resources<\/a><\/li><li><a href=\"#How_to_reduce_the_weight_of_static_resources\">How to reduce the weight of static resources<\/a><ul><li><a href=\"#How_to_reduce_the_weight_of_CSS_and_JavaScript_files\">How to reduce the weight of CSS and JavaScript files<\/a><\/li><li><a href=\"#How_to_reduce_the_weight_of_images\">How to reduce the weight of images<\/a><\/li><li><a href=\"#How_to_reduce_the_weight_of_fonts\">How to reduce the weight of fonts<\/a><\/li><\/ul><\/li><li><a href=\"#Conclusion\">Conclusion<\/a><\/li><\/ul><\/div>\n<p>The technological evolution of web development allows faster and faster implementations. However, <strong>websites are becoming slower and slower, due to development frameworks and libraries with a greater weight<\/strong> and <strong>designs<\/strong> that tend to seek greater visual impact, often <strong>without taking into account the consequences on the WPO<\/strong>.<\/p>\n<p>Let&#8217;s see how all this is affecting the web ecosystem and what we can do to remedy it and <strong>significantly improve WPO<\/strong>.<\/p>\n<h2><span id=\"The_importance_of_image_sizing_CSS_and_JavaScript\">The importance of image sizing, CSS and JavaScript<\/span><\/h2>\n<p>When we talk about static resources, we mean <strong>images, CSS, JavaScript and fonts<\/strong>. And it is their ever-increasing size that makes websites slower and slower. This is not a personal assessment, but the extrapolated conclusion from the <strong>CrUX (Google Chrome User Experience)<\/strong> data. For those of you who do not know it, it is a database with the <strong>performance data that Google obtains from users<\/strong> through their browser and that it publishes openly every month. Let&#8217;s see some graphs from the source<a href=\"https:\/\/httparchive.org\/reports\" target=\"_blank\" rel=\"noopener noreferrer\">(https:\/\/httparchive.org\/reports)<\/a> in which this data has been used, along with historical data from Internet Archive (Wayback Machine&#8217;s open database):<\/p>\n<p>Here we see how some metrics such as <strong>FCP (First Contentful Paint) and total load time<\/strong> have gradually increased in recent years on mobile:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-34366 size-full\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/FCP.png\" alt=\"evolution of First Contentful Paint\" width=\"1127\" height=\"597\" srcset=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/FCP.png 1127w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/FCP-720x381.png 720w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/FCP-768x407.png 768w\" sizes=\"auto, (max-width: 1127px) 100vw, 1127px\" \/><\/p>\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-34368 size-full\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/evolucion-ol.png\" alt=\"evolution of loading time\" width=\"1128\" height=\"604\" srcset=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/evolucion-ol.png 1128w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/evolucion-ol-720x386.png 720w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/evolucion-ol-768x411.png 768w\" sizes=\"auto, (max-width: 1128px) 100vw, 1128px\" \/><\/p>\n<p><strong>On the other hand, on desktop the loading time has decreased<\/strong>, probably due to the improvement in transfer speeds.<\/p>\n<p>Even if pages take longer to display and download on mobile, the time it takes for the content to become functional, i.e, <strong>TTI has improved slightly. <\/strong>However, as we will see below, this improvement cannot be said to be due to more optimized pages, so it is probably due to browser optimizations and more powerful CPUs:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-34369\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/TTI.png\" alt=\"evolution Time To Interactive\" width=\"1136\" height=\"585\" srcset=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/TTI.png 1136w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/TTI-720x371.png 720w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/TTI-768x395.png 768w\" sizes=\"auto, (max-width: 1136px) 100vw, 1136px\" \/><\/p>\n<p>To verify what I mentioned in the previous paragraph, in the following graph we have<strong> the evolution of the total weight of the pages<\/strong> (on the Y-axis, 1k means 1000 Kilobytes) and we see that the average size of Web pages is reaching 2MB and, although it is true that we have more and more <strong>higher and more reliable transmission speeds<\/strong>Thanks to technologies such as 4G LTE or the upcoming 5G, we should not count on it, since we will not always have the best coverage, nor will we have the optimal conditions to get close to the maximum transmission speed of the technology used.<\/p>\n<p>We can also see that websites on mobile devices have become equal in weight to desktop versions, due to the implementation of <strong>responsive design<\/strong> since 2011.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-34372 size-full\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/total-kilobytes.png\" alt=\"evolution of page size\" width=\"1146\" height=\"583\" srcset=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/total-kilobytes.png 1146w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/total-kilobytes-720x366.png 720w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/total-kilobytes-768x391.png 768w\" sizes=\"auto, (max-width: 1146px) 100vw, 1146px\" \/><\/p>\n<p>If we look at the following graph, where we have <strong>the number of requests, we note that it has increased to around 75, where it has stabilized.<\/strong> It has even decreased a bit afterwards, so the increase in size of the above graph does not imply a richer web, but the use of <strong>heavier resources<\/strong> such as: unoptimized development frameworks, loading different fonts to display four icons or full-width screen images and videos that do not provide relevant information to the user.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-34373 size-full\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/total-request.png\" alt=\"evolution of the number of requests\" width=\"1128\" height=\"601\" srcset=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/total-request.png 1128w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/total-request-720x384.png 720w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/total-request-768x409.png 768w\" sizes=\"auto, (max-width: 1128px) 100vw, 1128px\" \/><\/p>\n<p><strong>JavaScript size<\/strong> is an important factor, not only because of download time, but also because <strong>this code must be compiled and executed<\/strong>, using CPU and memory resources, which affects interaction and page-painting metrics. In the following graph we see that the average has reached 400KB, but it is not uncommon to find Web pages that far exceed this figure <strong>, reaching a megabyte or more<\/strong>, since, as we can see, the coefficient of variation in the results has also grown:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-34374 size-full\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/javascript-bytes.png\" alt=\"JavaScript size evolution\" width=\"1115\" height=\"590\" srcset=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/javascript-bytes.png 1115w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/javascript-bytes-720x381.png 720w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/javascript-bytes-768x406.png 768w\" sizes=\"auto, (max-width: 1115px) 100vw, 1115px\" \/><\/p>\n<p>This increase in the size of JavaScript is probably due to the <strong>proliferation of frameworks that are able to offer more features<\/strong>, even if many of them are not used later. The problem comes when there is no budget to invest the necessary time to remove unnecessary code or delay its loading.<\/p>\n<p><strong>CSS frameworks are also problematic<\/strong>, as a framework like Bootstrap takes 150 KB (about 20KB compressed), which is 10 times more than the CSS a page normally needs to display a responsive design. It doesn&#8217;t seem like a lot to download, but it is, if we take into account that <strong>the FCP metric depends on the time to process that file<\/strong>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-34375 size-full\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/css-bytes.png\" alt=\"evolution of CSS weight\" width=\"1130\" height=\"584\" srcset=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/css-bytes.png 1130w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/css-bytes-720x372.png 720w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/css-bytes-768x397.png 768w\" sizes=\"auto, (max-width: 1130px) 100vw, 1130px\" \/><\/p>\n<p>In the following graph, although it has an error in the data acquisition towards the end, we see that <strong>the size of the images also increases<\/strong>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-34377 size-full\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/bytes-imagenes.png\" alt=\"evolution of image weight\" width=\"1121\" height=\"591\" srcset=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/bytes-imagenes.png 1121w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/bytes-imagenes-720x380.png 720w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/bytes-imagenes-768x405.png 768w\" sizes=\"auto, (max-width: 1121px) 100vw, 1121px\" \/><\/p>\n<h2><span id=\"How_to_measure_the_weight_of_static_resources\">How to measure the weight of static resources<\/span><\/h2>\n<p><strong>Smaller static resources<\/strong> do not necessarily mean better metrics: it also matters what the code we load does. However, there will always be a <strong>strong correlation<\/strong> between their weight and the <strong>metrics obtained in Google Page Speed Insights<\/strong>, affecting positioning.<\/p>\n<p>With the change in the design of <strong>Google Speed Insights<\/strong>, the version of the <strong>Lighthouse extension,<\/strong> from which this tool takes its data, has also been updated, adding a breakdown of what the resources of a website occupy, in the section<strong>&#8220;Keep requests counts low and transfer sizes small<\/strong>&#8220;:<\/p>\n<figure id=\"attachment_34379\" aria-describedby=\"caption-attachment-34379\" style=\"width: 893px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-34379 size-full\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/lighthouse-2.png\" alt=\"Lighthouse Extension - keep resource size small\" width=\"893\" height=\"498\" srcset=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/lighthouse-2.png 893w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/lighthouse-2-720x402.png 720w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/lighthouse-2-768x428.png 768w\" sizes=\"auto, (max-width: 893px) 100vw, 893px\" \/><figcaption id=\"caption-attachment-34379\" class=\"wp-caption-text\">In the example we can see that the amount of JavaScript stands out, which has been left above the images, something that is quite common nowadays and should not be so.<\/figcaption><\/figure>\n<p>Another option is at <a href=\"https:\/\/www.webpagetest.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">webpagetest.org<\/a>. By clicking on the<strong>&#8220;Content Breakdown<\/strong>&#8221; link after launching an analysis, we obtain the following breakdown:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-34380\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/content-breakdown.png\" alt=\"content breakdown of webpagetest.org\" width=\"755\" height=\"516\" srcset=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/content-breakdown.png 755w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/content-breakdown-720x492.png 720w\" sizes=\"auto, (max-width: 755px) 100vw, 755px\" \/><\/p>\n<p><strong>Lighthouse<\/strong>, in its <strong>command line<\/strong> version, also allows us to assign a <strong>performance budget<\/strong> for static resources, that is, to <strong>define limits for what we want each type of resource to occupy in<\/strong> order to reach <strong>load time objectives<\/strong>.<\/p>\n<p>On the web <a href=\"https:\/\/www.performancebudget.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.performancebudget.io\/,<\/a> we can <strong>estimate what our resources have to occupy<\/strong>, to load a page in a given time and in a specific type of connection. With the data obtained we can create a JSON file to define these limits in Lighthouse or simply to have it as a reference.<\/p>\n<h2><span id=\"How_to_reduce_the_weight_of_static_resources\">How to reduce the weight of static resources<\/span><\/h2>\n<p>In general, apart from eliminating everything that is not used, it is always advisable to <strong>critical resources<\/strong> shown in the following table. <em>above the fold<\/em> to <strong>paint what the user sees first<\/strong>, <a href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/css-optimization\" target=\"_blank\" rel=\"noopener noreferrer\">cache resources in the browser with cache headers<\/a> and a <strong>service Worker<\/strong> and <strong>delay the loading of non-critical resources<\/strong>. This is what is known as the <strong>PRPL<\/strong> pattern (read purple &#8211; <strong>Preload<\/strong> <strong>Render<\/strong>Fast <strong>Pre-cache<\/strong>and apply <strong>Lazy<\/strong>Load).<\/p>\n<p>Another technique that can be applied to all resources to speed up the download, is a <strong>CDN to avoid high latency times,<\/strong> especially if our website is open to the public in several countries.<\/p>\n<h3><span id=\"How_to_reduce_the_weight_of_CSS_and_JavaScript_files\"><strong>How to reduce the weight of CSS and JavaScript files<\/strong><\/span><\/h3>\n<p>How to <a href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/javascript-optimization\">optimize CSS<\/a> and <a href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/javascript-optimization\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript<\/a> has already been explained above. But specifically, to reduce the weight, the ideal is to use a <strong>web bundler such as Webpack, Grunt or Gulp<\/strong>together with their corresponding extensions, to remove unused portions of CSS, apply <strong>Tree Shaking<\/strong> to JavaScript (shaking the dependency tree consists of auto-detecting the code being used to discard unused code), identifying critical CSS, minimizing and versioning. If our website is made with a CMS like <a href=\"https:\/\/www.humanlevel.com\/en\/digital-marketing-dictionary\/wordpress\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress<\/a>, Prestashop or similar, we can also find <strong>several plugins that perform these tasks<\/strong> with greater or lesser success, in the case of WordPress we have: LiteSpeed, WP-Rocket, Autopmize Critical CSS, &#8230;<\/p>\n<p>For example, in webpack we have the plugins <a href=\"https:\/\/purgecss.com\/\">https:\/\/purgecss.com\/<\/a> to remove unused CSS and <a href=\"https:\/\/github.com\/anthonygore\/html-critical-webpack-plugin\">https:\/\/github.com\/anthonygore\/html-critical-webpack-plugin<\/a> to detect critical CSS. Using them requires some configuration and generating the <strong>site<\/strong> code <strong>in HTML<\/strong> or at least the main templates. But the initial setup effort is well worth the large performance gain that can be obtained. <strong>Its execution should be automated as much as possible, so as not to slow down the workflow<\/strong>, and the time to be devoted to this part of the development environment preparation should be included in the initial budget.<\/p>\n<h3><span id=\"How_to_reduce_the_weight_of_images\">How to reduce the weight of images<\/span><\/h3>\n<p>As for how to <a href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/optimization-of-images-for-the-web\" target=\"_blank\" rel=\"noopener noreferrer\">optimize the images<\/a>, apart from everything we discussed at the time, some additional techniques would be:<\/p>\n<ul>\n<li>Apply the <strong>Lazy Loading optimization technique<\/strong>, which will soon be enabled by default in Chrome and will be configurable for each image with the <strong>loading attribute<\/strong> and the values &#8220;auto&#8221;, &#8220;eager&#8221; and &#8220;lazy&#8221;. The ideal right now is to <strong>detect if this functionality is active<\/strong>. Otherwise, with the JavaScript API, <strong>Intersection Observer<\/strong> (also if supported), implement the Lazy Loading. In the following URL, we have a good explanation of how to do this <a href=\"https:\/\/addyosmani.com\/blog\/lazy-loading\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/addyosmani.com\/blog\/lazy-loading\/.Cuando<\/a> apply this technique, we must always have the images within an attribute &lt;noscript&gt;&lt;\/noscript&gt; to ensure that they will be indexed without problems, since <a href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-does-javascript-and-ajax-affect-google-indexing\" target=\"_blank\" rel=\"noopener noreferrer\">Google does not always execute JavaScript<\/a>.<\/li>\n<li><strong>Use the WebP format of Google Chrome<\/strong>, for the images that we see that occupy less in this format. To load an image in several formats and let the browser choose the most suitable one, we can <strong>use the element &lt;picture&gt; and &lt;source&gt;<\/strong>. We could also use Microsoft Edge&#8217;s JPEG XR (.jxr) format and Safari&#8217;s JPEG 2000 (.jp2), although these browsers do not have as much market share as Chrome. Example:<br \/>\n<code><code><br \/>\n&lt;pre&gt;&lt;picture&gt;<br \/>\n&lt;source srcset=\"\/ejemplo.webp\" type=\"image\/webp\" \/&gt;<br \/>\n&lt;source srcset=\"\/ejemplo.jxr\" type=\"image\/vnd.ms-photo\" \/&gt;<br \/>\n&lt;source srcset=\"\/ejemplo.jp2\" type=\"image\/jp2\" \/&gt;<br \/>\n&lt;img srcset=\"\/ejemplo.png\" alt=\"texto SEO\" \/&gt;<br \/>\n&lt;\/picture&gt;<br \/>\n&lt;\/pre&gt;<br \/>\n<code><code><\/code><\/code><\/code><\/code><\/li>\n<\/ul>\n<h3><span id=\"How_to_reduce_the_weight_of_fonts\">How to reduce the weight of fonts<\/span><\/h3>\n<p>We will devote a full article to <a href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-optimize-the-fonts-of-a-website\" target=\"_blank\" rel=\"noopener noreferrer\">font optimization<\/a>. I will advance now that one of the best techniques to optimize font weight is to apply <strong>subsetting<\/strong>, which consists of eliminating unused characters from the font. To do this we can use an online tool like this <a href=\"https:\/\/everythingfonts.com\/subsetter\">https:\/\/everythingfonts.com\/subsetter<\/a> or an offline command line tool like <a href=\"https:\/\/github.com\/fonttools\/fonttools\">https:\/\/github.com\/fonttools\/fonttools<\/a>.<\/p>\n<p>Also, of course, unused fonts and font variants should be removed.<\/p>\n<h2><span id=\"Conclusion\">Conclusion<\/span><\/h2>\n<p>When it comes to optimizing a page, historically, the most important thing has always been to <strong>HTML TTFB<\/strong>but with the emergence of <strong>CSS and JavaScript frameworks and images that take up more and more space.<\/strong>, <strong>the new user-oriented metrics and Google&#8217;s algorithm update called Speed Update<\/strong>has caused the TTFB to move to the same level of importance as <strong>the space occupied by static resources, <\/strong>as these directly affect page painting and interaction times. But don&#8217;t get me wrong: the TTFB is still very important, because unless we use <a href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improve-wpo-with-http2-server-push\" target=\"_blank\" rel=\"noopener noreferrer\">HTTP\/2 Server Push<\/a> this time will determine when the rest of the resources start to be downloaded. What happens is that nowadays, in a web development, <strong>everything must be optimized<\/strong>.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Websites are becoming slower and slower, due to development frameworks and libraries that take up more and more space and designs that tend to seek greater visual impact. Find out how to evaluate it on your website and fix it.<\/p>\n","protected":false},"author":14,"featured_media":47782,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[349],"tags":[366,379],"class_list":["post-52104","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-technical-seo","tag-wpo","entry"],"yoast_head":"\n<title>Improving WPO: the importance of measuring and optimizing the weight of static resources | Human Level<\/title>\n<meta name=\"description\" content=\"The WPO of new developments is getting worse and worse. Discover the reasons for this and strategies to solve it on your website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Improving WPO: the importance of measuring and optimizing the weight of static resources | Human Level\" \/>\n<meta property=\"og:description\" content=\"The WPO of new developments is getting worse and worse. Discover the reasons for this and strategies to solve it on your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources\" \/>\n<meta property=\"og:site_name\" content=\"Human Level\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-30T07:56:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-11T07:41:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/mejorando-el-wpo-e1569939258588.png\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ram\u00f3n Saquete\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Daiatron\" \/>\n<meta name=\"twitter:site\" content=\"@humanlevel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ram\u00f3n Saquete\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources\"},\"author\":{\"name\":\"Ram\u00f3n Saquete\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94\"},\"headline\":\"Improving WPO: the importance of measuring and optimizing the weight of static resources\",\"datePublished\":\"2019-05-30T07:56:25+00:00\",\"dateModified\":\"2023-10-11T07:41:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources\"},\"wordCount\":1799,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/mejorando-el-wpo-e1569939258588.png\",\"keywords\":[\"Technical SEO\",\"WPO\"],\"articleSection\":[\"SEO\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources\",\"url\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources\",\"name\":\"Improving WPO: the importance of measuring and optimizing the weight of static resources | Human Level\",\"isPartOf\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/mejorando-el-wpo-e1569939258588.png\",\"datePublished\":\"2019-05-30T07:56:25+00:00\",\"dateModified\":\"2023-10-11T07:41:25+00:00\",\"description\":\"The WPO of new developments is getting worse and worse. Discover the reasons for this and strategies to solve it on your website.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#primaryimage\",\"url\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/mejorando-el-wpo-e1569939258588.png\",\"contentUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/mejorando-el-wpo-e1569939258588.png\",\"width\":400,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.humanlevel.com\/en\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Improving WPO: the importance of measuring and optimizing the weight of static resources\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.humanlevel.com\/en#website\",\"url\":\"https:\/\/www.humanlevel.com\/en\",\"name\":\"Human Level\",\"description\":\"Web positioning and online marketing consultant Human Level\",\"publisher\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.humanlevel.com\/en?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\",\"name\":\"Human Level\",\"url\":\"https:\/\/www.humanlevel.com\/en\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg\",\"contentUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg\",\"width\":268,\"height\":51,\"caption\":\"Human Level\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/humanlevel\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94\",\"name\":\"Ram\u00f3n Saquete\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g\",\"caption\":\"Ram\u00f3n Saquete\"},\"description\":\"Desarrollador web y consultor SEO t\u00e9cnico en Human Level. Graduado en Ingenier\u00eda Inform\u00e1tica e Ingenier\u00eda T\u00e9cnica en Inform\u00e1tica de Sistemas. Tambi\u00e9n es T\u00e9cnico Superior en Desarrollo de Aplicaciones Inform\u00e1ticas y posteriormente obtuvo la Certificaci\u00f3n de Aptitud Pedag\u00f3gica. Experto en WPO e indexabilidad.\",\"sameAs\":[\"https:\/\/x.com\/Daiatron\"],\"url\":\"https:\/\/www.humanlevel.com\/en\/author\/ramon\"}]}<\/script>\n","yoast_head_json":{"title":"Improving WPO: the importance of measuring and optimizing the weight of static resources | Human Level","description":"The WPO of new developments is getting worse and worse. Discover the reasons for this and strategies to solve it on your website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources","og_locale":"en_US","og_type":"article","og_title":"Improving WPO: the importance of measuring and optimizing the weight of static resources | Human Level","og_description":"The WPO of new developments is getting worse and worse. Discover the reasons for this and strategies to solve it on your website.","og_url":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources","og_site_name":"Human Level","article_published_time":"2019-05-30T07:56:25+00:00","article_modified_time":"2023-10-11T07:41:25+00:00","og_image":[{"width":400,"height":400,"url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/mejorando-el-wpo-e1569939258588.png","type":"image\/png"}],"author":"Ram\u00f3n Saquete","twitter_card":"summary_large_image","twitter_creator":"@Daiatron","twitter_site":"@humanlevel","twitter_misc":{"Written by":"Ram\u00f3n Saquete","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#article","isPartOf":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources"},"author":{"name":"Ram\u00f3n Saquete","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94"},"headline":"Improving WPO: the importance of measuring and optimizing the weight of static resources","datePublished":"2019-05-30T07:56:25+00:00","dateModified":"2023-10-11T07:41:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources"},"wordCount":1799,"commentCount":0,"publisher":{"@id":"https:\/\/www.humanlevel.com\/en#organization"},"image":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#primaryimage"},"thumbnailUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/mejorando-el-wpo-e1569939258588.png","keywords":["Technical SEO","WPO"],"articleSection":["SEO"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources","url":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources","name":"Improving WPO: the importance of measuring and optimizing the weight of static resources | Human Level","isPartOf":{"@id":"https:\/\/www.humanlevel.com\/en#website"},"primaryImageOfPage":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#primaryimage"},"image":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#primaryimage"},"thumbnailUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/mejorando-el-wpo-e1569939258588.png","datePublished":"2019-05-30T07:56:25+00:00","dateModified":"2023-10-11T07:41:25+00:00","description":"The WPO of new developments is getting worse and worse. Discover the reasons for this and strategies to solve it on your website.","breadcrumb":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#primaryimage","url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/mejorando-el-wpo-e1569939258588.png","contentUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/mejorando-el-wpo-e1569939258588.png","width":400,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/improving-wpo-importance-of-measuring-and-optimizing-the-weight-of-static-resources#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.humanlevel.com\/en"},{"@type":"ListItem","position":2,"name":"Improving WPO: the importance of measuring and optimizing the weight of static resources"}]},{"@type":"WebSite","@id":"https:\/\/www.humanlevel.com\/en#website","url":"https:\/\/www.humanlevel.com\/en","name":"Human Level","description":"Web positioning and online marketing consultant Human Level","publisher":{"@id":"https:\/\/www.humanlevel.com\/en#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.humanlevel.com\/en?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.humanlevel.com\/en#organization","name":"Human Level","url":"https:\/\/www.humanlevel.com\/en","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/","url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg","contentUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg","width":268,"height":51,"caption":"Human Level"},"image":{"@id":"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/humanlevel"]},{"@type":"Person","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94","name":"Ram\u00f3n Saquete","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g","caption":"Ram\u00f3n Saquete"},"description":"Desarrollador web y consultor SEO t\u00e9cnico en Human Level. Graduado en Ingenier\u00eda Inform\u00e1tica e Ingenier\u00eda T\u00e9cnica en Inform\u00e1tica de Sistemas. Tambi\u00e9n es T\u00e9cnico Superior en Desarrollo de Aplicaciones Inform\u00e1ticas y posteriormente obtuvo la Certificaci\u00f3n de Aptitud Pedag\u00f3gica. Experto en WPO e indexabilidad.","sameAs":["https:\/\/x.com\/Daiatron"],"url":"https:\/\/www.humanlevel.com\/en\/author\/ramon"}]}},"_links":{"self":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/comments?post=52104"}],"version-history":[{"count":3,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52104\/revisions"}],"predecessor-version":[{"id":54822,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52104\/revisions\/54822"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/media\/47782"}],"wp:attachment":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/media?parent=52104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/categories?post=52104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/tags?post=52104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}