Search
Search titles only
By:
Search titles only
By:
Home
Shop
Forums
New posts
Search forums
What's new
New posts
New resources
New profile posts
Latest activity
Resources
Latest reviews
Search resources
Members
Current visitors
New profile posts
Search profile posts
Log in
Register
Search
Search titles only
By:
Search titles only
By:
Menu
Install the app
Install
Reply to thread
Home
Forums
Community
General Discussion
How to Improve Page Loading Speed on WordPress
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Message
<blockquote data-quote="cielopearly" data-source="post: 286" data-attributes="member: 4"><p>I know each theme is built differently and we need to adjust to each situation properly but, that doesn´t mean we can lay out the top, most critical, and important factors that affect page loading speed and how to address them.</p><h3><strong>HOSTING</strong></h3><p>I am going to risk sounding annoying and repetitive by saying this but, this is perhaps one of the most undervalued factors when trying to optimized a site´s page loading speed.</p><p></p><p>Getting your site hosted on a robust and fast server can make a whole lot of difference between having a fast loading site or a slow one.</p><p></p><p></p><p>Well, it highly depends on your needs and budget but, these are my top choices...</p><ul> <li data-xf-list-type="ul"><a href="https://closte.com/" target="_blank">Closte</a></li> <li data-xf-list-type="ul"><a href="https://kinsta.com/" target="_blank">Kinsta</a></li> <li data-xf-list-type="ul"><a href="https://www.cloudways.com/en/" target="_blank">Cloudways</a></li> <li data-xf-list-type="ul"><a href="https://wpengine.com/" target="_blank">WPEngine</a></li> <li data-xf-list-type="ul"><a href="https://wpx.net/" target="_blank">WPX Hosting</a></li> <li data-xf-list-type="ul"><a href="https://www.digitalocean.com/" target="_blank">DigitalOcean</a></li> </ul><p><strong>DISCLAIMER: THESE ARE NOT AFFILIATE LINKS</strong></p><p></p><p>As a side note, regardless of what hosting provider you end up choosing, I will advise you to stay away from any hosting company that is part of the Endurance International Group (EIG).</p><p></p><p>These companies are known for their bad performance, customer support, and reliability.</p><p></p><p>I am NOT saying this would be the case with YOU in particular, as I´ve heard good reviews from people hosting with them but, in the brutal majority of cases, this won´t be the case.</p><p></p><p>The main reason why you heard them a lot is that many marketers are actively promoting them due to their very lucrative affiliate programs.</p><p></p><p>Some of the hosting providers that are part of EIG are...</p><ul> <li data-xf-list-type="ul">Bluehost</li> <li data-xf-list-type="ul">DomainHost</li> <li data-xf-list-type="ul">eHost</li> <li data-xf-list-type="ul">FatCow</li> <li data-xf-list-type="ul">HostGator</li> <li data-xf-list-type="ul">iPage</li> <li data-xf-list-type="ul">PureHost</li> <li data-xf-list-type="ul">SEO Hosting</li> </ul><p>Here´s a very complete list for you to browse...</p><h3><a href="https://en.wikipedia.org/wiki/Endurance_International_Group" target="_blank">Endurance International Group - Wikipedia</a></h3><p></p><p><img src="https://en.wikipedia.org/static/apple-touch/wikipedia.png" alt="en.wikipedia.org" class="fr-fic fr-dii fr-draggable " style="" /> en.wikipedia.org</p><h3><strong>CONTENT DELIVERY NETWORK (CDN)</strong></h3><p>Setting up a Content Delivery Network (CDN) service nowadays is becoming mandatory. Unless your hosting provider´s servers are located in the same geo or region as your target audience. In this case, there´s no need for a CDN but, still, you can always try and test for yourself.</p><p></p><p>On this note, <a href="https://www.cloudflare.com/" target="_blank">Cloudflare</a> offers a free plan that is more than enough in most cases and, If not and you have a little budget for this, I highly recommend <a href="https://bunny.net/" target="_blank">BunnyCDN</a> or Amazon <a href="https://aws.amazon.com/cloudfront/" target="_blank">Cloudfront</a>.</p><p></p><p>Amazon CloudFront is quickly gaining ground as one of the best CDN providers on the market. Nor just regarding overall performance but, also, regarding its cost.</p><p></p><p>On this front, it has a very similar pricing structure as BunnyCDN and that is "pay-as-you-go". So, you will only be billed for the data transferred you end up using instead of a monthly flat rate.</p><p></p><p>And, right now, they are offering the first 50 GB of data transferred FREE OF CHARGE!</p><p></p><p>From that point on, the prices look really affordable...</p><p><img src="https://i.gyazo.com/493988bd02f18909364522ba3a3964aa.png" alt="493988bd02f18909364522ba3a3964aa.png" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>So, regardless of whether or not you have the budget for this, don´t take it as an excuse to NOT set up a CDN. As stated above, Cloudflare offers a free plan and it´s robust enough to further improve your site´s page loading speed.</p><p></p><p>If you have never used Cloudflare before, there are plenty of tutorials out there on the internet but, here´s one of my favorites...</p><p></p><p></p><h3><strong>THEME</strong></h3><p>Using a lightweight and fast loading theme in order to get the best possible loading times kind of sounds obvious, right?</p><p></p><p>But, you´ll be surprised to know how many people out there choose to use overbloated and featured rich themes not considering the impact it will have on the site´s performance nor in the nightmare, this will become when trying to optimize it.</p><p></p><p>So, if you´re launching a simple blog, a local service website, or a landing page, there´s no reason to pick a multi-purpose theme.</p><p></p><p>Sure, they are great as an all-in-one solution but that usually comes with a price and its performance.</p><p></p><p>Having said that, my recommendation is to pick a lightweight and fast loading site and customize it however you want. Take the time to learn how to work on the design. There are literally hundreds, if not, thousands of tutorials on YouTube that will guide you step-by-step on how to build a beautiful, fully functional, and optimized website from scratch.</p><p></p><p>Trust me, in the long run, this is the best approach.</p><p></p><p>My top recommendations for the best lightweight and fast loading theme with all the customization capabilities and functionalities you´ll need to build pretty much any site you want are these...</p><ul> <li data-xf-list-type="ul">GeneratePress - Now more than ever I believe this is the best WP theme on the market</li> <li data-xf-list-type="ul">Astra</li> <li data-xf-list-type="ul">Neve</li> <li data-xf-list-type="ul">Blocksy</li> <li data-xf-list-type="ul">Kadence</li> <li data-xf-list-type="ul">OceanWP</li> </ul><h3>PAGE BUILDERS</h3><p>Avoid page builders!!</p><p></p><p>I know they make the building and designing process a hell lot easier for non-web developers like ourselves but, their usage also comes with a very expensive price. And, if on top of everything else, you´re using a crappy hosting provider with an overbloated and slow loading theme, that price will be very expensive.</p><p></p><p>I highly recommend you take the time to learn how to properly use <a href="https://oxygenbuilder.com/" target="_blank">Oxygen Builder</a>. I know this might sound contradictory but, trust me, it´s not.</p><h3><strong>PLUGINS</strong></h3><p>Avoid overbloated or high CPU usage plugins!!!</p><p></p><p>People often get carried away by functionalities and features and don´t take the time to evaluate the impact certain plugins have on performance or whether or not they can replace that plugin with a much lighter alternative. Clear examples of this are Contact Form 7 and RevSlider. Take a look at this <a href="https://onlinemediamasters.com/slow-wordpress-plugins/" target="_blank">list of plugins you need to avoid</a>.</p><p></p><p>Keep plugins to a minimum, unless you know what you´re doing.</p><p></p><p>More often than not, it really isn´t worth sacrificing performance to add functionality.</p><h3>IMAGES</h3><p>My personal process for image optimization is...</p><p></p><p>a) Compress</p><p>b) Convert them to Webp or SVG format</p><p>c) Resize them properly (take into account image mobile devices image containers)</p><p>d) Lazy load them (only the ones below the fold)</p><p>e) Make sure to add the width and height to the HTML (it will help with CLS)</p><p>f) Serve them from a CDN.</p><p></p><p>My go-to image optimization plugin is <a href="https://wordpress.org/plugins/shortpixel-image-optimiser/" target="_blank">ShortPixel</a> but, this doesn´t mean you MUST use this one. There are other options out there so, make sure to run tests and stay with the one you get the best results.</p><h3>CSS AND JAVASCRIPT</h3><p>This is another pretty common issue I see on WordPress sites. Especially those who are build through a pagebuilder or abused the usage of poorly coded and overbloated plugins.</p><p></p><p>Regarding CSS, we can generate the Critical Path CSS (CPCSS) and defer the rest for the footer.</p><p></p><p>Thankfully, we can use WP Rocket for this or, if you want a free alternative, you have Asset Cleanup and/or Autoptimize to unload these unnecessary resources from even loading in the first place. These two plugins work great together.</p><p></p><p></p><p><img src="https://pegasaas.com/wp-content/uploads/2018/07/pegasaas-critical-path-css-generator-fb.png" alt="pegasaas.com" class="fr-fic fr-dii fr-draggable " style="" /></p><h3></h3><h3><strong>EXTERNAL SCRIPTS</strong></h3><p>We tend to load a lot of external scripts to our site like Google Fonts, Font Awesome, Tracking codes, Chat widgets (Facebook for example), etc., and this is something that slows sites down a lot.</p><p></p><p></p><h3>FONTS & ICONS</h3><p></p><p>It´s unbelievable how many people load these resources from external sources where they can just host them locally and avoid those DNS lookups and improve their site´s performance.</p><h3>MEDIA</h3><p>The best thing we can do with these resources is to host them externally (YouTube, Vimeo, etc) and just embed them on our site. When doing this, I highly recommend <a href="https://wordpress.org/plugins/youtube-embed-plus/" target="_blank">enabling a placeholder for the video thumbnail</a> and <a href="https://github.com/verlok/vanilla-lazyload" target="_blank">lazy load the image</a>. This will greatly reduce the load impact of these resources.</p></blockquote><p></p>
[QUOTE="cielopearly, post: 286, member: 4"] I know each theme is built differently and we need to adjust to each situation properly but, that doesn´t mean we can lay out the top, most critical, and important factors that affect page loading speed and how to address them. [HEADING=2][B]HOSTING[/B][/HEADING] I am going to risk sounding annoying and repetitive by saying this but, this is perhaps one of the most undervalued factors when trying to optimized a site´s page loading speed. Getting your site hosted on a robust and fast server can make a whole lot of difference between having a fast loading site or a slow one. Well, it highly depends on your needs and budget but, these are my top choices... [LIST] [*][URL='https://closte.com/']Closte[/URL] [*][URL='https://kinsta.com/']Kinsta[/URL] [*][URL='https://www.cloudways.com/en/']Cloudways[/URL] [*][URL='https://wpengine.com/']WPEngine[/URL] [*][URL='https://wpx.net/']WPX Hosting[/URL] [*][URL='https://www.digitalocean.com/']DigitalOcean[/URL] [/LIST] [B]DISCLAIMER: THESE ARE NOT AFFILIATE LINKS[/B] As a side note, regardless of what hosting provider you end up choosing, I will advise you to stay away from any hosting company that is part of the Endurance International Group (EIG). These companies are known for their bad performance, customer support, and reliability. I am NOT saying this would be the case with YOU in particular, as I´ve heard good reviews from people hosting with them but, in the brutal majority of cases, this won´t be the case. The main reason why you heard them a lot is that many marketers are actively promoting them due to their very lucrative affiliate programs. Some of the hosting providers that are part of EIG are... [LIST] [*]Bluehost [*]DomainHost [*]eHost [*]FatCow [*]HostGator [*]iPage [*]PureHost [*]SEO Hosting [/LIST] Here´s a very complete list for you to browse... [HEADING=2][URL='https://en.wikipedia.org/wiki/Endurance_International_Group']Endurance International Group - Wikipedia[/URL][/HEADING] [IMG alt="en.wikipedia.org"]https://en.wikipedia.org/static/apple-touch/wikipedia.png[/IMG] en.wikipedia.org [HEADING=2][B]CONTENT DELIVERY NETWORK (CDN)[/B][/HEADING] Setting up a Content Delivery Network (CDN) service nowadays is becoming mandatory. Unless your hosting provider´s servers are located in the same geo or region as your target audience. In this case, there´s no need for a CDN but, still, you can always try and test for yourself. On this note, [URL='https://www.cloudflare.com/']Cloudflare[/URL] offers a free plan that is more than enough in most cases and, If not and you have a little budget for this, I highly recommend [URL='https://bunny.net/']BunnyCDN[/URL] or Amazon [URL='https://aws.amazon.com/cloudfront/']Cloudfront[/URL]. Amazon CloudFront is quickly gaining ground as one of the best CDN providers on the market. Nor just regarding overall performance but, also, regarding its cost. On this front, it has a very similar pricing structure as BunnyCDN and that is "pay-as-you-go". So, you will only be billed for the data transferred you end up using instead of a monthly flat rate. And, right now, they are offering the first 50 GB of data transferred FREE OF CHARGE! From that point on, the prices look really affordable... [IMG alt="493988bd02f18909364522ba3a3964aa.png"]https://i.gyazo.com/493988bd02f18909364522ba3a3964aa.png[/IMG] So, regardless of whether or not you have the budget for this, don´t take it as an excuse to NOT set up a CDN. As stated above, Cloudflare offers a free plan and it´s robust enough to further improve your site´s page loading speed. If you have never used Cloudflare before, there are plenty of tutorials out there on the internet but, here´s one of my favorites... [HEADING=2][B]THEME[/B][/HEADING] Using a lightweight and fast loading theme in order to get the best possible loading times kind of sounds obvious, right? But, you´ll be surprised to know how many people out there choose to use overbloated and featured rich themes not considering the impact it will have on the site´s performance nor in the nightmare, this will become when trying to optimize it. So, if you´re launching a simple blog, a local service website, or a landing page, there´s no reason to pick a multi-purpose theme. Sure, they are great as an all-in-one solution but that usually comes with a price and its performance. Having said that, my recommendation is to pick a lightweight and fast loading site and customize it however you want. Take the time to learn how to work on the design. There are literally hundreds, if not, thousands of tutorials on YouTube that will guide you step-by-step on how to build a beautiful, fully functional, and optimized website from scratch. Trust me, in the long run, this is the best approach. My top recommendations for the best lightweight and fast loading theme with all the customization capabilities and functionalities you´ll need to build pretty much any site you want are these... [LIST] [*]GeneratePress - Now more than ever I believe this is the best WP theme on the market [*]Astra [*]Neve [*]Blocksy [*]Kadence [*]OceanWP [/LIST] [HEADING=2]PAGE BUILDERS[/HEADING] Avoid page builders!! I know they make the building and designing process a hell lot easier for non-web developers like ourselves but, their usage also comes with a very expensive price. And, if on top of everything else, you´re using a crappy hosting provider with an overbloated and slow loading theme, that price will be very expensive. I highly recommend you take the time to learn how to properly use [URL='https://oxygenbuilder.com/']Oxygen Builder[/URL]. I know this might sound contradictory but, trust me, it´s not. [HEADING=2][B]PLUGINS[/B][/HEADING] Avoid overbloated or high CPU usage plugins!!! People often get carried away by functionalities and features and don´t take the time to evaluate the impact certain plugins have on performance or whether or not they can replace that plugin with a much lighter alternative. Clear examples of this are Contact Form 7 and RevSlider. Take a look at this [URL='https://onlinemediamasters.com/slow-wordpress-plugins/']list of plugins you need to avoid[/URL]. Keep plugins to a minimum, unless you know what you´re doing. More often than not, it really isn´t worth sacrificing performance to add functionality. [HEADING=2]IMAGES[/HEADING] My personal process for image optimization is... a) Compress b) Convert them to Webp or SVG format c) Resize them properly (take into account image mobile devices image containers) d) Lazy load them (only the ones below the fold) e) Make sure to add the width and height to the HTML (it will help with CLS) f) Serve them from a CDN. My go-to image optimization plugin is [URL='https://wordpress.org/plugins/shortpixel-image-optimiser/']ShortPixel[/URL] but, this doesn´t mean you MUST use this one. There are other options out there so, make sure to run tests and stay with the one you get the best results. [HEADING=2]CSS AND JAVASCRIPT[/HEADING] This is another pretty common issue I see on WordPress sites. Especially those who are build through a pagebuilder or abused the usage of poorly coded and overbloated plugins. Regarding CSS, we can generate the Critical Path CSS (CPCSS) and defer the rest for the footer. Thankfully, we can use WP Rocket for this or, if you want a free alternative, you have Asset Cleanup and/or Autoptimize to unload these unnecessary resources from even loading in the first place. These two plugins work great together. [IMG alt="pegasaas.com"]https://pegasaas.com/wp-content/uploads/2018/07/pegasaas-critical-path-css-generator-fb.png[/IMG] [HEADING=2][/HEADING] [HEADING=2][B]EXTERNAL SCRIPTS[/B][/HEADING] We tend to load a lot of external scripts to our site like Google Fonts, Font Awesome, Tracking codes, Chat widgets (Facebook for example), etc., and this is something that slows sites down a lot. [HEADING=2]FONTS & ICONS[/HEADING] It´s unbelievable how many people load these resources from external sources where they can just host them locally and avoid those DNS lookups and improve their site´s performance. [HEADING=2]MEDIA[/HEADING] The best thing we can do with these resources is to host them externally (YouTube, Vimeo, etc) and just embed them on our site. When doing this, I highly recommend [URL='https://wordpress.org/plugins/youtube-embed-plus/']enabling a placeholder for the video thumbnail[/URL] and [URL='https://github.com/verlok/vanilla-lazyload']lazy load the image[/URL]. This will greatly reduce the load impact of these resources. [/QUOTE]
Verification
Post reply
Home
Forums
Community
General Discussion
How to Improve Page Loading Speed on WordPress
Top
Bottom