Image for post
Image for post
Photo by Marc-Olivier Jodoin

As much as I like working with Magento 2 I have to admit it’s never been known for its blazing performance, page loading speeds in both frontend and backend have been consistently slower than its own 1.9 version and that’s been a problem most Magento developers have had to deal with in some way or another.

Don’t get me wrong, there are a lot of changes Magento’s done to improve development experience: using composer, the plugin system, dependency injection, just to name a few, but page loading speeds (specially on the frontend) have suffered because the frontend stack that Magento decided to go with hasn’t scaled very well and it’s so tied to the core that making drastic changes to it involves a lot of work. …

Image for post
Image for post
Photo by Esther Jiao on Unsplash

CMS blocks are a popular way to enable users to edit elements in their Magento 2 websites from the backend, it requires (almost) no coding skills and provide a relatively safe way of updating content without risking breaking your e-commerce site.

Out of the box Vue Storefront provides support for CMS blocks, if you’re using the official Magento 2 VS Indexer or mage2vuestorefront data pump (v1.6+) CMS blocks and pages are synced to the Elastic Search database so we can query this data very efficiently.

Vue Storefront also includes a component to help us render this content anywhere in our sites, let’s see how that would look if we wanted to make one of the blocks in the homepage editable from a CMS…

Image for post
Image for post
Unrelated, please ignore…

For the past few months Magento has been working on PWA Studio which is, in summary, a collection of tools to help build modern Progressive Web Applications on top of Magento 2 stores.

For the most part these tools have been used in production by other projects with great success so it makes sense that PWA Studio is built on top of them, for example:

  • Peregrine: collection of React-based UI components to help reuse common functionality like routing, render pages, products, prices, etc.
  • PWA Buildpack: build and layout optimisation tooling, it expands webpack to help configure PWA Studio components and sets up local development environment. …


Javier Villanueva

Lead Front End Developer at Media Lounge · 6x Magento Certified · E-Commerce Specialist · Currently @ Bournemouth, UK

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store