{"id":4286,"date":"2019-04-19T09:56:20","date_gmt":"2019-04-19T09:56:20","guid":{"rendered":"https:\/\/shortpixel.com/blog\/?p=4286"},"modified":"2019-04-19T10:16:52","modified_gmt":"2019-04-19T10:16:52","slug":"7-clever-strategies-boost-page-speed-you-may-not-have-heard-of","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/7-clever-strategies-boost-page-speed-you-may-not-have-heard-of\/","title":{"rendered":"7 Clever Strategies to Boost Page Speed You May Not Have Heard of"},"content":{"rendered":"<p><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/Boost-Page-Speed.jpg\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-4299\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/Boost-Page-Speed-1024x685.jpg\" alt=\"Strategies page speed\" width=\"604\" height=\"404\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/Boost-Page-Speed-1024x685.jpg 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/Boost-Page-Speed-300x201.jpg 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/Boost-Page-Speed-768x514.jpg 768w\" sizes=\"(max-width: 604px) 100vw, 604px\" \/><\/a>I\u2019m sure that there are tons of blog posts where you can find information about boosting the page speed of your WordPress site. Just google \u201chow to boost WordPress page speed\u201d, and you&#8217;ll understand! But most of these articles only give you some generic and well-known tips, such as:<\/p>\n<p>&#8211; Use a caching plugin<br \/>\n&#8211; Use a CDN<br \/>\n&#8211; Limit the use of plugins<\/p>\n<p>However, in this post we\u2019re going to dive deeper in some of the less-known page speed optimization strategies. Let\u2019s cut the fluff and get started!<!--more--><\/p>\n<h4>1. Using JPG vs PNG<\/h4>\n<p><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/JPG-versus-PNG.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-4290\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/JPG-versus-PNG-1024x681.png\" alt=\"JPG vs PNG format\" width=\"604\" height=\"402\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/JPG-versus-PNG-1024x681.png 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/JPG-versus-PNG-300x199.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/JPG-versus-PNG-768x511.png 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/JPG-versus-PNG.png 1086w\" sizes=\"(max-width: 604px) 100vw, 604px\" \/><\/a>When it comes to web images there are two formats you should use &#8211; JPG and PNG. It\u2019s a well-known fact that you need to optimize your images using the <a href=\"https:\/\/shortpixel.com/blog\/wp-image-optimization-wordpress-plugins\/\" target=\"_blank\" rel=\"noopener\">tools that offer the best compression rates<\/a>. But that\u2019s just not enough. You also need to know when to use these formats.<\/p>\n<p>In layman terms:<\/p>\n<p>&#8211; JPG format: use this format when your image has diverse colors, for example for portraits or photographs<br \/>\n&#8211; PNG format: use this format when your image has limited colors. We\u2019re talking about screenshots or vector images here<\/p>\n<p>If you use PNGs for photographs, they will take several megabytes of storage. On the other hand, if you use JPGs for screenshots or vectors, they will take considerably more space than PNGs.<\/p>\n<p>You need to forget about compression and resizing, just choose the right format and let the WordPress plugins and services like <a href=\"https:\/\/shortpixel.com\/\" target=\"_blank\" rel=\"noopener\">ShortPixel<\/a> handle the rest.<\/p>\n<p>I used to compress and resize images manually using ImageOptim and my Mac Preview app, but now I have ShortPixel installed on my site and it automatically does the work for me.<\/p>\n<p>This kind of plugins which handle image compression, resizing, and, also change the image format, save you a lot of time and headache.<\/p>\n<h4>2. Choose your theme cleverly<\/h4>\n<p><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/Right-WordPress-theme.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-4292\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/Right-WordPress-theme-1024x837.png\" alt=\"Choosing the right WP theme\" width=\"604\" height=\"494\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/Right-WordPress-theme-1024x837.png 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/Right-WordPress-theme-300x245.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/Right-WordPress-theme-768x628.png 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/Right-WordPress-theme.png 1074w\" sizes=\"(max-width: 604px) 100vw, 604px\" \/><\/a>You need to choose the right theme for your WordPress site. Here are some tips that help you choose a theme that\u2019s great:<\/p>\n<p>&#8211; A theme should have a clean code &#8211; without improper image scaling and inline CSS<br \/>\n&#8211; A theme should be modular so that you can disable the unwanted functionalities and scripts to speed up your site<br \/>\n&#8211; A theme should be well-maintained with regular updates (this is crucial as WordPress regularly undergoes major chances &#8211; like the one we saw in the case of Gutenberg)<br \/>\n&#8211; Complete mobile responsiveness is very important as Google\u2019s mobile-first indexing is in place<br \/>\n&#8211; A theme should offer good features so that you can avoid using plugins<\/p>\n<p>I\u2019ve been in the WordPress field for 5 years and I absolutely love Astra Pro and GeneratePress Pro themes.<\/p>\n<p>Another question I see people ask is: \u201c<em>What about page builder plugins?<\/em>\u201d Using page builders is becoming essential for any website that needs great design flexibility. I recommend you check out this post where popular <a href=\"https:\/\/bloggingx.com\/elementor-vs-beaver-builder-vs-divi\/\" target=\"_blank\" rel=\"noopener\">WordPress page builder plugins are compared<\/a> to each other.<\/p>\n<p>I always suggest my readers not to use page builders on each page of their site. With WordPress Gutenberg and some custom CSS you can build fast loading pages and, also, not depend on any other plugins but the WordPress core.<\/p>\n<p>You could also read: <a href=\"https:\/\/shortpixel.com/blog\/how-to-optimize-your-wordpress-themes-and-plugins-with-shortpixel\/\" target=\"_blank\" rel=\"noopener\">How to Optimize Images in WordPress Themes and Plugins With ShortPixel?<\/a><\/p>\n<h4>3. Choose plugins that offer all-in-one features<\/h4>\n<p><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/plugins-all-in-one-features.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-4293\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/plugins-all-in-one-features-1024x492.png\" alt=\"Plugins with features\" width=\"604\" height=\"290\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/plugins-all-in-one-features-1024x492.png 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/plugins-all-in-one-features-300x144.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/plugins-all-in-one-features-768x369.png 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/plugins-all-in-one-features.png 1144w\" sizes=\"(max-width: 604px) 100vw, 604px\" \/><\/a>Limit the number of plugins you use on your site. Because multiple plugins from different developers can conflict with each other and slow down your page speed. Make use of a few plugins that offer more features!<\/p>\n<p>For example, ShortPixel comes with multiple features like:<br \/>\n&#8211; JPG and PNG compression<br \/>\n&#8211; PDF compression<br \/>\n&#8211; Image resizing<br \/>\n&#8211; Image format conversion<\/p>\n<p>You don\u2019t need to use separate plugins to implement these functionalities.<br \/>\nYou can also consider using themes that come with multiple features that replace the need of using multiple plugins.<\/p>\n<p>If there are small functionalities you need to implement on your site, rather than using a separate plugin for it, you can add hooks to your theme using plugins like <a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\/\" target=\"_blank\" rel=\"noopener\">Code Snippets<\/a>. In doing so, you\u2019ll be reducing the number of plugins from your site.<\/p>\n<h4>4. Disable plugins\/scripts on pages<\/h4>\n<p><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/Disable-plugin.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-4294\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/Disable-plugin-1024x692.png\" alt=\"Diable plugin script\" width=\"604\" height=\"408\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/Disable-plugin-1024x692.png 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/Disable-plugin-300x203.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/Disable-plugin-768x519.png 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/Disable-plugin.png 1140w\" sizes=\"(max-width: 604px) 100vw, 604px\" \/><\/a>If you have lots of plugins on your site and don\u2019t want to load certain plugins on certain pages of your site, you can use plugins like the free <a href=\"https:\/\/wordpress.org\/plugins\/plugin-organizer\/\" target=\"_blank\" rel=\"noopener\">Plugin Organizer<\/a> or <a href=\"https:\/\/perfmatters.io\/\" target=\"_blank\" rel=\"noopener\">PerfMatters<\/a>.<\/p>\n<p>These plugins allow you to prevent the unwanted plugin scripts to be loaded on the pages you select. For example, Perfmatters allows you to track down the scripts that are loading on your site and helps you selectively block those scripts on pages that satisfy your preset conditions.<\/p>\n<p>For example, if you are using a social sharing plugin that loads on every page of your site, you can use the above plugins to selectively block it on certain pages.<\/p>\n<p>Also, you need to consider adding retargeting and tracking scripts only to the landing pages that are crucial for your campaign and not on your entire site.<\/p>\n<h4>5. Not all caching plugins are equal<\/h4>\n<p><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/powerful-caching-plugin.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-4295\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/powerful-caching-plugin-1024x875.png\" alt=\"WP Rocket plugin\" width=\"604\" height=\"516\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/powerful-caching-plugin-1024x875.png 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/powerful-caching-plugin-300x256.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/powerful-caching-plugin-768x657.png 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/powerful-caching-plugin.png 1116w\" sizes=\"(max-width: 604px) 100vw, 604px\" \/><\/a>You are often advised to use website caching plugins. But you need to remember that not all the caching plugins are created equal.<\/p>\n<p>People only think of W3 Total Cache and WP Super Cache when discussing caching plugins. But there\u2019s more to it. According to <a href=\"https:\/\/bloggingwizard.com\/must-have-wordpress-plugins\/\" target=\"_blank\" rel=\"noopener\">this post<\/a> from Adam Connell, and if I take my experience into account, WP Rocket is the best plugin for caching.<\/p>\n<p>WP Rocket does more than caching, as it comes with great features like Google fonts optimization, minification of scripts, lazy loading, database optimization and dozens of others.<\/p>\n<p>If you are looking for a free plugin, I\u2019ve had great results with <a href=\"https:\/\/wordpress.org\/plugins\/wp-fastest-cache\/\" target=\"_blank\" rel=\"noopener\">WP Fastest Cache<\/a>. I\u2019ve used and tested almost all the free plugins for WordPress and this is by far the best; it also cuts down additional 2-3 seconds on page load compared to W3 Total Cache. This is how this plugin worked for me. You need to run your tests and determine which free plugin integrates and performs well with the tools that you are using.<\/p>\n<h4>6. Progressive web app or AMP<\/h4>\n<p><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/progressive-web-app.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-4296\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/progressive-web-app-1024x647.png\" alt=\"faster page load mobile\" width=\"604\" height=\"382\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/progressive-web-app-1024x647.png 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/progressive-web-app-300x190.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/progressive-web-app-768x485.png 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/progressive-web-app.png 1048w\" sizes=\"(max-width: 604px) 100vw, 604px\" \/><\/a>Ever since <a href=\"https:\/\/webmasters.googleblog.com\/2018\/03\/rolling-out-mobile-first-indexing.html\" target=\"_blank\" rel=\"noopener\">Google announced its mobile-first indexing<\/a>, the importance of faster page loads on mobile devices has increased.<\/p>\n<p>Google has two solutions when it comes to boosting mobile UX:<\/p>\n<p>&#8211; Accelerated Mobile Pages (AMP)<br \/>\n&#8211; Progressive web pages (PWP)<\/p>\n<p>Both have their own strengths and disadvantages.<\/p>\n<p>AMP enables lightning fast website load times using their cache. The majority of the news websites are using this technology to highlight their results in SERPs.<\/p>\n<p>However, you need to remember that AMP can easily strip off your website\u2019s branding and it could also interfere with payment gateways and popups if proper integration is not done.<\/p>\n<p>On the other hand, PWA is more suitable for sites like Amazon or Walmart, where they need to have interactive elements, animations, native payment modals, etc. The PWA makes your website feel like an app inside the user\u2019s mobile browser.<\/p>\n<p>If you want to get the best of both technologies, you can <a href=\"https:\/\/amp.dev\/documentation\/guides-and-tutorials\/learn\/combine-amp-pwa\" target=\"_blank\" rel=\"noopener\">use them together<\/a>. You get the page speed of AMP and the UX\/UI interface of PWA.<\/p>\n<h4>7. Lazy load images and videos<\/h4>\n<p><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/lazy-loading.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-4297\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2019\/04\/lazy-loading.png\" alt=\"Lazy load images\" width=\"940\" height=\"634\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/lazy-loading.png 940w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/lazy-loading-300x202.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2019\/04\/lazy-loading-768x518.png 768w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><\/a>Allowing the images and videos to be loaded only when the user comes to the viewport is very important. This increases the page speed of your website.<\/p>\n<p>For implementing this functionality, you can use features offered by Jetpack or <a href=\"https:\/\/wordpress.org\/plugins\/bj-lazy-load\/\" target=\"_blank\" rel=\"noopener\">BJ Lazy Load<\/a> plugin. If you are already using WP Rocket, there\u2019s a built-in option.<\/p>\n<p>You may also want to use lazy load for video functionalities. There are great plugins out there for accomplishing this.<\/p>\n<p>It\u2019s very important to compress and resize your images properly by using a good <a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noopener\">image compression plugin<\/a> before lazy loading them. If the images are in bulk, it may take forever for the images to load and there\u2019ll be a huge blank space at the time of the lazy loading. If you have more than 10 images on any blog post, make sure you enable lazy loading. If not, your page speed may suffer.<\/p>\n<h6>Wrapping up<\/h6>\n<p>Make use of tools like <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noopener\">GTMetrix<\/a> or <a href=\"https:\/\/www.pingdom.com\/\" target=\"_blank\" rel=\"noopener\">Pingdom<\/a> to check the page speed of your site.<\/p>\n<p>As with anything, it\u2019s important to figure out the top 20% factors that are contributing to the 80% slowness of your site. Most of the times, that top 20% factors are large images, poorly coded plugins, and scripts.<\/p>\n<p>I hope you found this post helpful.<\/p>\n<p><strong>Author&#8217;s bio:<\/strong> Akshay Hallur is the founder of <a href=\"https:\/\/bloggingx.com\/\" target=\"_blank\" rel=\"noopener\">BloggingX<\/a>. He teaches other business owners and individuals how to leverage the power of blogging and content marketing in order to grow their online companies.<\/p>\n<p><a href=\"https:\/\/www.rawpixel.com\/image\/71034\/motion-blur-skytrain-speeding-through-modern-business-district\" target=\"_blank\" rel=\"noopener\">Image 1<\/a> from rawpixel.com<br \/>\n<a href=\"https:\/\/www.freepik.com\/free-vector\/illustration-camera-photographs_3133335.htm\" target=\"_blank\" rel=\"noopener\">Image 2<\/a> from freepik.com<br \/>\n<a href=\"https:\/\/www.freepik.com\/free-vector\/lovely-hand-drawn-web-design-concept_3189922.htm#index=5\" target=\"_blank\" rel=\"noopener\">Image 3<\/a> from freepik.com<br \/>\n<a href=\"https:\/\/www.freepik.com\/free-vector\/two-hands-pluging_1140573.htm\" target=\"_blank\" rel=\"noopener\">Image 4<\/a> from freepik.com<br \/>\n<a href=\"https:\/\/www.freepik.com\/free-vector\/plug-design-background_1140556.htm\" target=\"_blank\" rel=\"noopener\">Image 5 <\/a>from freepik.com<br \/>\n<a href=\"https:\/\/www.freepik.com\/premium-vector\/yellow-rocket-space-rocket-launch-startup-concept_4128002.htm\" target=\"_blank\" rel=\"noopener\">Image 6<\/a> from freepik.com<br \/>\n<a href=\"https:\/\/www.freepik.com\/free-vector\/app-development-landing-page_4000682.htm\" target=\"_blank\" rel=\"noopener\">Image 7<\/a> from freepik.com<br \/>\n<a href=\"https:\/\/www.freepik.com\/free-vector\/lazy-cat-roof_4115852.htm\" target=\"_blank\" rel=\"noopener\">Image 8<\/a> from freepik.com<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019m sure that there are tons of blog posts where you can find information about boosting the page speed of your WordPress site. Just google \u201chow to boost WordPress page speed\u201d, and you&#8217;ll understand! But most of these articles only give you some generic and well-known tips, such as: &#8211; Use a caching plugin &#8211; [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4286","post","type-post","status-publish","format-standard","hentry","category-world-of-wordpress"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/4286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=4286"}],"version-history":[{"count":11,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/4286\/revisions"}],"predecessor-version":[{"id":4305,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/4286\/revisions\/4305"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=4286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=4286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=4286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}