In the dynamic realm of online presence, the recent Google algorithm update which occured on sep 5 sent ripples through the digital landscape, impacting the visibility and SEO strategies of countless businesses.

Our company, like many others, has encountered challenges stemming from these changes. In this blog, we delve into the intricacies of the update, exploring its implications and sharing insights on how businesses can not only weather the storm but also thrive in the ever-evolving world of search engine optimization.

Let's Dive In,

I've been tasked with enhancing our web vitals score, focusing on the fundamental improvements achievable from a technical standpoint. This endeavor involves optimizing loading speed, interactivity, and visual stability to ensure a seamless and responsive user experience. Our aim is not just to meet but surpass the stringent standards set by core web vitals. This technical initiative aligns with our broader objective of delivering a swift, engaging, and frustration-free digital journey for our users.

We consistently rely on both Lighthouse and PageSpeed Insights for technical page analytics, as they furnish valuable information regarding performance metrics.

Lighthouse is lab data and is heavily influenced by the machine that it is tested on. RAM, CPU, browser plugins, internet connection speed, and other factors will have an impact on that score. It is best to use Incognito with no extensions, and not doing any other activities that can hog computer resources to get the best lab score.

PageSpeed Insights offers crucial insights into a website's performance by analyzing its loading speed and providing actionable suggestions for improvement. This tool, provided by Google, is instrumental in optimizing web pages for enhanced user experience and better search engine rankings. PageSpeed Insights uses lab and field data to show how well web pages perform. Lab data, which describes measurements made in a regulated setting like a test lab or simulation, can help supply an impartial baseline performance measurement. On the other hand, field data describes measurements made from actual user devices and network conditions in the real world. This information gives a more accurate picture of a web page's performance.

So What are things we done to improve the SEO

• CSS optimization:

  • Defer non-critical CSS

• JavaScript optimization:

  • Defer unused JavaScripts

• Image optimization:

  • Compress images (Convert the png image to webp)

• Font and icon optimization:

  • Preload fonts

  • Switch to using SVGs instead of usual icons, SVG are way better for scaling and quality,

We found that smaller things can make a big difference, like caching images or serving them (+videos, ads, etc) with predefined dimensions, serving with webp format.

It truly challenging for me as a backend developer to delve into the intricates of frontend world but other times, it's about discovering the simpler aspects of the situation. Keep going and persist, as the solution might be more accessible than you think.

Things which I learnt while improving the above and a checklist that we maintain for future use are

Server optimization:

• Upgrade to a faster server

• Route users to a nearby CDN

• Apply a server-side cache

• Serve HTML pages cache-first

CSS optimization:

• Minify CSS

• Defer non-critical CSS

• Inline critical CSS

• Consolidate CSS аiles and сode

• Optimize CSS delivery

JavaScript optimization:

• Minify and compress JS files

• Defer unused JavaScripts

• Minimize unused polyfills

• Use Google hosted JS whenever possible

Image optimization:

• Avoid using an image as the main piece of content in the viewport

• Compress images

• Use responsive images

• Consider using an image CDN

• Implement the lazy loading

Video optimization:

• Use image placeholders for video thumbnails

• Push videos below the fold

• Replace animated GIFs with videos

• Preload videos

Font and icon optimization:

• Preload fonts

• Use a limited amount of fonts

• Switch to using SVGs instead of usual icons (Implemented as part of my research) - SVG’a are way better for scaling and quality,

Additional optimization:

• Establish third-party connections early

• Remove loading icons and spinners when possible