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

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:

 Image removed.

 

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:

 Image removed.

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

How does 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.

How do you install Prerender.io together with Magento 2 venia theme on a ubuntu server?

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

  1. 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

  1. 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.

  1. 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.

  1. 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.
     
  2. 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.

Tags

  • Magento

About author

Dario

Dario Vranjković

Dario is an eCommerce team lead at ZenDev; he specializes in platform integrations, development, and Technical SEO. Dario has built and optimized online stores, linked platforms with ERP and PIM systems, and trained teams to ensure lasting success.

Share the post

23 July, 2024

  • 5 min

Why would anyone choose to speak on this topic? Quitting is not a popular word in the business language. 

When I got an invitation to give a keynote speech at

26 February, 2024

So.. here we are, you have an idea for a software solution, you’re excited about it. 

If you have any connection at all with the IT industry, someone has probably already told you that you should start…

29 November, 2023

After two+ years of experience with Go, there are some topics I'd like to share based on my practical knowledge.

In this article, you will learn what is gRPC-gateway, how it works, see real-life examples, and as bonus, we will…

24 October, 2023

You can have a great product and zero customers. 

How?

In an interview for Amplifyre,…

scroll-to-top