Scully Helped us Reach a 99 Lighthouse Score for a B2C Platform

Who the contributors are

Alexandr Pavlovskiy and Nikita Glukhi made it possible to bring all the described to life. Many thanks for being great team players and for their great contribution to the project.

Project background

Well, our team’s job on this project was to reconsider the B2C platform for a game company. They had an outdated landing, as well as mobile apps that users didn’t really want to use. We were on a global mission to understand the current project situation, and then — bring value.

What is Scully and how to deploy‍

JAMstack stands for JavaScript, APIs, and Markup. In this kind of architecture, JavaScript runs entirely on the client-side and handles any dynamic programming. Reusable APIs cover all the server-side processes, and Markup is a markup (a site generator or Webpack), and it needs to be pre-built.

Now Lighthouse score reaches 100

We use Lighthouse, an open-source tool for checking and improving the quality of web pages in this project. You can run it through any webpage for performance, accessibility, SEO, and other audits. On completion, you get a report with suggestions for improvements, and all that is left is bringing those to life :-)

Better Google indexation — how to spot the company in the top

If we remember the basics of the Google search logic, then the crawling stage comes first, to discover publicly available web pages and connected links, and bring this data back to the Google server. Then indexing, when Google tries to understand what the website is about in terms of content, images, video, etc., to categorize the object and put it “on the right shelf” in a huge Google index storage. Finally, we have serving and ranking, when in response to a user’s query Google goes through its index, searching for the most appropriate and quality answer.

Making the overall CSS footprint smaller with Tailwind

To remove CSS that we don’t need when building for production, we used Tailwind CSS. This CSS framework in the first place lets you easily style your website or app. And what’s more important in our case, it helped us to get rid of unused styles and optimize builds’ size.

User growth and stronger involvement

Firstly, our release of an Alpha version of the platform tuned by Scully drew users to the product. By product, I mean in-app traits for gamers like a range of different cosmetics, including skins and pets. Scully brought us more visitors and buyers among those who already played the game and knew about the platform.

Integration of Google eCommerce Marketing

The eCommerce part of Google Analytics is what you definitely want to apply to gather insights on user behavior and preferences. You can also understand who makes up your core audience if that’s what you lack, and then — build more efficient marketing campaigns. eCommerce gives you access to your audience’s gender, age, geographical location. The only thing you should take care of to obtain needed data is tags. You’ve got to manage them right when setting up analytics. The following links will help you tune your tags for enhanced eCommerce:

Bridging Google Analytics’ tags and your Scully platform

Earlier we added a complete JavaScript tracking-code snippet into the HTML to our platform (just like described in this PPCexpo material). But when we switched to Scully and went on connecting Google Analytics to the Scully website, a conflict between Google Tag Manager and HTTPS packages arose. So, we created a plugin to pre-build this connection for Scully to add the piece of code for Google Analytics without any modifications:

import { registerPlugin, getMyConfig } from '@scullyio/scully';export const GoogleAnalytics = 'googleAnalytics';export const googleAnalyticsPlugin = async (html: string): Promise<string> => {
const googleAnalyticsConfig = getMyConfig(googleAnalyticsPlugin);
if (!googleAnalyticsConfig || !googleAnalyticsConfig['globalSiteTag']) {
throw new Error('googleAnalytics plugin missing Global Site Tag');
}
const siteTag: string = googleAnalyticsConfig['globalSiteTag']; // your gtmTagId
const googleAnalyticsScript = `
// your GA script code here
`;
return html.replace(/<\/head/i, `${googleAnalyticsScript}</head`);
};
const validator = async () => [];registerPlugin('postProcessByHtml', GoogleAnalytics, googleAnalyticsPlugin, validator);

Summary

This switch to JAMstack and Scully gave us a tremendous amount of benefits, even those both we and the client didn’t expect to get. For example, it was a surprise that we’ll have better Google indexing.

Useful links


‍1. Scully Tutorial

--

--

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
Valor Software

Valor Software

Useful articles from experienced Valor specialists in various spheres of digital development.