Image result for website loading gif

There you are with your WooCommerce site setup, it looks the way you want, you’ve got all the great features and layout together, you are ready to launch your big new beautiful site, you’re anticipating all of those orders coming in, all that revenue for you & your family, and then you notice one little problem that is going to delay orders, irritate customers, and cause conversions to plummet through the floor.

What is that problem that your customers noticed?

….the speed.

So, your website needs some help in the speed department?

Image result for quick typing gif

Let’s be honest: after who-knows-how-many page builders, server configurations, plugins, and theme options are added into a WooCommerce Store, sometimes your site will get bogged down.
You can consistently switch hosting, disable / enable plugins, and attempt who-knows-how-many other tweaks, taking up hundreds of hours of your time. But you would rather be running a business – not messing with a website, right?

๐Ÿ’ก Cheap hosting can be substantially sped up by using NitroPack‘s service to speed up your website!

So, if you have made the commitment to a poor performing webhost, but you might be a bit reluctant to migrate your site, then that’s where NitroPack‘s services will come in to your rescue!

A really simple & easy 1st step is to run over to the NitroPack.io homepage and test your site real quick:

(click or tap the image below and go test out your website)

Now that you are looking at your website’s speed results, pop into the top right corner of that page and go ahead & create a free ๐Ÿ‘ account over on the NitroPack website:

Next, you’re going to want to add your website into their platform so that they can connect to all of your site’s theme and plugin’s files. It’s straight forward simple, only takes a few seconds, and super easy.

Your next step is to click on the option within your NitroPack dashboard that says, “Connect Your Website” as highlighted in the big red box below. We’ll look at what this does in the next screenshot. But be sure you don’t skip this part as it is critical for speeding up your particular website’s setup.

Next, you’ll be prompted with a new screen in your NitroPack dashboard prompting you with the text of, “Download a Connector”. Click the big blue button which is prompting you to, “Browse Downloads” as highlighted in red.

Now, on the next screen, you’ll really get to see a glimpse at how powerful NitroPack’s versatile options are. They have provide an option for almost every scenario imaginable:

  • a native PHP built site,
  • a raw API (complete with documentation),
  • NitroPack for OpenCart,
  • the option for WordPress (not running WooCommerce),
  • ๐Ÿ‘‰And then, the best: NITROPACK FOR WOOCOMMERCE!๐Ÿ‘ˆ

….which leads to their plugin page over on WordPress.org

So, in YOUR Admin area over in your own site’s plugin area, you’ll simply type in the words NitroPack (no spaces) and look for this plugin with the NitroPack logo, the green speedometer, and the black & gray background:

Click “Install Now” & “Activate” real quick so that we can get onto the fun part.
Over to NitroPack’s settings in your WooCommerce site! This is what it will look like at first. Kinda blank right? We’ll get those two fields in the next screenshot.

(Sorry, for the notification. I was simultaneously setting up Facebook for WooCommerce at the same time. Normally, you wouldn’t see that notification)

To fill those two blanks in, let’s head back over in the NitroPack site real quick. We will find our ID & Secret Key right here where it says, “Connect Your Website”. Once we copy & paste those two into the screenshot above, we’ll get a nice big green notification showing us, “Your site is connected!Wahoo! ๐Ÿคœ๐Ÿ’ฅ๐Ÿค›

Let’s take a second and look at the dashboard that will now appear in your admin area of your site:

Stop ๐Ÿ›‘Stopโœ‹Stop๐ŸคšRight here & LOOK ๐Ÿ‘€in the BOTTOM RIGHT of your NitroPack screenโ—
If you EVER get in a bind, tap that chat button and ASK their team ANYTHINGโ—

Optimized Pages / Plan / Configuration / Settings :
Top Left: Optimized Pages is the first box you’ll probably see. You might get a bit of a frown because it will show that you don’t have any Optimized Pages at first. But that’s ok at first.

Top Right: Your Plan Box is pretty obvious. It’s simply reminding you what you have chosen as your options for NitroPack to speed up your WooCommerce site. Yes, there is a free option, but you’ll probably want to go for the simple $19 paid option! Well, those of us who want to beat out the competition will want the paid version! ๐Ÿ˜

Bottom Right: The Settings Box is straight forward and simple with only two options which you will probably want toggled ‘ON’ and then the red button to ‘Disconnect’ your site from NitroPack’s Speed Services.

Bottom Left: NitroPack empowers site owners with 5 options for the Configuration Box. And they define these 5 options with the following definitions for each option:

  • Standard: A pre-defined configuration without much regard for a high score. Enough to get you up and running.
  • Medium: Well-balanced and suitable for most cases.
  • Strong: Includes advanced features like automatic image lazy loading and font definition modification. May cause issues in some cases.
  • Ludicrous: A pre-defined configuration aiming to achieve the highest possible score. In some cases, it may cause issues with your site.
  • Manual: Use your own settings. Check Advanced Settings tab below to configure them.

Inside of your dashboard on NitroPack, you’ll see these tabs:

Note that the “Advanced settings” tab will not appear if you have selected Standard, Medium, Strong, or Ludicrous. The tab labelled “Advanced settings” is ONLY going to show up once you have selected the configuration option of “Manual“๐Ÿ‘

Let’s go over the “Advanced Settings” tab so that we can understand what each of these option do and how these selections will keep your site loading fast for happy page views ๐Ÿ˜€:

Minify resources
Enable or disable minification of JavaScript, CSS and HTML resources

This option takes all of your files and removes all the spaces and line breaks in those files making your sites files incredibly smaller than they were originally when all the white space was in them.

Image optimization
Enable or disable image optimization for size and delivery

We all know that WordPress sets images at a quality of 80 by default. However, if your images are simply not noticeably different at lower quality, then it is highly advised to reduce the image quality to balance between speed and visual display.

Automatic image lazy loading
Load images only when they become visible. This reduce the initial weight of the pages.

This is a bit like the childhood game of peek-a-boo.
Lazy load basically says, “Only load something when the item is view-able by the visitor’s browser.

Optimize CSS Delivery
Create critical CSS as well as rework your website CSS for optimal delivery

Optimize CSS Delivery will be your best friend if you use it correctly. Once turned on, it might cause a brief momentary flash of unstyled text, however, this option will load the CSS files substantially faster.

Combine CSS into one resource
Use a single file for all CSS rules grouped by media type.

This option in NitroPack does just what it says. It will search out all the .css files which compose something like the .body-content, or the .sidebar-widget area & then combine those files into ONE file. Once that file is created, it will deliver that ONE COMBINED file instead of several smaller files from the server to the end user’s screen.

Override font rendering behavior
Use this option to set a desired value for the CSS font-display rule

There are several options which defines browser’s behavior when rendering fonts. It’s best to leave this option set to “auto” and allow the NitroPack plugin to render the best font-display rule for your site. Simple, right?

Combine JS into one resource
Use a single file for all JavaScript code reducing the number of network requests & making rendering more efficient

Most javascript can be combined into one file & not affect the ways it functions.

Remove render-blocking resources
Rework and reposition blocking resource files in the above-the-fold portion of your page

Enabling this option will allow NitroPack to determine which file’s deliver your website in which particular order. You’ll probably want the first two options set to ‘Enabled’ and the last one (the strategy) set to ‘Styles First’. This will help NitroPack load the site’s files in the best order.

And there we have it! All of NitroPack’s settings that every WooCommerce
Store owner needs to speed up their website’s load time!

The advantages of off-loading this to a 3rd party instead of doing it yourself is a tremendous time saver. โณ

And, at the end of your day, you can NEVER replace the time that you have spent trying to speed up a site with some quirky plugin & get all the settings right yourself. That time is now gone – forever.

So if you, like so many other WooCommerce Store Owners, want a fast loading website, then do what we’ve done.

Head over to NitroPack’s homepage and enter in YOUR site to see what NitroPack can do for YOU!

Your Voice Matters! Share Your Thoughts!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.