In this guide, I\u2019ll walk you through the installation process of NitroPack and how you can use it to speed up your WordPress site.<\/p>\n\n\n\t\t\t\t
- 1. Check your website speed<\/a>
- 2. Install the NitroPack plugin<\/a>
- 3. Recheck WordPress site speed<\/a>
- 4. Choose the right website optimization mode<\/a>
- 5. Optimizing a heavy website<\/a>
- 6. Optimizing an e-commerce website<\/a>
- Final Thoughts<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n
1. Check your website speed<\/strong><\/h2>\n\n\n\n
Before fixing the site load speed, it is important to analyze the current metrics to determine how your website is currently performing. <\/p>\n\n\n\n
While there are many site performance checking tools to check site speed, I always prefer Google PageSpeed Insights<\/strong><\/a> for its user-friendliness and comprehensive view.<\/p>\n\n\n\n
To check your website\u2019s performance, visit the Google PageSpeed Insights tool -> enter your website\u2019s URL -> click \u2018Analyze.\u2019<\/p>\n\n\n\n
This will pull up the site speed metrics of your website. Here\u2019s how it looks for my website:<\/p>\n\n\n\n
![\"Google](\"https:\/\/ferdy.com\/wp-content\/uploads\/1_54_Failed.webp\")
<\/figure>\n\n\n\nOn the first fold of the screen, you\u2019ll see the Core Web Vitals Assessment metrics. While they are important for determining the user experience, it is important to note that they are measured over the last 28 days. <\/p>\n\n\n\n
![\"Google](\"https:\/\/ferdy.com\/wp-content\/uploads\/2_110_diagnose.webp\")
<\/figure>\n\n\n\nSince I am looking for quick improvements, I will focus on the metrics on the second fold, \u201cDiagnose performance issues.\u201d<\/p>\n\n\n\n
Here, you can toggle between Desktop and Mobile to check your site\u2019s scores across 4 categories:<\/p>\n\n\n\n
- \n
- Performance<\/li>\n\n\n\n
- Accessibility<\/li>\n\n\n\n
- Best Practices<\/li>\n\n\n\n
- SEO<\/li>\n<\/ul>\n\n\n\n
Diagnosing your site speed report<\/strong><\/h3>\n\n\n\n
Upon a quick assessment, I see two major issues I must fix immediately: First Contentful Paint (FCP) <\/strong>and Largest Contentful Paint (LCP).<\/strong><\/p>\n\n\n\n
For starters, FCP measures the time it takes for your website to display the first bit of content on your web pages. It\u2019s a great metric for site speed as it reflects how quickly your website displays data to visitors. <\/p>\n\n\n\n
![\"ideal](\"https:\/\/ferdy.com\/wp-content\/uploads\/3_203_ideal-range.webp\")
<\/figure>\n\n\n\nCurrently, my website averages around 3 seconds for FCP on mobile and 1.2 seconds on desktop. This is not great as the ideal FCP range, as seen in the image above, is within 1.8 seconds. That\u2019s the range we should be aiming for.<\/p>\n\n\n\n
Unlike FCP, LCP measures the time it takes your website to display the largest bit of content on your website. For most websites, this could be a heavy image, like a complex infographic. In my case, this could be the video tutorials I upload.<\/p>\n\n\n\n
![\"ideal](\"https:\/\/ferdy.com\/wp-content\/uploads\/4_242_ideal-range.webp\")
<\/figure>\n\n\n\nMy website averages around 6.5 seconds for LCP on mobile and 3.3 seconds on desktop; the ideal LCP range is within 2.5 seconds. Looks like I have got some serious work to do.<\/p>\n\n\n\n
Pro tip: <\/strong>Pay close attention to the Timelapse<\/strong> section as you scroll – it’s a key indicator of your website’s loading speed. A fully optimized site will display identical frames in the Timelapse, showcasing a smooth and consistent loading experience.<\/p>\n\n\n\n
2. Install the NitroPack plugin<\/strong><\/h2>\n\n\n\n
Now that I have diagnosed the problems, it\u2019s time to fix them.<\/p>\n\n\n\n
I\u2019m sure you\u2019ve heard of traditional site speed optimization methods like changing the hosting provider, removing inactive plugins, compressing images, etc. Most of these methods require manual input and can take several hours.<\/p>\n\n\n\n
Lucky for you, I found a WordPress plugin that automatically optimizes your website performance with a single click. It\u2019s called NitroPack<\/strong><\/a>. And guess what? You can get started for free!<\/p>\n\n\n\n
![\"install](\"https:\/\/ferdy.com\/wp-content\/uploads\/5_421_plugins.webp\")
<\/figure>\n\n\n\nTo install NitroPack on WordPress, log in to your WordPress dashboard. Go to Plugins -> Add New Plugin -> Search for NitroPack -> Click on \u201cInstall Now\u201d -> Activate.<\/p>\n\n\n\n
The next step is to connect your website with NitroPack to use it fully.<\/p>\n\n\n\n
![\"Configure](\"https:\/\/ferdy.com\/wp-content\/uploads\/6_432_Nitropack.webp\")
<\/figure>\n\n\n\nFind the NitroPack plugin in your \u201cPlugins\u201d tab on WordPress. Click \u201cSettings.\u201d<\/p>\n\n\n\n
![\"Connect](\"https:\/\/ferdy.com\/wp-content\/uploads\/7_434_CONNECT-TO-NITRO.webp\")
<\/figure>\n\n\n\nNext, click \u201cConnect to NitroPack\u201d and proceed by signing up.<\/p>\n\n\n\n
![\"Choose](\"https:\/\/ferdy.com\/wp-content\/uploads\/8_458_COMPLETE-PROCESS.webp\")
<\/figure>\n\n\n\nComplete the sign-up process by choosing a plan. The Free plan is perfect for those who want to test the waters.<\/p>\n\n\n\n
Note that the free plan lets you connect up to three websites to the plugin, with 1 GB<\/strong> of CDN bandwidth and up to 5,000<\/strong> page views\/mo.<\/p>\n\n\n\n
With that, your WordPress website is now connected to NitroPack. <\/p>\n\n\n\n
3. Recheck WordPress site speed<\/strong><\/h2>\n\n\n\n
Now, recheck your WordPress site performance using Google PageSpeed insights.<\/p>\n\n\n\n
I did, and just look at the results I got:<\/p>\n\n\n\n
![\"Google](\"https:\/\/ferdy.com\/wp-content\/uploads\/9_Diagnose.webp\")
<\/figure>\n\n\n\nDo you see the remarkable change? By just connecting a free version of the plugin, I significantly improved my website\u2019s performance.<\/p>\n\n\n\n
![\"Google](\"https:\/\/ferdy.com\/wp-content\/uploads\/10_Timelapse.webp\")
<\/figure>\n\n\n\nAnd if you see the Treemap timelapse, you will notice that every element on my page is loaded without a glitch. <\/p>\n\n\n\n
Similarly, on my web pages, everything is working optimally. The only difference is that it is loading faster, without any delays. <\/p>\n\n\n\n
Pro tip: <\/strong>If you notice any glitch in your website, go to NitroPack’s settings and toggle the \u2018Optimization Mode.\u2019 Click on \u2018Purge Cache\u2019 to update the settings. <\/p>\n\n\n\n
4. Choose the right website optimization mode<\/strong><\/h2>\n\n\n\n
The NitroPack WordPress plugin has various optimization modes you can select based on your website type. However, all WordPress websites are set to \u2018Ludicrous\u201d mode by default. <\/p>\n\n\n\n
Depending on your website, you can change the optimization mode between Standard, Strong, Medium, and Manual configurations. <\/p>\n\n\n\n
In my experience, the Strong optimization mode works great for sites with a lot of JavaScript. And if you have a website like mine – lightweight page builder, not a lot of JavaScript – you should stick to Ludicrous.<\/p>\n\n\n\n
For example, the \u2018Strong\u2019 optimization mode is ideal for heavy WordPress sites. While the \u2018Ludicrous\u2019 mode is better suited for lighter sites by focusing on delaying JavaScript and prioritizing HTML and CSS. <\/p>\n\n\n\n
You can choose the mode as per your website\u2019s requirements. However, test your site\u2019s performance after every change you make.<\/p>\n\n\n\n
While the NitroPack plugin kept my web pages functioning properly, I recommend frequently checking your website’s performance after installation to ensure it runs smoothly without any disruptions.<\/p>\n\n\n\n
![\"Change](\"https:\/\/ferdy.com\/wp-content\/uploads\/11_901_OPTIMIZATION-MODE.webp\")
<\/figure>\n\n\n\nAnd again, if you find something wrong, change the optimization mode > Purge Cache > Test website.<\/p>\n\n\n\n
5. Optimizing a heavy website<\/strong><\/h2>\n\n\n\n
The WordPress site I was playing around with earlier is working on the Gutenberg editor. And we all know that this is the lightest editor for WordPress sites. So, I thought, why not try the NitroPack plugin on heavier websites to see the results? <\/p>\n\n\n\n
I decided to use one of my heavier demonstration websites, divi5.com, for this experiment. <\/p>\n\n\n\n
First, I got rid of all the caching plugins on this website to make sure that the results would be purely attributable to NitroPack. This step was crucial to ensure no other optimization tools interfered with or skewed the test results. <\/p>\n\n\n\n
Initially, I tested its performance using Google PageSpeed Insights and the results were quite underwhelming:<\/p>\n\n\n\n
- \n
- Performance: <\/strong>39<\/li>\n\n\n\n
- Accessibility: <\/strong>70<\/li>\n\n\n\n
- Best Practices: <\/strong>100<\/li>\n\n\n\n
- SEO: <\/strong>91<\/li>\n\n\n\n
- First Contentful Paint (FCP):<\/strong> 3.2s<\/li>\n\n\n\n
- Largest Contentful Paint (LCP): <\/strong>7.9s<\/li>\n\n\n\n
- Speed Index:<\/strong> 5.9s<\/li>\n<\/ul>\n\n\n\n
Here\u2019s a snapshot of the report for reference:<\/p>\n\n\n\n
![\"ecommerce](\"https:\/\/ferdy.com\/wp-content\/uploads\/12_1048_doain-name-and-stats.webp\")
<\/figure>\n\n\n\nCurious to see the impact of optimization, I logged into the WordPress admin dashboard of divi5.com and installed the free version of the NitroPack plugin. <\/p>\n\n\n\n
After the installation, I ran the Google PageSpeed Insights test again. Just take a look at the striking difference in the results below:<\/p>\n\n\n\n
![\"\"](\"https:\/\/ferdy.com\/wp-content\/uploads\/13_1204.webp\")
<\/figure>\n\n\n\nWow! It seems like I only need to focus on my SEO strategies for this \u2018fast\u2019 WordPress site (haha!). <\/p>\n\n\n\n
Only the page\u2019s \u2018Treemap\u2019, which indicates the page view through screenshots, appears disoriented. However, that is probably because I am using animations (that take time to appear) in the initial layout of my page. <\/p>\n\n\n\n
Other than that, I am pleased with this website\u2019s performance. All thanks to NitroPack!<\/p>\n\n\n\n
6. Optimizing an e-commerce website<\/strong><\/h2>\n\n\n\n
The next website I selected (gameconsolez.com) is one of my eCommerce sites powered by WordPress and WooCommerce. Since this is an online store, it is loaded with images and lots of e-commerce functionality. <\/p>\n\n\n\n
I installed the NitroPack plugin on this website as well and ran the tests. The results were phenomenal, as always, with NitroPack. Look at the before and after comparison chart for this e-commerce website below. <\/p>\n\n\n\n
Speed Factors (Mobile)<\/strong><\/td> Site Performance Before Installing NitroPack<\/strong><\/td> Site Performance After Installing NitroPack<\/strong><\/td><\/tr> Performance<\/strong><\/td> 63<\/td> 90<\/td><\/tr> Accessibility<\/strong><\/td> 89<\/td> 100<\/td><\/tr> Best Practices<\/strong><\/td> 100<\/td> 100<\/td><\/tr> SEO<\/strong><\/td> 93<\/td> 93<\/td><\/tr> First Contentful Paint (FCP)<\/strong><\/td> 4.0s<\/td> 1.2s<\/td><\/tr> Largest Contentful Paint (LCP)<\/strong><\/td> 8.7s<\/td> 2.4s<\/td><\/tr> Speed Index<\/strong><\/td> 5.5s<\/td> 3.0s<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n Isn\u2019t it amazing?<\/p>\n\n\n\n
For your reference, I\u2019m attaching the screenshots of the before and after Google PageSpeed Insights reports below.<\/p>\n\n\n\n
Before installing NitroPack<\/strong><\/p>\n\n\n\n
![\"Google](\"https:\/\/ferdy.com\/wp-content\/uploads\/14_1446.webp\")
<\/figure>\n\n\n\nAfter installing NitroPack<\/strong><\/p>\n\n\n\n
![\"Google](\"https:\/\/ferdy.com\/wp-content\/uploads\/15_1506.webp\")
<\/figure>\n\n\n\nThe experiment on different WordPress websites indicates that the NitroPack plugin works on every type of website. Whether you have a general blog, a heavy image-based eCommerce page, or a JavaScript-loaded webpage – the NitroPack plugin doesn\u2019t disappoint. <\/p>\n\n\n\n
- Accessibility: <\/strong>70<\/li>\n\n\n\n
- Performance: <\/strong>39<\/li>\n\n\n\n
- 2. Install the NitroPack plugin<\/a>