JavaScript page performance problems

Last updated: Jun 26, 2023

This video is about the origin story of JavaScript SEO and how it led to a case study involving a fashion startup that experienced performance problems with their website after implementing JavaScript.

This video by Google Search Central was published on Feb 1, 2023.
Video length: 25:06.

In this video, Bartosz Góralewicz, CEO at Onely, shares his experience with JavaScript SEO and how it led him to become interested in the topic.

He discusses a specific case where a client's website had poor performance despite using modern frameworks and technologies.

Bartosz delves into the challenges he faced and the steps he took to investigate and improve the website's performance.

  • The origin story of JavaScript SEO is linked to a case study involving a fashion startup.
  • The founder of the startup had a dynamic team of developers and used modern frameworks.
  • The low number of visits to the website was a concern.
  • The founder realized that JavaScript might be the cause of the website's performance problems.
  • Bartosz Góralewicz and his team analyzed the website's JavaScript implementation.
  • They recommended implementing server-side rendering (SSR) to improve the website's performance.
  • The speaker noticed a rotating wheel on the website that indicated loading.
  • The speaker disabled the loading spinner on the website.
  • The speaker delved deeper into understanding the problem.

JavaScript page performance problems - YouTube

JavaScript page performance problems 001

Origin Story of JavaScript SEO

  • The origin story of JavaScript SEO is linked to a case study involving a fashion startup.
  • The founder of the startup had a dynamic team of developers and used modern frameworks.
  • The project seemed exciting and the vibe was positive.
  • The initial plan was to focus on web performance and publishing the website.
  • However, after the website relaunch, the metrics were not good and there were only 700 visits per month.
JavaScript page performance problems 002

Challenges with the Website

  • The low number of visits to the website was a concern.
  • People advised the founder to focus on acquiring links and creating content.
  • The founder became obsessed with finding clues and solutions to improve the website's performance.
  • They delved deep into technologies and used tools like Google Search Console to analyze the website.
  • However, everything seemed to be working fine and there were no obvious issues.
JavaScript page performance problems 003

Discovering JavaScript as the Problem

  • The founder realized that JavaScript might be the cause of the website's performance problems.
  • They discovered that the website was not rendering properly for search engine crawlers.
  • JavaScript was preventing search engines from accessing and understanding the content.
  • This led to a significant decrease in organic search traffic.
  • The founder decided to reach out for help and that's how they connected with Bartosz Góralewicz.
JavaScript page performance problems 005

JavaScript page performance problems - YouTube

Resolving the JavaScript Performance Issues

  • Bartosz Góralewicz and his team analyzed the website's JavaScript implementation.
  • They identified several issues, including excessive JavaScript usage and poor rendering for search engines.
  • They recommended implementing server-side rendering (SSR) to improve the website's performance.
  • After implementing SSR, the website's performance improved significantly.
  • The organic search traffic increased, and the website started ranking higher in search results.
JavaScript page performance problems 006

Identifying the problem

  • The speaker noticed a rotating wheel on the website that indicated loading.
  • They realized that not all of the code was being sent to the browser.
  • They discovered that an open library or script was causing the issue.
  • The library was used on thousands of different websites.
  • The speaker slowed down Chrome to observe the problem.
JavaScript page performance problems 007

Challenges with AngularJS

  • The speaker approached the development team about the issue.
  • The team was hesitant to address it, as AngularJS was a product of Google.
  • The team didn't see the connection between AngularJS and search.
  • After some persuasion, the team agreed to investigate the problem.
  • The team was desperate for traffic and willing to try different solutions.
JavaScript page performance problems 008

Disabling the loading spinner

  • The speaker disabled the loading spinner on the website.
  • All the dependencies related to the spinner were removed.
  • Within days, there was a significant increase in traffic.
  • The specific metrics of traffic volume improved dramatically.
  • The success of this change pushed the speaker further into investigating the issue.
JavaScript page performance problems 010

Going down the rabbit hole

  • The speaker delved deeper into understanding the problem.
  • Despite the initial success, not knowing the cause was frustrating.
  • They were scared and concerned about the impact on their livelihood.
  • The speaker sought help from a development partner.
  • Multiple experiments were conducted to find the root cause.
JavaScript page performance problems 011

Origin story of JavaScript SEO

  • The website had a placeholder text for each subpage in HTML, and everything within a red frame was JavaScript-generated.
  • A link within the red frame was injected with JavaScript and pointed to a URL that hadn't been pointed out anywhere else.
  • The team looked into server logs to see if Google accessed the link, indicating that the JavaScript-generated content was being rendered and understood.
  • Google's documentation at the time stated that Google renders JavaScript like any modern browser.
  • It was a pioneering approach in the early days of JavaScript SEO.
JavaScript page performance problems 012

Challenges with JavaScript rendering

  • Google's documentation was an oversimplification, and there were caveats to JavaScript rendering.
  • It was a challenging time for JavaScript SEO, and some things were missed due to excitement about running JavaScript like in a normal browser.
  • Not all frameworks were rendered by search engines, leading to inconsistencies.
  • There were difficulties in identifying which parts of the website depended on JavaScript and needed to be addressed.
  • Technical SEO was not highly appreciated in the Polish market at the time.
JavaScript page performance problems 013

Case study with a fashion startup

  • The fashion startup's website relied on AngularJS, which was causing performance problems.
  • The team proposed removing the AngularJS dependency as an experiment.
  • There were concerns about suggesting a complete rewrite of the website.
  • Technical SEO was not widely understood or valued in the market.
  • The team couldn't promise specific gains from the changes but pushed for the experiment.
JavaScript page performance problems 015

Conclusion and impact

  • The fashion startup saw significant improvements in website performance after removing the AngularJS dependency.
  • The experiment demonstrated the importance of considering JavaScript rendering and its impact on website performance.
  • Technical SEO gained recognition and appreciation as a valuable approach.
  • The experience highlighted the need for continuous experimentation and collaboration in the field of JavaScript SEO.
  • The team reached out to colleagues and experts for insights and guidance throughout the process.
JavaScript page performance problems 016

Challenges with implementing JavaScript

  • The fashion startup had no documentation or case studies to refer to when implementing JavaScript on their website.
  • There was uncertainty about the return on investment (ROI) and the results of implementing JavaScript.
  • It took several months to remove dependencies and relaunch the website with new technology.
JavaScript page performance problems 017

Slow progress and stagnation

  • After implementing JavaScript, the website's performance did not improve significantly.
  • Server logs showed that Google was crawling and indexing the website, but the changes took months to be fully reflected in Google's search results.
  • The communication between the fashion startup and the SEO team became awkward and strained.
JavaScript page performance problems 018

Exploring the issue further

  • The SEO team delved into server logs and discovered that Google was crawling the website fairly quickly.
  • The fashion startup became more interested in investigating the issue and understanding the impact on their investors.
  • The SEO team and the fashion startup continued to collaborate and experiment to find a solution.
JavaScript page performance problems 020

Continued growth and experimentation

  • The fashion startup's website continued to grow and perform well.
  • The experience with JavaScript SEO became a part of the company's culture and core values.
  • The SEO team emphasizes the importance of experimentation and being data-driven.
  • Curiosity and persistence are key traits in finding solutions and understanding search engine behavior.
JavaScript page performance problems 021

JavaScript page performance problems

  • The speaker discusses their experience with a website built with JavaScript frameworks.
  • They found that the JavaScript-driven website was indexed quicker than the HTML website.
  • They realized that processes were running in parallel, which explained the faster indexing.
  • They mention that documentation improvements were made based on their findings.
  • They emphasize the importance of conducting experiments to gather data.
JavaScript page performance problems 022

Importance of experiments and learning from failures

  • The speaker talks about the value of conducting experiments, even if they don't always work.
  • They mention using a software called "content machines" for an experiment.
  • They highlight that not all experiments are published, but the ones that are can be valuable learning experiences.
  • They encourage being open to collaborating and linking out to different sources.
  • They emphasize the importance of prioritizing based on data and not solely relying on advice from others.
JavaScript page performance problems 023

Technical foundation and frustration

  • The speaker emphasizes the importance of a solid technical foundation for a website.
  • They mention that good things often come from a place of frustration and deep learning.
  • They discuss the need to experiment and rely on data rather than listening to random advice.
  • They mention that even Google can be part of the "random people on the internet" group.
  • They encourage building experiments and being open to learning from them.
JavaScript page performance problems 025

Closing remarks and gratitude

  • The speaker expresses their gratitude for the opportunity to be part of the series.
  • They mention the pleasure of meeting the host in person.
  • They offer their assistance to anyone struggling with experiments.
  • They thank the host for their patience and enjoyable conversation.
  • They conclude by thanking the viewers, encouraging them to like, subscribe, and stay safe.

Watch the video on YouTube:
JavaScript page performance problems - YouTube

Related summaries of videos: