Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BSEO - The IKEA Flatpack Guide to Rendering

BSEO - The IKEA Flatpack Guide to Rendering

These are the slides from my Brighton SEO Talk on The IKEA Flatpack Guide to Rendering

MStanford-Janes

April 25, 2024
Tweet

Other Decks in Marketing & SEO

Transcript

  1. 1 2 3 4 5 6 CONTENTS What is Rendering?

    Why is Rendering Important? How Does Google render stuff? The IKEA Flatpack Guide to Rendering Which is best for SEO? How to tell if it’s working? UK
  2. 1 What is Rendering? Rendering is how Google builds your

    site and “experiences it as a human”
  3. 1 What is Rendering? Every Webpage Has Two States –

    Rendering occurs between them The Initial HTML The Rendered HTML
  4. 2 Why is Rendering Important? Three Phases: 1 Crawling Crawl

    Queue Crawler Processing Index Render Queue Render URL HTML Rendered HTML
  5. 2 Why is Rendering Important? Three Phases: 1 Crawling 2

    Rendering Crawl Queue Crawler Processing Index Render Queue Render URL HTML Rendered HTML
  6. 2 Why is Rendering Important? Three Phases: 1 Crawling 2

    Rendering 3 Indexing Crawl Queue Crawler Processing Index Render Queue Render URL HTML Rendered HTML
  7. What is all the fuss about? Google can’t (technically) index

    what it can’t render so we need to make sure sites properly!
  8. 3 How does Google Render stuff? 1. A URL is

    pulled from the crawl queue 2. Googlebot requests the URL and downloads the initial HTML 3. The Initial HTML is passed to the processing stage (First wave of processing by Google’s indexing service) 4. The processing stage extracts links from the initial HTML 5. These links go back on the crawl queue 6. Once resources are crawled, the page queues for rendering 7. When resources become available, the request moves from the render queue to the renderer 8. The rendering service assembles the page using the crawled links 9. Renderer passes the rendered HTML back to processing 10. Second wave of processing for Google’s index 11. Extracts links from the rendered HTML to put them into the crawl queue 12. Go to the next URL in the crawl queue and repeat the process. 13. Only 130 trillion pages more and you’ll be a proper bot
  9. How does Google Render stuff? 1 First wave indexation 2

    Second wave of processing for Google’s index 3 Fully indexed!
  10. 1 IKEA – Server 2 Raw materials – html 3

    Screws,nails, etc – JS, CSS 4 Your home – Browser 5 Bookcase– Finished page 4 The IKEA Flatpack Guide to Rendering The Basics
  11. 4.1 Client-Side Rendering (CSR) You order the bookcase from IKEA

    The full flatpack is sent to your house You have to put it together yourself at home You can use the Bookcase
  12. 4.2 Server-side Rendering (SSR) IKEA builds the Bookcase for you

    You order the bookcase from IKEA The Bookcase is sent to your house You can use the Bookcase
  13. 4.4 Static Rendering (SR) IKEA builds the bookcase and stores

    it You order the bookcase from IKEA The Bookcase is sent to your house really quickly You can use the Bookcase but it has some wear and tear
  14. 4.5 Incremental Static Regeneration (ISR) IKEA builds the bookcase and

    stores it You order the bookcase from IKEA The Bookcase is sent to your house really quickly You can use the Bookcase and any worn parts are replaced
  15. 4.6 Prerendering (PR) You order the bookcase from IKEA They

    send only the wood (HTML) You can look at the pile of wood but not do anything with it… IKEA sends the screws and instructions and you build it
  16. 4.7 Progressive Rehydration (PRH) You can use the top part

    of the bookcase After a while you can use the rest of the bookshelf Server-side Rendering
  17. 4.8 Islands Rendering (IR) The entire catalogue is broken into

    separate parts You order the bookcase from IKEA They send only the exact parts for the bookshelf You have to put it together yourself at home You can use the Bookcase
  18. 5.3 Best Rendering Methods for a New Site Cheap/Simple Expensive/Difficult

    SEO Friendly Bad for SEO CSR SSR DR SR PRH IR ISR PR
  19. 5.4 Best Rendering Methods for a Blog or News Site

    Cheap/Simple Expensive/Difficult SEO Friendly Bad for SEO CSR SSR DR SR PRH IR ISR PR