{"id":8848,"date":"2020-03-28T10:20:46","date_gmt":"2020-03-28T08:20:46","guid":{"rendered":"https:\/\/vipestudio.com\/?p=8848"},"modified":"2021-09-24T17:33:59","modified_gmt":"2021-09-24T14:33:59","slug":"ultimate-guide-for-google-pagespeed-insights-perfect-score","status":"publish","type":"post","link":"https:\/\/vipestudio.com\/en\/ultimate-guide-for-google-pagespeed-insights-perfect-score\/","title":{"rendered":"Ultimate Guide to Google PageSpeed Insights Perfect Score"},"content":{"rendered":"<p style=\"text-align: left;\">We all know how important it is to deliver your website content quickly. Most of your visitors &#8211; and by most, we can consider 75% and above &#8211; will leave your website if it takes more than 3 seconds to load. Becoming obsessed with the speed of our sites leads to using a variety of online page speed testers to see how quick our webpage is. So the chance of already having a headache with the <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google PageSpeed Insights<\/a> is big.<\/p>\n<p style=\"text-align: center; font-size: 21px;\"><em><strong>And here comes the truth &#8211; The last thing Google PageSpeed Insights tests&#8230; is the site speed.<\/strong><\/em><\/p>\n<p style=\"text-align: left;\">Drop the Mic. This article goal is to give you a better vision of what Google PageSpeed Insights is, what are the advantages and the disadvantages of it, how it works, how good idea it is to test a WordPress website with it, why you can&#8217;t expect to exceed it&#8217;s expectations if your website is not specifically designed to satisfy those requirements and how Google actually praises&#8230; Google.<\/p>\n<p style=\"text-align: left;\">Let&#8217;s start.<\/p>\n<h2 id=\"I_Introduction_to_Google_PageSpeed_Insights\" style=\"text-align: left;\">I Introduction to Google PageSpeed Insights<\/h2>\n<p style=\"text-align: left;\">For those of you who never used Google PageSpeed Insights &#8211; it is a tool provided by Google where you can put any website URL for analyzing its performance. Google&#8217;s engine performs a quick test and then gives the website an overall score, which is based on some of the best and most common practices in website optimization.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter wp-image-8851\" src=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/Google-PageSpeed-Insights.jpg\" alt=\"\" width=\"484\" height=\"350\" srcset=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/Google-PageSpeed-Insights.jpg 800w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/Google-PageSpeed-Insights-300x217.jpg 300w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/Google-PageSpeed-Insights-768x556.jpg 768w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/Google-PageSpeed-Insights-566x410.jpg 566w\" sizes=\"(max-width: 484px) 100vw, 484px\" \/><\/p>\n<p style=\"text-align: left;\">Next to the score, it gives some recommendations on how to improve the performance grade.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"wp-image-8853 aligncenter\" src=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/Google-PageSpeed-Insights-2.jpg\" alt=\"\" width=\"539\" height=\"554\" srcset=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/Google-PageSpeed-Insights-2.jpg 767w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/Google-PageSpeed-Insights-2-292x300.jpg 292w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/Google-PageSpeed-Insights-2-399x410.jpg 399w\" sizes=\"(max-width: 539px) 100vw, 539px\" \/><\/p>\n<p style=\"text-align: left;\">It is usually at this point when the nightmare starts. Most website owners use WordPress websites. The majority of those WordPress websites are built with popular themes and popular plugins. Those themes and plugins rely on the roots of the WordPress idea &#8211; to have a simple website on an open-platform free CMS that can have as many options as you want in a &#8216;plug and play&#8217; way.<\/p>\n<p style=\"text-align: left;\">Yes, this is super cool, because everybody can have their own website. However, it needs a professional WordPress developer to build both your perfect WordPress website and at the same time to satisfy all of the Google-advised good practices. Most of them are not something you can achieve by simply installing a plugin (you can, but most probably will break your website too), but you need to build the website using those techniques from the very beginning. Why? Here&#8217;s why:<\/p>\n<h2 id=\"II_Good_Practices_according_to_Google_are_Google-owned\" style=\"text-align: left;\">II Good Practices (according to Google) are&#8230; Google-owned!<\/h2>\n<p style=\"text-align: left;\">Surprise! Google recommends using&#8230; Google! <strong>The last thing PageSpeed Insights tests is the actual page speed.<\/strong> Truly it tests how far (or how close your website is from being built using Google technologies. Have you ever thought about how the Google product website looks &#8211; no visual effects, no images, no fancy animations, just clean ultra-fast websites with super useful text content. Now let&#8217;s take a look at some of the hardest to achieve points that Google advises:<\/p>\n<ul style=\"text-align: left;\">\n<li><em>CSS\/JS minification or removal<\/em> (<strong>Eliminate render-blocking resources; Remove unused CSS; Minify JavaScript; Minify CSS; Avoid an excessive DOM size; Reduce JavaScript execution time;<\/strong>) &#8211; but how are you supposed to do those when you&#8217;re using a WordPress CMS built by Team A, a multi-purpose theme built by Team B and 10+ plugins built by teams C, D, etc.<\/li>\n<li style=\"padding-top: 7px;\"><em>PageSpeed doesn&#8217;t like photos<\/em> (<strong>Serve images in next-gen formats; Properly size images;<\/strong>) &#8211; let&#8217;s say it honestly &#8211; we live in the era of 1TB Internet speed &#8211; no one cares for the properly-sized images. Yes, and no, Google actually serves content to all the countries in the world &#8211; and even to those with a metered and slow Internet connection, so it penalizes for traffic prodigality.<\/li>\n<li style=\"padding-top: 7px;\"><em>Resource host<\/em> (<strong>Reduce the impact of third-party code; Avoid chaining critical requests; Keep request counts low and transfer sizes small; <\/strong><strong>First Meaningful Paint; First CPU Idle; First Contentful Paint;<\/strong>) But how this can be valid? Even if I got the slowest website in the world hosted on my local machine and request it from another PC in the same network &#8211; it won&#8217;t be that bad? How do we know from what server Google test our website, what Google calls a third-party code, is it possible for a website to exist without it nowadays? What counts really is the Time to First Byte and guess what &#8211; Google PageSpeed Insights doesn&#8217;t look for it.<\/li>\n<\/ul>\n<p style=\"text-align: left;\">So let&#8217;s review those three factors one by one and how actually by chasing them you&#8217;re getting closer to Google Products.<\/p>\n<p><img decoding=\"async\" class=\" wp-image-17656 aligncenter\" src=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2020\/03\/20943558-ai-300x300.png\" alt=\"\" width=\"213\" height=\"214\" srcset=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2020\/03\/20943558-ai-300x300.png 300w, https:\/\/vipestudio.com\/wp-content\/uploads\/2020\/03\/20943558-ai-1024x1024.png 1024w, https:\/\/vipestudio.com\/wp-content\/uploads\/2020\/03\/20943558-ai-150x150.png 150w, https:\/\/vipestudio.com\/wp-content\/uploads\/2020\/03\/20943558-ai-768x768.png 768w, https:\/\/vipestudio.com\/wp-content\/uploads\/2020\/03\/20943558-ai-1536x1536.png 1536w, https:\/\/vipestudio.com\/wp-content\/uploads\/2020\/03\/20943558-ai-2048x2048.png 2048w, https:\/\/vipestudio.com\/wp-content\/uploads\/2020\/03\/20943558-ai-410x410.png 410w, https:\/\/vipestudio.com\/wp-content\/uploads\/2020\/03\/20943558-ai-381x381.png 381w, https:\/\/vipestudio.com\/wp-content\/uploads\/2020\/03\/20943558-ai-174x174.png 174w\" sizes=\"(max-width: 213px) 100vw, 213px\" \/><\/p>\n<h3 id=\"1_AMP_Project_Google_Skeleton\" style=\"text-align: left;\">1. AMP Project &#8211; Google Skeleton<\/h3>\n<p style=\"text-align: left;\">Let&#8217;s first set the expectation clear &#8211; not every website on the Internet is built on WordPress. <strong>Google PageSpeed Insight is a system that scores ANY type of website<\/strong> &#8211; it applies the same grade system on websites with a budget of a million dollars and on the blog you constructed alone.<\/p>\n<p style=\"font-size: 21px; text-align: left;\"><strong>Being a hobby swimmer and asking Michael Phelps&#8217;s coach how fast you swim is not the perfect way to understand if you&#8217;re doing it well or not.<\/strong><\/p>\n<p style=\"text-align: left;\">The truth is that the only real way to satisfy the design-related grades of Google PageSpeed Insights is to build your website entirely on the AMP project (or any other clean-design framework) &#8211; and surprise! This framework is created by Google.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-8862\" src=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/amp-300x172.jpg\" alt=\"\" width=\"300\" height=\"172\" srcset=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/amp-300x172.jpg 300w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/amp-768x441.jpg 768w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/amp-714x410.jpg 714w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/amp.jpg 940w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p style=\"text-align: left;\">What is AMP? It is an acronym of <strong>Accelerated Mobile Pages<\/strong>. The framework relies on<em> Javascript-free<\/em>\u00a0<em>Google-ly-built webpage<\/em>, using their ecosystem, and has been widely criticized by many in the tech industry as an attempt to dominate the website development business.<\/p>\n<p style=\"text-align: left;\">We&#8217;re not saying if this is a good or a bad thing &#8211; the goal of our article is to say that if you want to satisfy the majority of design-related scores of Google PageSpeed Insights, you actually need to think about this at the very beginning of building the website. You can&#8217;t simply install a plugin that resolves everything. Your developer needs to design the website theme and functions following the AMP project (of course if you&#8217;re after a good score on PageSpeed).<\/p>\n<p style=\"text-align: left;\">The idea is you&#8217;re not receiving a bad grade because your website is slow or badly coded. <strong>Your scores are bad because they&#8217;re not following the best possible practices<\/strong>, according to the Google ecosystem.<\/p>\n<h3 id=\"2_WebP_Conversion_Google_File_Format\" style=\"text-align: left;\">2. WebP Conversion &#8211; Google File Format<\/h3>\n<p style=\"text-align: left;\">How about <strong>Serve images in next-gen formats<\/strong>? Do you have any idea what the next-gen format is? Google, simply, wants you to use its own photo file format &#8211; <a href=\"https:\/\/developers.google.com\/speed\/webp\" target=\"_blank\" rel=\"noopener noreferrer\">WebP images<\/a>. WebP is an image format that provides lossy and lossless compression and it is developed and owned by Google (and mainly supported by Google devices).<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"size-thumbnail wp-image-8860 aligncenter\" src=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/webp-150x150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/webp-150x150.png 150w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/webp-300x300.png 300w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/webp-412x410.png 412w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/webp.png 500w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/p>\n<p style=\"text-align: left;\">So there won&#8217;t be any major speed improvement if you replace all of your jpgs and pngs with webp files, but you will simply satisfy the requirement.<\/p>\n<p style=\"text-align: left;\">This is a challenging one for the developers, as there are many Apple devices that don&#8217;t support WebP, and <strong>by converting your images to this new format, you will actually make your website slower!<\/strong> Why? Because you will add additional code for a jpg fallback for any non-Google device.<\/p>\n<h3 id=\"3_Time_to_First_Byte_and_Google_Cloud_Platform\" style=\"text-align: left;\">3. Time to First Byte and Google Cloud Platform<\/h3>\n<p style=\"text-align: left;\">How about the hosting delivery and all those like <strong>First Meaningful Paint; First CPU Idle; First Contentful Paint;<\/strong>?\u00a0 To be honest this is one of the factors that actually matter! But still &#8211; the way the tester takes this information is too relative. Google interprets your website from an unknown location on an unknown server and you&#8217;re not really sure how close or far you are from their network.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-8864\" src=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/google-cloud-platform-300x120.png\" alt=\"\" width=\"300\" height=\"120\" srcset=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/google-cloud-platform-300x120.png 300w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/google-cloud-platform.png 500w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p style=\"text-align: left;\">Try to host your website on a <a href=\"https:\/\/cloud.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Cloud Platform<\/a> and don&#8217;t make any other change &#8211; Voila! Those are far better, right? This is just because you&#8217;re part of Google&#8217;s own network and the trace between your website and the Google servers is far less staged.<\/p>\n<p>Let&#8217;s not ignore the <strong>Reduce the impact of third-party code<\/strong> grade. Is it even possible to satisfy this when it is absolutely essential to have Facebook Pixel on your website?<\/p>\n<h2 id=\"III_Lets_get_Practical_Improve_the_score\" style=\"text-align: left;\">III Let&#8217;s get Practical &#8211; Improve the score!<\/h2>\n<p style=\"text-align: left;\">But enough talking &#8211; let&#8217;s see some real working advice on improving the score (and ultimately the performance).<\/p>\n<h3 id=\"1_Add_Caching_Rules_to_htaccess\" style=\"text-align: left;\">1. Add Caching Rules to .htaccess<\/h3>\n<p style=\"text-align: left;\">First, you definitely need caching rules in your .htaccess file. This will help you to cover the grades for <strong>Serve static assets with an efficient cache policy<\/strong> and<strong> Enable text compression<\/strong>.<\/p>\n<p style=\"text-align: left;\">Locate your .htaccess file and add the following. Make sure you have a backup first!<\/p>\n<pre><span style=\"color: #333333;\">&lt;<\/span>filesMatch <span style=\"background-color: #fff0f0;\">\".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$\"<\/span><span style=\"color: #333333;\">&gt;<\/span>\r\nHeader <span style=\"color: #007020;\">set<\/span> Cache<span style=\"color: #333333;\">-<\/span>Control <span style=\"background-color: #fff0f0;\">\"max-age=2592000, public\"<\/span>\r\n<span style=\"color: #333333;\">&lt;\/<\/span>filesMatch<span style=\"color: #333333;\">&gt;<\/span>\r\n<span style=\"color: #333333;\">&lt;<\/span>IfModule mod_deflate<span style=\"color: #333333;\">.<\/span>c<span style=\"color: #333333;\">&gt;<\/span>\r\n <span style=\"color: #888888;\"># Compress HTML, CSS, JavaScript, Text, XML and fonts<\/span>\r\n AddOutputFilterByType DEFLATE application<span style=\"color: #333333;\">\/<\/span>javascript\r\n AddOutputFilterByType DEFLATE application<span style=\"color: #333333;\">\/<\/span>rss<span style=\"color: #333333;\">+<\/span>xml\r\n AddOutputFilterByType DEFLATE application<span style=\"color: #333333;\">\/<\/span>vnd<span style=\"color: #333333;\">.<\/span>ms<span style=\"color: #333333;\">-<\/span>fontobject\r\n AddOutputFilterByType DEFLATE application<span style=\"color: #333333;\">\/<\/span>x<span style=\"color: #333333;\">-<\/span>font\r\n AddOutputFilterByType DEFLATE application<span style=\"color: #333333;\">\/<\/span>x<span style=\"color: #333333;\">-<\/span>font<span style=\"color: #333333;\">-<\/span>opentype\r\n AddOutputFilterByType DEFLATE application<span style=\"color: #333333;\">\/<\/span>x<span style=\"color: #333333;\">-<\/span>font<span style=\"color: #333333;\">-<\/span>otf\r\n AddOutputFilterByType DEFLATE application<span style=\"color: #333333;\">\/<\/span>x<span style=\"color: #333333;\">-<\/span>font<span style=\"color: #333333;\">-<\/span>truetype\r\n AddOutputFilterByType DEFLATE application<span style=\"color: #333333;\">\/<\/span>x<span style=\"color: #333333;\">-<\/span>font<span style=\"color: #333333;\">-<\/span>ttf\r\n AddOutputFilterByType DEFLATE application<span style=\"color: #333333;\">\/<\/span>x<span style=\"color: #333333;\">-<\/span>javascript\r\n AddOutputFilterByType DEFLATE application<span style=\"color: #333333;\">\/<\/span>xhtml<span style=\"color: #333333;\">+<\/span>xml\r\n AddOutputFilterByType DEFLATE application<span style=\"color: #333333;\">\/<\/span>xml\r\n AddOutputFilterByType DEFLATE font<span style=\"color: #333333;\">\/<\/span>opentype\r\n AddOutputFilterByType DEFLATE font<span style=\"color: #333333;\">\/<\/span>otf\r\n AddOutputFilterByType DEFLATE font<span style=\"color: #333333;\">\/<\/span>ttf\r\n AddOutputFilterByType DEFLATE image<span style=\"color: #333333;\">\/<\/span>svg<span style=\"color: #333333;\">+<\/span>xml\r\n AddOutputFilterByType DEFLATE image<span style=\"color: #333333;\">\/<\/span>x<span style=\"color: #333333;\">-<\/span>icon\r\n AddOutputFilterByType DEFLATE text<span style=\"color: #333333;\">\/<\/span>css\r\n AddOutputFilterByType DEFLATE text<span style=\"color: #333333;\">\/<\/span>html\r\n AddOutputFilterByType DEFLATE text<span style=\"color: #333333;\">\/<\/span>javascript\r\n AddOutputFilterByType DEFLATE text<span style=\"color: #333333;\">\/<\/span>plain\r\n AddOutputFilterByType DEFLATE text<span style=\"color: #333333;\">\/<\/span>xml\r\n <span style=\"color: #888888;\"># Remove browser bugs (only needed for really old browsers)<\/span>\r\n BrowserMatch <span style=\"color: #333333;\">^<\/span>Mozilla<span style=\"color: #333333;\">\/<\/span><span style=\"color: #0000dd; font-weight: bold;\">4<\/span> gzip<span style=\"color: #333333;\">-<\/span>only<span style=\"color: #333333;\">-<\/span>text<span style=\"color: #333333;\">\/<\/span>html\r\n BrowserMatch <span style=\"color: #333333;\">^<\/span>Mozilla<span style=\"color: #333333;\">\/<\/span><span style=\"color: #0000dd; font-weight: bold;\">4<\/span>\\<span style=\"color: #333333;\">.<\/span><span style=\"color: #0000dd; font-weight: bold;\">0<\/span>[<span style=\"color: #0000dd; font-weight: bold;\">678<\/span>] no<span style=\"color: #333333;\">-<\/span>gzip\r\n BrowserMatch \\bMSIE <span style=\"color: #ff0000; background-color: #ffaaaa;\">!<\/span>no<span style=\"color: #333333;\">-<\/span>gzip <span style=\"color: #ff0000; background-color: #ffaaaa;\">!<\/span>gzip<span style=\"color: #333333;\">-<\/span>only<span style=\"color: #333333;\">-<\/span>text<span style=\"color: #333333;\">\/<\/span>html\r\n Header append Vary User<span style=\"color: #333333;\">-<\/span>Agent\r\n<span style=\"color: #333333;\">&lt;\/<\/span>IfModule<span style=\"color: #333333;\">&gt;<\/span>\r\n<span style=\"color: #888888;\">## DEFLATE ##<\/span>\r\n<span style=\"color: #333333;\">&lt;<\/span>IfModule mod_headers<span style=\"color: #333333;\">.<\/span>c<span style=\"color: #333333;\">&gt;<\/span>\r\n <span style=\"color: #333333;\">&lt;<\/span>FilesMatch <span style=\"background-color: #fff0f0;\">\"\\.(js|css|xml|gz)$\"<\/span><span style=\"color: #333333;\">&gt;<\/span>\r\n   Header append Vary: Accept<span style=\"color: #333333;\">-<\/span>Encoding\r\n <span style=\"color: #333333;\">&lt;\/<\/span>FilesMatch<span style=\"color: #333333;\">&gt;<\/span>\r\n<span style=\"color: #333333;\">&lt;\/<\/span>IfModule<span style=\"color: #333333;\">&gt;<\/span>\r\n<span style=\"color: #888888;\">## GZIP ##<\/span>\r\n<span style=\"color: #333333;\">&lt;<\/span>ifModule mod_gzip<span style=\"color: #333333;\">.<\/span>c<span style=\"color: #333333;\">&gt;<\/span>\r\nmod_gzip_on Yes\r\nmod_gzip_dechunk Yes\r\nmod_gzip_item_include <span style=\"color: #007020;\">file<\/span> <span style=\"color: #333333;\">.<\/span>(html<span style=\"color: #ff0000; background-color: #ffaaaa;\">?<\/span><span style=\"color: #333333;\">|<\/span>txt<span style=\"color: #333333;\">|<\/span>css<span style=\"color: #333333;\">|<\/span>js<span style=\"color: #333333;\">|<\/span>php<span style=\"color: #333333;\">|<\/span>pl)<span style=\"color: #ff0000; background-color: #ffaaaa;\">$<\/span>\r\nmod_gzip_item_include handler <span style=\"color: #333333;\">^<\/span>cgi<span style=\"color: #333333;\">-<\/span>script<span style=\"color: #ff0000; background-color: #ffaaaa;\">$<\/span>\r\nmod_gzip_item_include mime <span style=\"color: #333333;\">^<\/span>text<span style=\"color: #333333;\">\/.*<\/span>\r\nmod_gzip_item_include mime <span style=\"color: #333333;\">^<\/span>application<span style=\"color: #333333;\">\/<\/span>x<span style=\"color: #333333;\">-<\/span>javascript<span style=\"color: #333333;\">.*<\/span>\r\nmod_gzip_item_exclude mime <span style=\"color: #333333;\">^<\/span>image<span style=\"color: #333333;\">\/.*<\/span>\r\nmod_gzip_item_exclude rspheader <span style=\"color: #333333;\">^<\/span>Content<span style=\"color: #333333;\">-<\/span>Encoding:<span style=\"color: #333333;\">.<\/span>gzip<span style=\"color: #333333;\">.<\/span>\r\n<span style=\"color: #333333;\">&lt;\/<\/span>ifModule<span style=\"color: #333333;\">&gt;<\/span>\r\n<span style=\"color: #888888;\">## EXPIRES CACHING ##<\/span>\r\n<span style=\"color: #333333;\">&lt;<\/span>IfModule mod_expires<span style=\"color: #333333;\">.<\/span>c<span style=\"color: #333333;\">&gt;<\/span>\r\nExpiresActive On\r\nExpiresByType image<span style=\"color: #333333;\">\/<\/span>jpg <span style=\"background-color: #fff0f0;\">\"access 1 year\"<\/span>\r\nExpiresByType image<span style=\"color: #333333;\">\/<\/span>jpeg <span style=\"background-color: #fff0f0;\">\"access 1 year\"<\/span>\r\nExpiresByType image<span style=\"color: #333333;\">\/<\/span>gif <span style=\"background-color: #fff0f0;\">\"access 1 year\"<\/span>\r\nExpiresByType image<span style=\"color: #333333;\">\/<\/span>png <span style=\"background-color: #fff0f0;\">\"access 1 year\"<\/span>\r\nExpiresByType text<span style=\"color: #333333;\">\/<\/span>css <span style=\"background-color: #fff0f0;\">\"access 1 month\"<\/span>\r\nExpiresByType text<span style=\"color: #333333;\">\/<\/span>html <span style=\"background-color: #fff0f0;\">\"access 1 month\"<\/span>\r\nExpiresByType application<span style=\"color: #333333;\">\/<\/span>pdf <span style=\"background-color: #fff0f0;\">\"access 1 month\"<\/span>\r\nExpiresByType text<span style=\"color: #333333;\">\/<\/span>x<span style=\"color: #333333;\">-<\/span>javascript <span style=\"background-color: #fff0f0;\">\"access 1 month\"<\/span>\r\nExpiresByType application<span style=\"color: #333333;\">\/<\/span>x<span style=\"color: #333333;\">-<\/span>shockwave<span style=\"color: #333333;\">-<\/span>flash <span style=\"background-color: #fff0f0;\">\"access 1 month\"<\/span>\r\nExpiresByType image<span style=\"color: #333333;\">\/<\/span>x<span style=\"color: #333333;\">-<\/span>icon <span style=\"background-color: #fff0f0;\">\"access 1 year\"<\/span>\r\nExpiresDefault <span style=\"background-color: #fff0f0;\">\"access 1 month\"<\/span>\r\n<span style=\"color: #333333;\">&lt;\/<\/span>IfModule<span style=\"color: #333333;\">&gt;<\/span>\r\n<\/pre>\n<p style=\"text-align: left;\">In theory, this should cover the majority of all the testers around the Internet.<\/p>\n<h3 id=\"2_Minify_CSS_and_JavaScripts\" style=\"text-align: left;\">2. Minify CSS and JavaScripts<\/h3>\n<p style=\"text-align: left;\">When it comes to <strong>Eliminate render-blocking resources; Remove unused CSS; Minify JavaScript; Minify CSS; Avoid an excessive DOM size; Reduce JavaScript execution time;\u00a0<\/strong>&#8211; if you do not have a custom-built WordPress theme specifically for your site, or if the theme is not specially designed for Google PageSpeed Insights &#8211; you will have a hard time achieving those. Your closest shot to perfection is to use a plugin that offers minification like Autoptimize or WP Rocket.<\/p>\n<p style=\"text-align: left;\">However, keep in mind your website might simply break. Also, you can always combine your CSS and JS files, but you can&#8217;t remove the pieces of code you do not use. So if you are really after perfection, it is best to rely on a <a href=\"https:\/\/vipestudio.com\/en\/wordpress-website-development\/\">professional WordPress developer<\/a> for a custom-built website.<\/p>\n<h3 id=\"3_Convert_the_Images_to_WebP_and_Resize_them\" style=\"text-align: left;\">3. Convert the Images to WebP and Resize them<\/h3>\n<p style=\"text-align: left;\">In order to satisfy the\u00a0<strong>Serve images in next-gen formats<\/strong>, you can install one of the many plugins that offer the service &#8211; like WebP Express, Hummingbird or Robin Image Optimizer. However, you need to configure these correctly as you have to offer a fallback to jpg and png for Apple devices.<\/p>\n<p style=\"text-align: left;\">How about <strong>Properly size images <\/strong>factor? Let&#8217;s first understand what this means. This grade indicates that you have images whose source file has bigger dimensions in terms of width and height than the size you&#8217;re using on the webpage. For example, this issue occurs when you put a 1200&#215;1200 image and resize it with CSS to be 300&#215;300.<\/p>\n<p style=\"text-align: left;\"><em>The simplest solution is to resize your image and upload a version that matches its container.<\/em><\/p>\n<p style=\"text-align: left;\">But what happens if those images are being called in the wrong size format by your theme &#8211; <strong>like the blog post grid that is calling images with 1024px width, but displays them as 300px?<\/strong><\/p>\n<p style=\"text-align: left;\">What needs to be done in this circumstance is to locate the file that builds the template. Most probably the code will look something like this:<\/p>\n<pre><span style=\"color: #557799;\">&lt;?php<\/span> <span style=\"color: #008800; font-weight: bold;\">echo<\/span> get_the_post_thumbnail( <span style=\"color: #996633;\">$page<\/span><span style=\"color: #333333;\">-&gt;<\/span><span style=\"color: #0000cc;\">ID<\/span>, <span style=\"background-color: #fff0f0;\">'1024width'<\/span>, <span style=\"color: #008800; font-weight: bold;\">array<\/span>( <span style=\"background-color: #fff0f0;\">'class'<\/span> <span style=\"color: #333333;\">=&gt;<\/span> <span style=\"background-color: #fff0f0;\">'blogpost'<\/span> ) ); <span style=\"color: #557799;\">?&gt;<\/span>\r\n<\/pre>\n<p style=\"text-align: left;\">As you see, the image size that is being called is the 1024px one. <strong>We need to register a new image size, by adding this piece of code in your theme&#8217;s functions.php.<\/strong><\/p>\n<pre>add_image_size( <span style=\"background-color: #fff0f0;\">'new300'<\/span>, <span style=\"color: #0000dd; font-weight: bold;\">300<\/span>, <span style=\"color: #0000dd; font-weight: bold;\">200<\/span>, <span style=\"color: #008800; font-weight: bold;\">true<\/span> );\r\n<\/pre>\n<p style=\"text-align: left;\">Then you need to regenerate your image thumbnails, so the newly created image size can have a corresponding file.<\/p>\n<p style=\"text-align: left;\"><strong>Finally, you need to replace the code in your theme with the new image size.<\/strong><\/p>\n<pre><span style=\"color: #557799;\">&lt;?php<\/span> <span style=\"color: #008800; font-weight: bold;\">echo<\/span> get_the_post_thumbnail( <span style=\"color: #996633;\">$page<\/span><span style=\"color: #333333;\">-&gt;<\/span><span style=\"color: #0000cc;\">ID<\/span>, <span style=\"background-color: #fff0f0;\">'new300'<\/span>, <span style=\"color: #008800; font-weight: bold;\">array<\/span>( <span style=\"background-color: #fff0f0;\">'class'<\/span> <span style=\"color: #333333;\">=&gt;<\/span> <span style=\"background-color: #fff0f0;\">'blogpost'<\/span> ) ); <span style=\"color: #557799;\">?&gt;<\/span>\r\n<\/pre>\n<p style=\"text-align: left;\">That&#8217;s it.<\/p>\n<h2 id=\"IV_Conclusion_about_PageSpeed_Insights\" style=\"text-align: left;\">IV Conclusion about PageSpeed Insights<\/h2>\n<p style=\"text-align: left;\">So let&#8217;s conclude what we learned so far:<\/p>\n<h3 id=\"1_Good_Scores_Custom_Websites\" style=\"text-align: left;\">1. Good Scores = Custom Websites<\/h3>\n<p style=\"text-align: left;\">At this point, we can all agree that receiving a good score on Google PageSpeed Insights doesn&#8217;t depend on how fast your website is, but on how closely it&#8217;s been coded to Google&#8217;s technologies.<\/p>\n<h3 id=\"2_Examples_of_good_scores_by_Vipe_Studio\" style=\"text-align: left;\">2. Examples of good scores by Vipe Studio<\/h3>\n<p style=\"text-align: left;\">And finally, let&#8217;s have some time for a show-off! Yes, we do it &#8211; we do build websites on the AMP project and yes, we do achieve the perfect score.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter wp-image-8872\" src=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/covid19bg.png\" alt=\"\" width=\"450\" height=\"301\" srcset=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/covid19bg.png 974w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/covid19bg-300x201.png 300w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/covid19bg-768x514.png 768w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/covid19bg-612x410.png 612w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8874\" src=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/kechnews.png\" alt=\"\" width=\"450\" height=\"293\" srcset=\"https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/kechnews.png 450w, https:\/\/vipestudio.com\/wp-content\/uploads\/2021\/03\/kechnews-300x195.png 300w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\">In conclusion, our idea is not to argue with Google if scores based on following their own technologies is fair or correct, <strong>but to help you set a good realistic level of your expectations.<\/strong> You can&#8217;t install a plugin and score 100\/100 with your website. You need to build your website with the idea of chasing a good score. Learn more by sending an enquiry on our special <a href=\"https:\/\/vipestudio.com\/en\/wordpress-speed-optimization-service\/\">WordPress Speed Optimization Service page<\/a>.<\/p>\n<p style=\"text-align: left;\"><strong>We will be glad to hear your thoughts and comments on the form below.\u00a0<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We all know how important it is to deliver your [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":14002,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[113],"tags":[217,145,214,215,213,216,156],"class_list":["post-8848","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-wordpress-development","tag-amp","tag-caching","tag-google-insights","tag-gtmetrix","tag-pagespeed","tag-sitespeed","tag-theme"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts\/8848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/comments?post=8848"}],"version-history":[{"count":0,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/posts\/8848\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/media\/14002"}],"wp:attachment":[{"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/media?parent=8848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/categories?post=8848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vipestudio.com\/en\/wp-json\/wp\/v2\/tags?post=8848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}