{"id":18440,"date":"2020-04-07T08:42:29","date_gmt":"2020-04-07T05:42:29","guid":{"rendered":"https:\/\/www.reliablesoft.net\/?p=18440"},"modified":"2021-06-28T08:53:11","modified_gmt":"2021-06-28T05:53:11","slug":"pagespeed","status":"publish","type":"post","link":"https:\/\/www.reliablesoft.net\/pagespeed\/","title":{"rendered":"How to Increase Page Speed (Easy Guide)"},"content":{"rendered":"<p>PageSpeed is a critical element for your website\u2019s success. Besides being one of the known ranking factors, it\u2019s also an important usability metric.<\/p>\n<p>Nobody (people or search engines) want to spend their time waiting for your pages to load, especially when there are dozens of other websites on the same topic that load faster.<\/p>\n<p>The good news is that there are ways to improve your page speed by optimizing your website\u2019s infrastructure and following some best practices.<\/p>\n<p>In this guide, you\u2019ll learn:<\/p>\n<ul>\n<li><a href=\"#what-is-pagespeed\">What is PageSpeed?<\/a><\/li>\n<li><a href=\"#pagespeed-seo\">Why is page speed important for SEO?<\/a><\/li>\n<li><a href=\"#ideal-page-speed\">What is the ideal page speed?<\/a><\/li>\n<li><a href=\"#increase-pagespeed\">15 ways to increase your page speed<\/a><\/li>\n<li><a href=\"#measure-page-speed\">How to accurately measure your page speed?<\/a><\/li>\n<\/ul>\n<h2 id=\"what-is-pagespeed\">What is PageSpeed?<\/h2>\n<p>Page speed is the number of seconds that a page takes to load until it becomes fully available to users.<\/p>\n<p>Page speed should not be confused with \u2018website speed\u2019. Website speed is the average pagespeed of a sample of pages from the same site.<\/p>\n<p>The loading speed of a particular page might be different from the average (it can be slower or faster), that\u2019s why it\u2019s important to individually test and optimize the speed of all your pages.<\/p>\n<h2 id=\"pagespeed-seo\">Why is page speed important for SEO?<\/h2>\n<p>Back in April 2010, Google officially announced that page speed is part of the <a href=\"https:\/\/www.reliablesoft.net\/seo-ranking-factors\/\"><strong>Google ranking algorithm<\/strong><\/a>.<\/p>\n<p>The main reasons that forced them to add page speed as a ranking factor were:<\/p>\n<ul>\n<li>Fast websites make users happy and they spend more time on a website.<\/li>\n<li>Fast websites reduce operating costs (less bandwidth and better use of server resources)<\/li>\n<li>Fast websites generate more sales (and conversions in general).<\/li>\n<\/ul>\n<p>Fast forward to today, pagespeed is now more important than ever.<\/p>\n<p>Statistics show that slow loading websites are losing customers since a large majority of users are not willing to wait for more than 3 seconds for a website to load.<\/p>\n<figure id=\"attachment_8749\" aria-describedby=\"caption-attachment-8749\" style=\"width: 1000px\" class=\"wp-caption alignnone\"><img class=\"size-full wp-image-8749\" src=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2018\/01\/mobile-page-speed-studies-google.png\" alt=\"Website Speed and Bounce Rate\" width=\"1000\" height=\"698\" srcset=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2018\/01\/mobile-page-speed-studies-google.png 1000w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2018\/01\/mobile-page-speed-studies-google-600x419.png 600w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2018\/01\/mobile-page-speed-studies-google-300x209.png 300w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2018\/01\/mobile-page-speed-studies-google-768x536.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><figcaption id=\"caption-attachment-8749\" class=\"wp-caption-text\">Website Speed and Bounce Rate<\/figcaption><\/figure>\n<p>In addition, a number of studies show that there is a correlation between Google rankings and page speed. Websites ranking in the first places of Google load faster than websites appearing in the lower places.<\/p>\n<div class=\"learnmore\">Pagespeed is a page ranking factor meaning that it affects each page individually and not the website as a whole.<\/div>\n<h2 id=\"ideal-page-speed\">What is the ideal page speed?<\/h2>\n<p>Unofficially, the ideal pagespeed is less than 3 seconds for both desktop and mobile websites. I say \u2018unofficially\u2019 because this is a number coming from user surveys and studies and it\u2019s not the official number used by the Google algorithms during the ranking process.<\/p>\n<p>The way Google is treating pagespeed is by categorizing pages into \u2018really good\u2019 and \u2018pretty bad\u2019.<\/p>\n<p>This means that if a website is too slow, this may have a negative impact on its rankings. Otherwise, the algorithm treats all the websites the same.<\/p>\n<p>You can watch the following video from Google that discusses how Google deals with pagespeed and site speed in general.<\/p>\n<figure>\n<div class=\"videoWrapper\"><iframe src=\"https:\/\/www.youtube.com\/embed\/7HKYsJJrySY?fs=0&amp;wmode=transparent&amp;autohide=1&amp;rel=0&amp;modestbranding=1\" width=\"560\" height=\"315\" frameborder=\"0\"><\/iframe><\/div><figcaption>Video: How Google Measures Site Speed<\/figcaption><\/figure>\n<p>As a general rule of thumb, you need to take all necessary actions to ensure that your website loads a fast as possible.<\/p>\n<div class=\"learnmore\">Slow websites offer bad user experience and this means they lose money and customers.<\/div>\n<h2 id=\"increase-pagespeed\">15 Ways to Increase PageSpeed<\/h2>\n<p>To improve your page speed, follow the best practices below.<\/p>\n<ol>\n<li><a href=\"#step1\">Compress and optimize your images<\/a><\/li>\n<li><a href=\"#step2\">Optimize the delivery of videos<\/a><\/li>\n<li><a href=\"#step3\">Enable caching<\/a><\/li>\n<li><a href=\"#step4\">Minify CSS and JS<\/a><\/li>\n<li><a href=\"#step5\">Eliminate render-blocking scripts<\/a><\/li>\n<li><a href=\"#step6\">Use scripts asynchronously<\/a><\/li>\n<li><a href=\"#step7\">Leverage browser caching<\/a><\/li>\n<li><a href=\"#step8\">Use preloading and prefetching of resources<\/a><\/li>\n<li><a href=\"#step9\">Move to a faster host<\/a><\/li>\n<li><a href=\"#step10\">Deactivate unnecessary plugins<\/a><\/li>\n<li><a href=\"#step11\">Upgrade your CMS software and plugins<\/a><\/li>\n<li><a href=\"#step12\">Upgrade to the latest version of PHP<\/a><\/li>\n<li><a href=\"#step13\">Consider using a Content Delivery Network (CDN)<\/a><\/li>\n<li><a href=\"#step14\">Optimize your DB<\/a><\/li>\n<li><a href=\"#step15\">Use Google Page Speed Module<\/a><\/li>\n<\/ol>\n<h3 id=\"step1\">1. Compress and optimize your images<\/h3>\n<p>In the majority of cases, a webpage is slow because of the number and size of images. Good quality images and other visual elements are important for SEO and usability so removing them completely is not an option.<\/p>\n<p>What you should do instead is try to minimize their file size without sacrificing their quality.<\/p>\n<p>Follow the recommendations below:<\/p>\n<p><strong>Use the right size of images<\/strong> \u2013 Before uploading an image to your website, re-size it to the maximum width you\u2019ll need.<\/p>\n<p>For example, if the maximum width you show images on your blog is 1200px, then it\u2019s a waste to upload images that are bigger than this.<\/p>\n<p>You can use tools like <em>Photoshop<\/em>, <em>Gimp<\/em> or <em>Pixelmator<\/em> to open an image, change its dimensions and export to a web-friendly format like jpg or png.<\/p>\n<p><strong>Use an image optimizer (extremely important)<\/strong> &#8211; The next step is to use an image optimizer. Images exported through <em>Photoshop<\/em> or <em>pixelmator<\/em> are not completely optimized when it comes to optimum file size.<\/p>\n<p>Tools like <em>imageOptim<\/em> (for mac users) or <a href=\"https:\/\/imagecompressor.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><em>image compressor<\/em><\/a> can dramatically reduce the file size of an image without affecting its quality.<\/p>\n<p>Look at the screenshot below. Both images look exactly the same and they have the same dimensions. The image on the right is 56% smaller in file size.<\/p>\n<figure id=\"attachment_18444\" aria-describedby=\"caption-attachment-18444\" style=\"width: 1752px\" class=\"wp-caption alignnone\"><img class=\"size-full wp-image-18444\" src=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/image-compression.png\" alt=\"image compression\" width=\"1752\" height=\"804\" srcset=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/image-compression.png 1752w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/image-compression-300x138.png 300w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/image-compression-1024x470.png 1024w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/image-compression-768x352.png 768w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/image-compression-1536x705.png 1536w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/image-compression-400x184.png 400w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/image-compression-600x275.png 600w\" sizes=\"(max-width: 1752px) 100vw, 1752px\" \/><figcaption id=\"caption-attachment-18444\" class=\"wp-caption-text\">Image Compression Example.<\/figcaption><\/figure>\n<div class=\"learnmore\">These two steps alone will reduce the size of your images and this will have a huge impact on your page loading speed, especially on mobile devices.<\/div>\n<p><strong>Use responsive images<\/strong> &#8211; Upgrade WordPress to the latest version so that you can take advantage of responsive images.<\/p>\n<p>What this feature does is two things:<\/p>\n<ul>\n<li>When you upload an image to the WordPress media library, it automatically creates a set of images that have different sizes.<\/li>\n<li>When a page is loaded and depending on the resolution, it automatically shows the equivalent image size to users.<\/li>\n<\/ul>\n<p>This means that on mobile users are served a smaller size image and this improves the mobile pagespeed, especially on pages with lots of images.<\/p>\n<blockquote><p>If you\u2019re not on WordPress, you can <a href=\"https:\/\/www.reliablesoft.net\/hire-web-developer\/\"><strong>get the help of a developer<\/strong><\/a> to implement responsive images on your CMS. It\u2019s a feature that can be implemented on any website.<\/p><\/blockquote>\n<p><strong>Important Note:<\/strong><\/p>\n<p>The new responsive images created automatically by WordPress, are not fully optimized even if the original image was optimized.<\/p>\n<p>This means you either have to use an image compression service to do this for you, or to optimize the images manually using <em>imageOptim<\/em> or any other software.<\/p>\n<blockquote><p>What I do on a monthly basis is to download all images for the month (found under \/wp-content\/uploads\/[year][month]), on my PC, optimize them using <em>imageOptim<\/em> and upload them back to the server.<\/p><\/blockquote>\n<p><strong>Use lazy loading &#8211;<\/strong> This is a technique where the browsers load the images in a page or post when they are needed i.e. as users scroll down the page and not all images at once (this is the default behavior).<\/p>\n<p>By doing so, pages load faster, especially on mobile.<\/p>\n<p>The good news is that there are a number of plugins that can help you do this without having to do any changes to your website.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/native-lazyload\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Native Lazyload<\/strong><\/a> &#8211;\u00a0 A WordPress plugin by Google that uses the native browser feature. All you have to do is install the plugin and activate it. There are no options to configure.<\/p>\n<p><a href=\"\/tools\/wprocket\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>WP-ROCKET <\/strong><\/a>&#8211; A premium WordPress plugin that has built-in support for lazy loading images and videos. This is the plugin I\u2019m using on my website as well.<\/p>\n<h3 id=\"step2\">2. Optimize the delivery of videos<\/h3>\n<p>Another element that can slow down your pages considerably, if not optimized correctly, is videos.<\/p>\n<p>When embedding videos into your content, you should follow these best practices:<\/p>\n<p><strong>Upload videos to a streaming service<\/strong> &#8211; The best way to minimize the impact of videos on page loading speed is to upload them to a streaming service i.e. YouTube or Vimeo and then embed them on your website.<\/p>\n<p>By doing so, your server is not responsible for streaming the video content but the content comes directly from the provider.<\/p>\n<p><strong>Disable video autoplay<\/strong> &#8211; Make sure that you don\u2019t use autoplay.\u00a0 Besides being a bad user experience it also slows down the loading of a page considerably.<\/p>\n<p><strong>Use lazy loading &#8211; <\/strong>The lazy loading technique can also be applied to videos. Videos will only be loaded from the external source, when they are in the user\u2019s viewport and not when a page is loaded.<\/p>\n<p><strong>Replace video iframe with a preview image<\/strong> &#8211; This is another technique you can use. You show a preview image to users while waiting for a video to load. <a href=\"\/tools\/wprocket\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Wp-rocket<\/strong> <\/a>has this feature built-in.<\/p>\n<h3 id=\"step3\">3. Enable caching<\/h3>\n<p>Caching is a mechanism that helps a lot with page speed and it&#8217;s a must for all websites.<\/p>\n<p>In simple words, when you <a href=\"https:\/\/blog.templatetoaster.com\/best-wordpress-cache-plugin-speed-up-website\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>use caching<\/strong><\/a>, the server creates static HTML versions of your webpages and shows those to users instead of generating the pages from the beginning every time there is a request for a page.<\/p>\n<p>This makes the process faster, fewer server resources are required and the user gets a better experience.<\/p>\n<p>The caching mechanism is clever enough to understand when there is a change to a page or when not to cache a page, so the overall website experience is the same.<\/p>\n<figure id=\"attachment_18470\" aria-describedby=\"caption-attachment-18470\" style=\"width: 1894px\" class=\"wp-caption alignnone\"><img class=\"size-full wp-image-18470\" src=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/caching-options.png\" alt=\"WP Rocket Caching Options\" width=\"1894\" height=\"538\" srcset=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/caching-options.png 1894w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/caching-options-300x85.png 300w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/caching-options-1024x291.png 1024w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/caching-options-768x218.png 768w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/caching-options-1536x436.png 1536w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/caching-options-400x114.png 400w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/caching-options-600x170.png 600w\" sizes=\"(max-width: 1894px) 100vw, 1894px\" \/><figcaption id=\"caption-attachment-18470\" class=\"wp-caption-text\">WP Rocket Caching Options<\/figcaption><\/figure>\n<p>To enable caching on your WordPress website, you can use a caching plugin like <a href=\"\/tools\/wprocket\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>wp-rocket<\/strong><\/a> or <a href=\"https:\/\/wordpress.org\/plugins\/wp-super-cache\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>wp super cache<\/strong><\/a>.<\/p>\n<p>These plugins will add all necessary caching rules to your .htacess file and even create a separate cache for mobile users and a cache for logged in users.<\/p>\n<p>Configuration of the plugin is straightforward and no technical knowledge is required.<\/p>\n<h3 id=\"step4\">4. Minify CSS and JS<\/h3>\n<p><a href=\"https:\/\/sitechecker.pro\/minify-css\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Minification<\/strong><\/a> is a process that removes all unnecessary characters from CSS and JS files (like comments and white spaces) and this makes those files smaller in size.<\/p>\n<figure id=\"attachment_18456\" aria-describedby=\"caption-attachment-18456\" style=\"width: 1489px\" class=\"wp-caption alignnone\"><img class=\"size-full wp-image-18456\" src=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/minification.jpg\" alt=\"\" width=\"1489\" height=\"783\" srcset=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/minification.jpg 1489w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/minification-300x158.jpg 300w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/minification-1024x538.jpg 1024w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/minification-768x404.jpg 768w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/minification-400x210.jpg 400w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/minification-600x316.jpg 600w\" sizes=\"(max-width: 1489px) 100vw, 1489px\" \/><figcaption id=\"caption-attachment-18456\" class=\"wp-caption-text\">Minification reduces the size of CSS and JS Files<\/figcaption><\/figure>\n<p>Minification does not change the functionality but it does reduce the file size and this means faster loading times.<\/p>\n<p>For the non-technical persons, CSS and JS are files used by all kinds of websites and platforms. The CSS is responsible for the styling of a page and the JS for functionality.<\/p>\n<p>There are three ways to enable minification on your website:<\/p>\n<ol>\n<li>Check if your CMS supports this option. Normally this is found under \u2018Speed Optimization\u2019 or advanced.<\/li>\n<li>If you\u2019re on WordPress, check if this option is available in your theme settings.<\/li>\n<li>Use a minification plugin like <em>wp-rocket <\/em>or <a href=\"https:\/\/wordpress.org\/plugins\/autoptimize\/\"><strong>autoptimize<\/strong><\/a>.<\/li>\n<\/ol>\n<h3 id=\"step5\">5. Eliminate render-blocking scripts<\/h3>\n<p>When a page is loaded, the browser will try to load all the resources defined in the header and then continue with the rest of the page.<\/p>\n<p>Header resources may include the Google Analytics script, Facebook pixel, Google Ads script and many other scripts needed by your website to function properly.<\/p>\n<p>If any of these resources fail to load quickly this will delay the loading of a page.<\/p>\n<p>What you can do to avoid this situation is two things:<\/p>\n<ol>\n<li>Try not to add any external resources or scripts (unless really necessary) to the website header.<\/li>\n<li>Move render-blocking scripts to the footer of the website. If this sounds too technical then you can use <a href=\"\/tools\/wprocket\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>wp-rocket<\/strong><\/a> or the help of a developer to do this for you.<\/li>\n<\/ol>\n<h3 id=\"step6\">6. Use scripts asynchronously<\/h3>\n<p>Another trick that is very effective when doing page speed optimization is to ensure that all scripts are loaded asynchronously.<\/p>\n<p>During page load, the browser will try to load any script that is found in the website\u2019s HTML code (either in the header, body or footer), before proceeding with rendering a page.<\/p>\n<p>This adds extra time to the page loading speed, especially when scripts are hosted on slow servers.<\/p>\n<p>To solve this problem, you need to load scripts asynchronously. In simple words, this means instructing the browser to continue loading a page and not wait for the script to be fully loaded.<\/p>\n<p>This is done through code by adding the command \u2018asynchronous\u2019 in your script\u2019s code.<\/p>\n<p>This is a task that can be done by a developer or through a premium plugin like <em>wp-rocket.<\/em><\/p>\n<h3 id=\"step7\">7. Leverage browser caching<\/h3>\n<p>Browser caching is different than the \u2018server caching\u2019 discussed above. All modern browsers are using a caching mechanism to make pages load faster.<\/p>\n<p>The way it works is simple. When a page is first loaded, browsers will save elements of the page like images, CSS files, JavaScripts on the user\u2019s device.<\/p>\n<p>The next time a user visits the particular page or any other page from the same website, the browser will use the locally saved resources (which is a much faster process), rather than requesting these from the server.<\/p>\n<p>The result is improved pagespeed.<\/p>\n<p>As a webmaster, your job is to give instructions to the browser, through your website\u2019s <em>.htaccess<\/em> file as to how often and when they should refresh the local elements.<\/p>\n<p>This is a highly technical task and the best way to deal with this is to use a plugin. Again, <em>wp-rocket<\/em> will automatically do this for you without having to add any code.<\/p>\n<h3 id=\"step8\">8. Use preloading and prefetching of resources<\/h3>\n<p>Preloading and prefetching of resources is a technique that can increase the performance of your website as a whole and improve the loading of your important pages.<\/p>\n<p>With preloading and prefetching, you instruct the browser to load in the background resources or pages that you know that will be needed as the user browses a website.<\/p>\n<p>Let me give you a couple of examples of how to take advantage of this:<\/p>\n<p><strong>Preloading of pages: <\/strong>Good caching plugins have a PRELOAD feature. When preload is enabled, the plugin creates caches copies of all the website pages so when a user is visiting a page, this is shown faster since the processing has already be done.<\/p>\n<p><strong>DNS prefetching:<\/strong> When a website is using external files (for example Google Fonts, or Font awesome icons), you can add them in the DNS prefetching section of your plugin and this will speed up their loading time considerably.<\/p>\n<p>In <em>wp-rocket<\/em>, this is as simple as adding the URL you want to prefetch in the DNS Prefetch section.<\/p>\n<figure id=\"attachment_18464\" aria-describedby=\"caption-attachment-18464\" style=\"width: 1892px\" class=\"wp-caption alignnone\"><img class=\"size-full wp-image-18464\" src=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/prefetch-dns.png\" alt=\"prefetch DNS settings\" width=\"1892\" height=\"634\" srcset=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/prefetch-dns.png 1892w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/prefetch-dns-300x101.png 300w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/prefetch-dns-1024x343.png 1024w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/prefetch-dns-768x257.png 768w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/prefetch-dns-1536x515.png 1536w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/prefetch-dns-400x134.png 400w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/prefetch-dns-600x201.png 600w\" sizes=\"(max-width: 1892px) 100vw, 1892px\" \/><figcaption id=\"caption-attachment-18464\" class=\"wp-caption-text\">Prefetch DNS Improves the loading speed of a website.<\/figcaption><\/figure>\n<p><strong>Pre-rendering specific pages: <\/strong>This is an advanced technique but highly effective and easy to implement.<\/p>\n<p>You can use the <em>prerender <\/em>and <em>prefetch<\/em> commands to instruct the browser to background load the most important pages of your website that you expect users to visit.<\/p>\n<p>For example, on my website, I added the line below in the header &lt;HEAD&gt;&lt;\/HEAD&gt; which tells browsers to \u2018prepare\u2019 the loading of my <a href=\"https:\/\/www.reliablesoft.net\/products\/courses\/digital-marketing-course-bundle\/\"><strong>Digital Marketing Course<\/strong><\/a> sales page, as soon as a user visits any page from my site.<\/p>\n<p><code>&lt;link rel=\"prerender prefetch\" href=\"https:\/\/www.reliablesoft.net\/products\/courses\/digital-marketing-course-bundle\/\"&gt;<\/code><\/p>\n<p>The result is that the page loads instantly when users view the page either from the main menu or from any other internal link.<\/p>\n<blockquote><p><strong>Important:<\/strong> Do not use this for more than one or two pages of your website, otherwise, it is possible to generate the opposite results.<\/p><\/blockquote>\n<h3 id=\"step9\">9. Move to a faster host<\/h3>\n<p>If after you do the above changes, you still notice that your website is slow then it\u2019s time to consider changing hosts.<\/p>\n<p>Your hosting provider plays a big role in how fast your website will load.<\/p>\n<p>Serious bloggers or <a href=\"https:\/\/www.reliablesoft.net\/how-to-start-an-online-business\/\"><strong>online business<\/strong><\/a> owners should use a VPS to host their websites and not shared hosting.<\/p>\n<p>The main difference between the two is that shared hosting is cheaper but your website is hosted on the same server with dozens of other websites sharing the same resources.<\/p>\n<p>When you rent your own Virtual Private Server (VPS), your website is hosted on its own IP, on a virtual server that has dedicated resources.<\/p>\n<p>This means that your website is more secure and any potential problems or flaws in other websites do not negatively impact your website\u2019s performance. It\u2019s more expensive than shared hosting but it certainly worth\u2019s it.<\/p>\n<div class=\"learnmore\">To learn more, can read my previous post on <a href=\"https:\/\/www.reliablesoft.net\/seo-web-hosting-how-do-hosting-providers-affect-seo\/\"><strong>how do hosting providers affect SEO<\/strong><\/a>.<\/div>\n<h3 id=\"step10\">10. Deactivate unnecessary plugins\/add ons<\/h3>\n<p>The terminology <em>plugins<\/em> is used by WordPress. Other CMS use the name <em>add-ons<\/em> for any additional software installed on a website.<\/p>\n<p>It\u2019s a common practice to install plugins for testing purposes and then forget about them. As a first step, review all your active plugins and deactivate the ones that are not used.<\/p>\n<p>Even if you don\u2019t actively use a plugin, the plugin code\/CSS is still loaded and this affects your website speed.<\/p>\n<p>As a second step, go through the plugins you actually use and see if there are ways to do what the plugin does but without having the plugin.<\/p>\n<p>For example, you may use a plugin to add <a href=\"https:\/\/www.reliablesoft.net\/can-you-still-make-money-with-adsense\/\"><strong>AdSense ads<\/strong><\/a> to your web pages but with a few lines of code into your <em>functions.php<\/em>, you can have the same outcome without having to load the extra coding and logic added by a plugin.<\/p>\n<p>Simple changes like that, although they may seem not important, they can help you gain a few seconds in loading time.<\/p>\n<p>If you\u2019re not a technical person, it is strongly recommended to hire a developer to review and update your add-ons and suggest ways to minimize their usage.<\/p>\n<h3 id=\"step11\">11. Consider using a CDN<\/h3>\n<p>A content delivery network or CDN is a service that helps to improve pagespeed by:<\/p>\n<ul>\n<li>Using various servers to deliver the static elements of a website (images, CSS, JS)<\/li>\n<li>Using servers that are closer to the physical location of the user.<\/li>\n<\/ul>\n<p>For example, if you have users accessing your website from different countries, the users in the US will be served from US-based servers while the users in Germany from Germans based servers.<\/p>\n<figure id=\"attachment_18465\" aria-describedby=\"caption-attachment-18465\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img class=\"size-full wp-image-18465\" src=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/cdn.png\" alt=\"cdn\" width=\"1200\" height=\"515\" srcset=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/cdn.png 1200w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/cdn-300x129.png 300w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/cdn-1024x439.png 1024w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/cdn-768x330.png 768w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/cdn-400x172.png 400w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/cdn-600x258.png 600w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption id=\"caption-attachment-18465\" class=\"wp-caption-text\">The image on the left &#8211; No CDN. The image on the right &#8211; With CDN.<\/figcaption><\/figure>\n<p>To use a CDN, you need to have a subscription with a CDN provider like Cloudflare, StackPath and you also need to do some configuration on your domain so that any page requests are redirected to your CDN provider.<\/p>\n<p>Many CDN providers offer additional features like protection from DDoS attacks, automatic SSL, image optimization, and minification of HTML, CSS, and JavaScript.<\/p>\n<p><strong>Should you use a CDN? <\/strong>My recommendation is that you don\u2019t have to use a CDN unless you have a LOT of images on your pages.<\/p>\n<p>For normal websites, blogs, corporate websites that don\u2019t heavily use images, it is enough to follow the other optimization guidelines.<\/p>\n<p>If you have a high traffic eCommerce website with many images then a CDN may worth it, otherwise, you can still get great page loading speeds without it.<\/p>\n<h3 id=\"step12\">12. Optimize your DB<\/h3>\n<p>Behind the scenes, all CMS platforms use a database server and most of them are using MySQL, MariaDB or SQL Server. A slow database server will slow down your website.<\/p>\n<p>WordPress is based on a MySQL Database. While you don\u2019t need to know any other technical details, what you need to understand is that by adding\/deleting content\/posts to your website, the database gets bigger and at some point is good to do some maintenance work.<\/p>\n<p>This involves things like:<\/p>\n<ul>\n<li>Deleting unnecessary post revisions (every time you click \u2018Save Draft\u2019, a version of the post or page is kept to the DB).<\/li>\n<li>Deleting spam comments.<\/li>\n<li>Re-indexing the database tables (don\u2019t worry if you don\u2019t know what this is).<\/li>\n<li>Removing unnecessary table<\/li>\n<li>Optimizing tables<\/li>\n<\/ul>\n<p>Performing these actions regularly will reduce the size of your DB and it will run smoother and faster.<\/p>\n<p>Again, the best way to do this is through a plugin. I use wp-rocket but there are other alternatives like <a href=\"https:\/\/wordpress.org\/plugins\/wp-optimize\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>wp-optimize<\/strong><\/a>.<\/p>\n<h3 id=\"step13\">13. Use Google Page Speed Module<\/h3>\n<p><strong>\u00a0<\/strong>If you are on a VPS, then an alternative to using a caching plugin is to use <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/module\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Google Page Speed Module<\/strong><\/a>. This is a piece of software developed by Google that is installed on your webserver and takes care of caching and optimizing your HTML and CSS without having to do any changes to your website.<\/p>\n<p>I have tested this on a number of websites and it works well but the downside of this is that you need the help of your hosting provider to install the module of your web server and some technical knowledge to configure it correctly.<\/p>\n<p>If you want to play with it and test it, you can read all about it <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/module\/configuration\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>here<\/strong><\/a>.<\/p>\n<h3 id=\"step14\">14. Upgrade your CMS software and plugins<\/h3>\n<p>It\u2019s always a good practice to keep your CMS software and plugins\/add-ons up-to-date.<\/p>\n<p>All software providers are constantly trying to improve the security and performance of their software and to take advantage of this, you need to ensure that you\u2019re using the latest versions.<\/p>\n<p>Don\u2019t forget to take a website backup before performing upgrades. Sometimes, new versions create issues and it\u2019s always good to have an older version you can go back to.<\/p>\n<h3 id=\"step15\">15. Upgrade to the latest version of PHP<\/h3>\n<p>This is a highly technical task but one that can make a HUGE difference in your pagespeed, even without making any other changes to your website.<\/p>\n<p>PHP is the programming language used by major CMS (including WordPress). Over the years, the developers behind PHP are trying to improve its performance and newer versions load much faster than older versions.<\/p>\n<p>Check with your hosting provider the version of PHP you\u2019re using and consult with a developer on what it takes to update your website to the latest version.<\/p>\n<p>Have in mind that besides speed improvements, PHP versions have other differences as well and switching to a newer version without thoroughly testing your website may be catastrophic.<\/p>\n<p>On the other hand, if you do the procedure correctly with the help of a developer, all your website code can be migrated correctly and you can take advantage of the speed improvements.<\/p>\n<p>To give you an idea of the speed gains, have a look at the <a href=\"https:\/\/kinsta.com\/blog\/php-benchmarks\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>PHP benchmarks<\/strong><\/a> below.<\/p>\n<figure id=\"attachment_18457\" aria-describedby=\"caption-attachment-18457\" style=\"width: 940px\" class=\"wp-caption alignnone\"><img class=\"size-full wp-image-18457\" src=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/php-speed-comparison.png\" alt=\"PHP Speed Comparison\" width=\"940\" height=\"686\" srcset=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/php-speed-comparison.png 940w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/php-speed-comparison-300x219.png 300w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/php-speed-comparison-768x560.png 768w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/php-speed-comparison-400x292.png 400w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/php-speed-comparison-600x438.png 600w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><figcaption id=\"caption-attachment-18457\" class=\"wp-caption-text\">PHP Speed Comparison<\/figcaption><\/figure>\n<h2 id=\"measure-page-speed\">How to accurately measure your page speed?<\/h2>\n<p>While so far we have talked about ways to improve your page loading speed, the only way to know if your changes are working positively or not is to use a couple of page speed tools and analyze the results.<\/p>\n<p>Measuring your website speed before and after the changes will help you identify exactly where the problem is (or the areas you have improved).<\/p>\n<p>The tools we\u2019ll use for this task are:<\/p>\n<ul>\n<li>Google PageSpeed Insights<\/li>\n<li>Pingdom Website Speed Test<\/li>\n<\/ul>\n<h3>Google Page Speed Insights<\/h3>\n<p>PageSpeed Insights is a free tool offered by Google. The tool analyzes the content of a web page, then generates suggestions to make that page faster.<\/p>\n<p>Go to <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>PageSpeed Insights<\/strong><\/a> and type in your domain name or the URL of a particular page and click ANALYZE.<\/p>\n<figure id=\"attachment_18460\" aria-describedby=\"caption-attachment-18460\" style=\"width: 1516px\" class=\"wp-caption alignnone\"><img class=\"size-full wp-image-18460\" src=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/PageSpeed-Insights-Score.png\" alt=\"Google PageSpeed Insights\" width=\"1516\" height=\"938\" srcset=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/PageSpeed-Insights-Score.png 1516w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/PageSpeed-Insights-Score-300x186.png 300w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/PageSpeed-Insights-Score-1024x634.png 1024w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/PageSpeed-Insights-Score-768x475.png 768w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/PageSpeed-Insights-Score-400x247.png 400w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/PageSpeed-Insights-Score-600x371.png 600w\" sizes=\"(max-width: 1516px) 100vw, 1516px\" \/><figcaption id=\"caption-attachment-18460\" class=\"wp-caption-text\">Google PageSpeed Insights<\/figcaption><\/figure>\n<p>What you see is the speed performance of your website for both Mobile and Desktop as well as a number of suggestions from Google on how to improve your performance.<\/p>\n<p><strong>A few things to know about PageSpeed Insights reports:<\/strong><\/p>\n<p>A page score is a number calculated using <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/v3\/scoring\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Google lighthouse<\/strong><\/a> data. If you want to learn the technical details, you can read the formula <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/v3\/scoring\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>here<\/strong><\/a>.<\/p>\n<p>The higher the score you can get the better.<\/p>\n<p>Don\u2019t expect that you can get a 100% score, it\u2019s very difficult for the average website to achieve this.<\/p>\n<p>The page score is not directly related to Google rankings. In other words, it does not mean that pages with a higher score, will rank better than a page with a lower score.<\/p>\n<p>As explained above, Google is using a different approach (by grouping websites into two major categories), when it comes to page speed and rankings.<\/p>\n<p>Don\u2019t be over-obsessed with the page score. What is more important is the actual time it takes for your pages to load in real-life scenarios and not your PageSpeed insights score.<\/p>\n<p>Use PageSpeed score as a KPI to measure the effectiveness of your page improvement changes (before and after making a change).<\/p>\n<h3>Pingdom Website Speed Test<\/h3>\n<figure id=\"attachment_18459\" aria-describedby=\"caption-attachment-18459\" style=\"width: 2236px\" class=\"wp-caption alignnone\"><img class=\"size-full wp-image-18459\" src=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/pingdom-pagespeed-recommendations.png\" alt=\"Pingdom PageSpeed Recommendations\" width=\"2236\" height=\"736\" srcset=\"https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/pingdom-pagespeed-recommendations.png 2236w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/pingdom-pagespeed-recommendations-300x99.png 300w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/pingdom-pagespeed-recommendations-1024x337.png 1024w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/pingdom-pagespeed-recommendations-768x253.png 768w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/pingdom-pagespeed-recommendations-1536x506.png 1536w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/pingdom-pagespeed-recommendations-2048x674.png 2048w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/pingdom-pagespeed-recommendations-400x132.png 400w, https:\/\/www.reliablesoft.net\/wp-content\/uploads\/2020\/04\/pingdom-pagespeed-recommendations-600x197.png 600w\" sizes=\"(max-width: 2236px) 100vw, 2236px\" \/><figcaption id=\"caption-attachment-18459\" class=\"wp-caption-text\">Pingdom PageSpeed Recommendations<\/figcaption><\/figure>\n<p><a href=\"https:\/\/tools.pingdom.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Pingdom Website Speed Test <\/strong><\/a>analyses a page on your website and gives you a number of useful metrics including:<\/p>\n<ul>\n<li>How many seconds it takes for the page to load<\/li>\n<li>The total size of your page (in MB)<\/li>\n<li>The number of requests executed until a page is fully loaded<\/li>\n<li>How long each page element took to load<\/li>\n<\/ul>\n<p>What is nice about this tool is that you can take speed measurements and see how your website is performing in different geographical locations.<\/p>\n<p>This is useful when you are located in a different country than your target audience.<\/p>\n<p><strong>A few things to know about Pingdom reports:<\/strong><\/p>\n<p>The most important metric is the LOAD TIME. This is the actual time in seconds your website loads from the specified location.<\/p>\n<p>Look at the PAGE SIZE and try to keep it below 1.5MB. The bigger the page size the more time it takes for the page to load.<\/p>\n<p>Look at the FILE REQUESTS section and find out which website elements take more time to load. Go through the list carefully and spot any scripts or CSS files that shouldn&#8217;t be loaded for the particular URL and get the help of a developer to remove them.<\/p>\n<p>For example, if you&#8217;re using WooCommerce, you&#8217;ll notice that it loads a number of CSS and JS files on pages that are not needed.\u00a0 Removing them from the pages that don&#8217;t actually use them, will make those pages faster. The same applies to a number of plugins.<\/p>\n<div class=\"key-learnings\">\n<h2>Key Learnings<\/h2>\n<p>Page speed is important and something that you need to check on a regular basis. It\u2019s not a one-time task. As your website grows both in content and traffic, you need to periodically check your website\u2019s load speed (especially for your popular pages), and take actions where necessary to improve it.<\/p>\n<p>Making use of a good caching plugin will help you solve a number of speed problems and if you also take care of your image sizes then your webpage loading speed will dramatically improve.<\/p>\n<p>Keeping your CMS and all plugins up to date is also important since new versions are more likely to include speed improvements.<\/p>\n<p>Finally, use the two tools mentioned above to take measurements from different geographical locations to ensure that the majority of your users can access your website fast with no unnecessary delays.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>PageSpeed is a critical element for your website\u2019s success. Besides being one of the known ranking factors, it\u2019s also an important usability metric. Nobody (people or search engines) want to spend their time waiting for your pages to load, especially when there are dozens of other websites on the same topic that load faster. The [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":18441,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","mc4wp_mailchimp_campaign":[]},"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/www.reliablesoft.net\/wp-json\/wp\/v2\/posts\/18440"}],"collection":[{"href":"https:\/\/www.reliablesoft.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.reliablesoft.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.reliablesoft.net\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.reliablesoft.net\/wp-json\/wp\/v2\/comments?post=18440"}],"version-history":[{"count":23,"href":"https:\/\/www.reliablesoft.net\/wp-json\/wp\/v2\/posts\/18440\/revisions"}],"predecessor-version":[{"id":28839,"href":"https:\/\/www.reliablesoft.net\/wp-json\/wp\/v2\/posts\/18440\/revisions\/28839"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.reliablesoft.net\/wp-json\/wp\/v2\/media\/18441"}],"wp:attachment":[{"href":"https:\/\/www.reliablesoft.net\/wp-json\/wp\/v2\/media?parent=18440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.reliablesoft.net\/wp-json\/wp\/v2\/categories?post=18440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.reliablesoft.net\/wp-json\/wp\/v2\/tags?post=18440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}