How to Fix Render-Blocking CSS and Optimize OpenCart Images with NitroPack
The latest versions of NitroPack have been heavily focused on stability improvements and fixing these 2 issues, which used to be hardest to deal with when optimizing for page speed. In this post, we will talk about what improvements we made in order to combat these problems and how to make the most of the new features in NitroPack.
Please mind that the post will be targeting users running NitroPack 2.5.0 and 1.8.0 and later, so if you are running an older version you might want to consider upgrading.
Render-blocking CSS
Before we try to fix this, let’s first explain why it’s happening and what it means.
The Process
When you request a web page, the browser has to do many things before it can display the page on your screen. In general, it has to do the following:
-
Download and parse the HTML for the page
-
Find and download any additional resources like images, JavaScript or CSS files, fonts, etc.
-
Parse the additional resources
-
Render the visual representation of the page on the screen
External CSS Files
Note that the order of these actions may differ for the different browsers, but the process is more or less similar
When browsers download the HTML and parse it, they can start displaying the site on your screen right away. However, when there are CSS files, the browsers need to pause the rendering, download the additional files, and restart the rendering process after they have been downloaded and parsed.
This is because the CSS files change the way a page looks. And this is the reason why the CSS files are marked as render-blocking.
External JavaScript Files
The same goes for the external JavaScript files. Since a JavaScript may alter the way a page looks, the browsers need to block the page rendering while downloading external JavaScript files, execute them when they are finished downloading and only then continue the page rendering.
We have had solutions to these problems in NitroPack for a long time already. For JavaScript, you can move the scripts to the bottom of the page and make them deferred. This will solve the issue.
CSS settings are rather similar, you just move the CSS to the bottom of the page. However, this actually creates small JavaScript snippets which load the CSS files after the page has been initially loaded.
Effectively, the CSS files are no-longer render blocking, but there is a small issue - the page is initially loaded without any styles, so it looks like a plain article, with no styles, only text is visible.
A few moments later (in most cases less than a second) the page is re-rendered with the styling rules included and looks back normal again. No one likes blank pages, which is why we aimed to fix this with the new functionality in NitroPack.
The Solution:
Here is how things work now. NitroPack tries to extract the base CSS rules needed to display the above the fold part of the web pages, and serves these CSS rules directly with the HTML of the site. So the site renders nicely even with the HTML present only. The pages no longer load like basic articles and the CSS files are no longer render-blocking. Win!
How to make use of the new functionality?
Using this new functionality is pretty simple, so let’s see an example. First go to the Minification tab in NitroPack’s control panel. Look for the Extract base CSS option on the right.
Click on the Create base CSS cache button and the process will start. Bear in mind that this may take some time, so sit back and relax until it is finished. Then go ahead and clear NitroPack’s cache.
Note: The base CSS cache is separated from the main cache, so when you clear NitroPack’s cache it will not be deleted. This means that once created there is no need to repeat the process unless you change the design of your site.
What about the images?
If you have a responsive theme, you may have stumbled upon an issue, where your images are optimized, yet Google Pagespeed reports them as not optimized. This is usually because the images are served in a high resolution, but displayed in smaller containers. Let’s look at an example:
Notice how the natural resolution of the image is larger than the one that it is displayed in.
This means that the client (the browser) will have to download more information than it needs. In this case this is information for 40,000 pixels (200 x 200) instead of 34,969 pixels (187 x 187).
This may not seem like a big difference, but usually images often go about something like 400 x 400, 500 x 600 pixels or even bigger, which makes a difference over a dozen images. Note that a 400 x 400 image is 4 times bigger than 200 x 200. This means that by setting the correct resolution, you can send 4 images to the client instead of 1.
To solve this, we need to override the image resolution from 200 x 200 to 187 x 187 to stop transferring of unneeded information for this image.
Before we do that, we would like to show you how to obtain the current dimensions versus the ones we need. We are using Google Chrome for this purpose, but this should work almost identically on any other major browser.
How to Obtain Natural Image Dimensions versus Image Displayed Dimensions
So let’s assume that Google Pagespeed is reporting that the image http://localhost/oc2302/image/cache/catalog/demo/iphone_1-200x200.jpg is not optimized. We need to check what is the natural image resolution versus what resolution it’s displayed into. To do so, open the page that you tested, right-click anywhere on the page and select Inspect. Here is how the process looks like:
This will open a helper window called Developer tools.
Hit Cmd+F for Mac or Ctrl+F for Windows or Linux in order to initiate a search. Paste the image link and hit enter. This should focus you on the image in the developer tools.
Click the cancel button next to the search box in order to get out of the search mode. Next hover over the image link and you should get a small tooltip with a tiny image preview accompanied by the image dimensions.
Note: While the developer tools are open you can simulate mobile and tablet devices as well. This will allow you to check the resolutions for these template versions as well. To do so, simply click the mobile toggle button.
After you click the mobile toggle button (pointed by the arrow on the top left corner) , a new menu will appear allowing you to select the device you would like to simulate. It will look similar to this:
Tip: When you select the desired device, do not forget to refresh the page before searching for the image that needs to be optimized. This happens by clicking on Refresh /CMD + R on a Mac or Ctrl + R on Windows and Linux.
OK, now that we know that the desktop version of our image is naturally 200 x 200 and we want to make it 187 x 187, we can go back in NitroPack’s control panel. Navigate to Cache Systems > Image cache and scroll until you see the Image Dimensions Override section.
You can see that it’s divided into 3 sections: Home page, Category pages and Product pages. These are the page types that can have image dimension overrides. Notice that each of these page types have 3 tabs: Desktop, Tablet and Mobile. This is because we can set different image dimensions for each of the three page modes.
We now need to get a list of the different image dimensions on the home page remember the image we want to optimize is on the home page).
Click on the green Scan dimensions button in the Home page section. This may take a little while.
After the dimensions are detected a table similar to this should appear:
The fields on the left of the arrows are the original image dimension, the fields on the right (squared in red) are editable and are the ones you use to define the desired dimensions.
In our case we have the images with 200 x 200 converted to 187 x 187.
Hit the Save Changes button in the upper right corner and refresh the home page. The target image resolution is now 187 x 187, just as we wanted.
Final words
We hope you find these new features useful and easy to use. We think they are a game changer in the field of website optimization and adding them to the already impressive set of options in NitroPack solidifies it as the most powerful speed optimization plugin out there. Feel free to use the comment section below if you feel the need to say or ask us anything.
