Magento 2 PWA Theme | Optimize PageSpeed

In today's competitive online market, a fast-loading e-commerce website is crucial for business success. One significant factor that impacts an e-commerce's performance is the Google PageSpeed score, which directly affects your website's search engine rankings.

Magento 2 PWA (Progressive Web App and headless Magento) theme Venia offers an excellent starting point for e-commerce businesses and a great user experience. However, the Google Pagespeed score in the theme is really bad, and it looks like it will take time before Magento fixes it. 

But don't worry, in this article; we will show a guide through increasing your Magento 2 official PWA Studio theme Venia's Google PageSpeed from 9 to above 90 scores using a third-party service called Prerender.io.

Magento 2 PWA Venia theme pagespeed score before and after installing Prerender.io

Like most Magento PWA themes like Venia or scandipwa , Magento Venia  relies on JavaScript to deliver app-like functionality, dynamic content, and offline capabilities. While this can provide a better user experience, it will also increase the amount of JavaScript that needs to be parsed, compiled, and executed by the browser which leads to longer load times and a lower PageSpeed score.

For one of our clients the magento 2 venia theme pagespeed score looked like this before using Prerender.io:

After we have installed Prerender.io our google page speed score went up to 91 without adding any new code in Magento 2 Venia theme:

To understand this more in detail we need to understand how Prerender.io work.

Prerender.io is a service designed to improve the performance and SEO of web applications (using best practices), particularly single-page applications (SPAs) and Progressive Web Apps (PWAs), by generating static HTML snapshots of dynamic content. It works by rendering the JavaScript-driven content server-side, allowing search engine crawlers and social media bots to access and index the content more efficiently. Here's a breakdown of how Prerender.io works:

Middleware Integration: To use Prerender.io, you need to install and configure the Prerender.io middleware on your server. The middleware intercepts incoming requests from search engine crawlers or social media bots, which often struggle with JavaScript-heavy content.

Server-side Rendering: When the middleware detects a request from a crawler or bot, it forwards the request to the Prerender.io service. Prerender.io then renders the dynamic content on its server using a headless browser, such as Google Chrome with the Puppeteer library or another compatible browser engine. This process creates a static HTML snapshot of the page's content, including all the elements generated by JavaScript.

Caching: Once the static HTML snapshot is generated, Prerender.io caches it for a configurable period. This ensures that subsequent requests for the same page are served faster, as the content is already pre-rendered and stored in the cache.

Serving the Snapshot: After rendering and caching the HTML snapshot, Prerender.io returns the static content to your server's middleware. The middleware then serves the pre-rendered HTML to the requesting crawler or bot, making it easier for them to access, parse, and index the content.

Recrawling and Cache Updates: Prerender.io regularly recrawls your website to update the cached content, ensuring that search engines and social media bots receive the most up-to-date information. You can also configure your cache settings and request manual recrawling when needed.

Configuring Prerender.io for a Magento PWA theme Venia on an Ubuntu server involves several steps. Here's a step-by-step guide to help you set it up:

1. Install Node.js on Ubuntu server: Prerender.io middleware is built with Node.js, so you'll need to have Node.js installed on your server. You can install Node.js using the following commands:

curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - sudo apt-get install -y nodejs

2. Install Prerender.io middleware: You can either use the official Prerender.io middleware or a community-supported middleware for Magento. To install the official Prerender.io middleware, run:

npm install -g prerender

3. Set up a reverse proxy: Configure your web server (e.g., Nginx or Apache) to act as a reverse proxy, forwarding requests to Prerender.io middleware when needed. Here's an example of how to configure Nginx:

location / { proxy_set_header X-Prerender-Token YOUR_PRERENDER_TOKEN; set $prerender 0; if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator") { set $prerender 1; } if ($args ~ "_escaped_fragment_") { set $prerender 1; } if ($http_user_agent ~ "Prerender") { set $prerender 0; } if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|
mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") { set $prerender 0; } if ($prerender = 1) { rewrite .* /$scheme://$host$request_uri? break; proxy_pass http://localhost:3000; } if ($prerender = 0) { proxy_pass @magento; } }

Replace your_prerender_token with your Prerender.io token. Adjust the proxy_pass directives to point to your Magento PWA and Prerender.io middleware.

4. Start Prerender.io middleware: Run the following command to start the middleware:

prerender

By default, it will run on port 3000, but you can specify a different port using the --port flag.

5. Configure Prerender.io account: Sign up for a Prerender.io account and add your website's URL. This will enable Prerender.io to crawl your website and generate static HTML pages.
    
6. Test the configuration: To ensure that Prerender.io is working correctly with your Magento PWA theme Venia, access your website using a search engine crawler's user agent or using a tool like curl:

curl -A "Googlebot" -L https://yourwebsite.com

Check the output to verify that the static HTML content is being

Do you need help doing this or want help with any other Magento-related questions? We'd be happy to provide any assistance you need. Contact us anytime.