Editor’s note: The following was originally posted on Setka’s blog.
Setka has integrated its WordPress plugin with the AMP WP plugin
Technology company Setka creates products that help publishers and brands easily make beautiful and engaging content. Setka is a WordPress VIP Technical partner. One of those products, Setka Editor, is a WYSIWYG editor that allows users to put together well-designed article pages without having to code. Its team is distributed and based in San Francisco, New York, Berlin, Minsk, and Moscow.
Now, Setka has integrated its WordPress plugin with the AMP WP plugin. When installed on the same website they automatically increase the loading speed for mobile pages while retaining stylistic and branding elements.
Read on to learn more about this improvement, and to see how it worked on RealtimeBoard’s corporate blog.
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.”
Katya Bazilevskaya, the co-founder and CEO of Setka
To ensure speed and usability on all devices, Setka had to implement 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 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 Editor plugin retains functionality in all three modes and allows users to convert separate elements into an AMP notation.
Setka’s 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 are in line with the design demands.
- The animation sanitizer converts Setka Editor animations into AMP animations while keeping any interactive features like activation on a specific user action or elements that change state.
- The embed element sanitizer transforms a responsive embed into relevant AMP elements and correctly integrates them into the page.
- The gallery sanitizer transforms the component for displaying a series of images into the relevant AMP element.
- 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. In it, 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 RealtimeBoard
The first project that Setka tested this solution on was for RealtimeBoard, a software company working on a visual collaboration platform for distributed teams.
RealtimeBoard’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. That’s why the design for articles, interviews and case studies is created with the Setka Editor.
At the same time the RealtimeBoard team was interested in the capabilities of AMP for increasing the speed of mobile page loading while retaining the diversity of design elements.
Setka developers helped adapt the WordPress theme of the RealtimeBoard blog in paired mode. Thanks to the release of the Style Manager, the styles used on the website were ready for AMP content. After implementing AMP, average First Meaningful Paint time of the blog pages 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 design. 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 meet our users a little quicker.”
Yegor Korobeynikov, Head of Brand Experience at RealtimeBoard