DEVELOPER INSIGHTS
The Setka WordPress plugin is 100% AMP WP integrated
Published November 16th, 2021
Setka has integrated its WordPress plugin with the AMP WP plugin
As a Technology Partner within the WordPress VIP content platform, Setka has wholly integrated its WordPress plugin with the powerful AMP WP plugin. When they’re both installed on the same website, they automatically increase the page loading speed on mobiles while retaining stylistic and branding elements.
The challenges of AMP integration
Setka saw several advantages in integrating with AMP clients who use editorial content as one of their key marketing pillars for brand building, lead generation and lead nurturing: pages load faster, caching happens on Google servers, and clients can create beautiful, customizable designs that work well on mobile devices.
We wanted to make the editorial content created by the users of our WordPress plugin 100% AMP-ready, while having any design elements, including interactive and animated ones, be in the AMP format.
Kate Bazilevskaya
Director of Business Development/Partnerships
& Co-founder of Setka
To ensure speed and usability was maintained on all devices, Setka implemented all the requirements for AMP format: proprietary HTML tags, the restrictions of adding external scripts that aren’t part of AMP libraries, and the maximum size for inline styles of up to 50 kb.
In addition, Setka wanted to make sure it worked with all three modes in the AMP WP plugin:
‘CLASSIC’ offers a ready-made template for the theme and allows Googlebot to index the pages of the site as soon as the plugin is installed.
‘PAIRED’ assumes that the owner of the website or the creator of the theme has created separate templates for AMP and other versions of the website.
‘NATIVE’ is seamless integration, where the website is created specifically for AMP, and there is no need to create separate links, templates, and so on.
The Setka plugin retains functionality in all three modes and allows users to convert separate elements into an AMP notation.
Setka’s integration solutions
As part of the integration, Setka developers wrote four sanitizers for elements that weren’t compatible with AMP notations and created smaller files for styling elements that were in line with the design demands.
01
The animation sanitizer converts Setka animations into AMP animations, while keeping any interactive features (like activation on a specific user action) or elements that change state.
02
The embed element sanitizer, transforms a responsive embed into relevant AMP elements and correctly integrates them into the page.
03
The gallery sanitizer transforms the component for displaying a series of images into the relevant AMP element.
04
The image sanitizer displays the srcset attribute with all available resolutions, allowing the browser to decide which size is best for the user. This makes loading images faster and allows content to adapt to a device’s screen size.
So that clients can set up themes for displaying content, Setka created the Style Manager, within its backend interface. There, the user can configure styles for different elements on their pages. For integration with the AMP plugin, the developers changed the process of generating styles and managed to fit into the 50 kb limit, leaving some space (in size) for adding external styles from plugins.
Thanks to the tree shaking technology that XWP created, the AMP WP plugin only chooses the styles actually used on the page, removing extra ones from the final version. This allows various plugins to add styles without the risk of the page not passing the AMP validation.
Even clients of the WordPress VIP platform can use the plugin, because it considers the specific infrastructure of the platform, including its file system.
Increasing page load speed for Miro
The first project that Setka tested this solution on was for Miro, a software company working on a visual collaboration platform for distributed teams.
Miro’s company blog is an important part of their marketing strategy. The team wanted it to stand out among similar solutions in the technology space, which involved careful consideration of its corporate identity. The key to achieving that goal was using Setka to design their articles, interviews and case studies.
At the same time, the Miro team was interested in the capabilities of AMP – to increase the speed of mobile page loads, while retaining the diversity of design elements.
Setka developers helped adapt the WordPress theme of the Miro blog, in ‘paired’ mode. Thanks to the release of the Setka Style Manager, the styles used on the website were ready for AMP content and afterwards, the blog pages average First Meaningful Paint and Time to Interaction was reduced from 7’2” to 1’9” sec.
First Meaningful Paint and Time to Interaction metrics are measured using Lighthouse 3.0.3 in Chrome DevTools with enabled network throttling (fast 3G, 4X CPU Slowdown) for a particular page loading from Google AMP Cache. Time in the video is shown in seconds
We strive to create content with attractive and unusual designs. At the same time we want it to be convenient for our users to load our articles on mobile devices. It took several easy steps to generate AMP pages, which gave us the opportunity to meet our users a little quicker.
Yegor Korobeynikov
Head of Strategic Brand Activations at Miro
Give Setka Editor a try
Get a demo from our Customer Success team or try Setka Editor for two weeks, free.
