Conquering Magento GooglePagespeed Scores – Part 2
Having tackled all of the performance issues you can without making major code changes (See Previous Article), its now time to get “into the weeds” a bit with Magento and resolve some of the other issues that PageSpeed is reporting.
The two biggest challenges of significantly boosting your Mobile and Desktop scores in Magento are deferring content (css/js) and above the fold rendering.
These are both large challenges in Magento 1 (and Magento 2 themes we’ve tested), because there are no native ways of resolving both issues without modifying the entire loading structure of themes.
Resolving Critical CSS – Rendering Above the Fold Content Tips
The first part issue is resolving the rendering content above the fold. There are TONS of instructions out there on how to do it, but since every website is different, there is no single way to achieve it. Here are some of our tips we have used to get 90+ scores in Pagespeed in Magento.
- You need to figure out your MOST comment page structures in Magento. Typically these are: CMS Pages, Category Listing Pages, HomePage, Product View Page.
- For each page type, you need to gather all of the CSS for each page sample (use large pages).
- Once you have the full CSS used for each page type, you need to determine the bare MINIMUM CSS (Called the “Critical CSS”) used to render most of those pages. There quite a few tools that provide this already and lend themselves to a fully automated solution like we have built. (grunt-penthouse,etc) There are a few online solutions, but they won’t help for a fully automated solution. To save some processing time, its usefull to minify this code ahead of time so its faster loading on page generation.
- Once you have the Critcal CSS generate for each page type, you’ll need to switch gears and start modifying your Magento header.phtml files (or whatever file closes with </head>).
a.) For each PAGE TYPE (CMS, Category, Home, Product), you’ll need to pull in the Critical CSS you’ve generated in #3. - After you have the Critical CSS being loaded for each page type, test..test..test some more using Google PageSpeed. You should see an immediate improvement.
- Automate the system (steps 1-4) and have it generate the CSS fresh weekly (or if you make major CSS changes to your site).
Now, this will resolve about 99.9% of your issues with above the fold rendering. We have run into some VERY odd issues where in certain instances, the rendering still is a problem. The issue we’ve found is that the webpage SIZE and LAYOUT can be a factor in PageSpeed scores. Here are some additional tips we’ve used to solve these “side cases”.
- Scrunch down your HTML code as much as possible. Compact ALL the HTML, remove necessary code in your menu/footer and K.I.S.S (Keep it Simple Stupid). The less HTML you have to serve to a mobile client, the better.
- In rare cases, considering async delay loading content blocks that are NOT critical to the user (Upsell/Reviews/etc). So when a user first comes to a page, they will see a “loading” sign for blocks of content that are NOT immediately necessary for rendering the entire critical elements of the page (non-critical async block loading).
- Shorten any Short Descriptions OR descriptions you may have at the top of your mobile view. Massive amounts of mobile text will push the rest of your page down further and “count against” you in Google’s Pagespeed test.
Your site may never been 100% perfect in every aspect, but the user Mobile experience should be significantly improved.
Defer Scripts (“Optimize CSS Delivery” per Google):
The next biggest hurtle is figuring out how the defer CSS loading. Google Provides a very good guide (<a href=’https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery’> Here </a>) that can step you through the process. They even provide a great snippet of code that actually provides the deferred CSS loading. The tricky part is figuring out what CSS you can defer without your site looking like a mess on page load.
Since we have the critcal CSS inlined, the page should look okay when it first loads (depending on page type: cms/category/product/etc). Your inline CSS will have to be code that is NOT dependent on anything being loaded in JS functions.
Here are some tips we’ve used to boost PageSpeed scores significantly in Magento and solve the “Defer Script” issue.
- Figure out the CSS code you need to defer. As a starting point, you can try using all of the CSS that Magento has generated (into a single file).
- Add a placeholder in the Magento page code WHERE you want the deferred scripts to be rebuilt.
- Build a module that is last in line for Magento page rendering and observes right before the final response is sent to the client.
a.) The module we’ve built, will pattern match all the CSS on the HTML that we’ve designated as deferred.
b.) Remove the links it finds.
c.) Uses Google’s deffered CSS load sample code and loads the CSS in an asynchronous method - Displays the final page rendered code.
Again, testing is critical for each and every page type. Also, as with the Critical CSS method not always resolving to higher scores, a combination of decreasing page sizes and asynchronously loading non-critical page blocks usually gives you a very large boost in Page Scores.
We’ve been in touch with Magento Enterprise Support regarding these issues and they are aware of them, however we have not received any guidance on if anything is going to be done to resolve these top two points. They are very complicated to do manually and could easily be built inside of Magento’s core functionality, but for now it will have to be a manual process.
Again, these methods are for expert Magento developers and probably should not be attempted without a solid background of Magento Engineering and/or web page technologies.
If you need any help at all we are experts in Magento development and would be glad to help: Contact US!
Performance Tool List: