The IKEA Flatpack Guide To Rendering Mark Stanford-Janes ROAST Speakerdeck.com/mstanford43

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

1 What is Rendering? Rendering is how Google builds your site and “experiences it as a human”

1 What is Rendering? Every Webpage Has Two States – Rendering occurs between them The Initial HTML The Rendered HTML

1 What is Rendering? Every Webpage Has Two States The Initial HTML

1 What is Rendering? Every Webpage Has Two States The Rendered HTML

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

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

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

What is all the fuss about? Google can’t (technically) index what it can’t render so we need to make sure sites properly!

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

How does Google Render stuff? 1 First wave indexation 2 Second wave of processing for Google’s index 3 Fully indexed!

The IKEA Flatpack guide to Rendering

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

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

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

4.3 Dynamic Rendering (DR) Users get Search engines get OR

4.3 Dynamic Rendering (DR) Users get Search engines get OR

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

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

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

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

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

So which is best?

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

5.1 Best Rendering Methods for Small Static Sites… Cheap/Simple Expensive/Difficult SEO Friendly Bad for SEO CSR SSR DR SR PRH IR ISR PR

5.2 Best Rendering Methods for Larger sites Cheap/Simple Expensive/Difficult SEO Friendly Bad for SEO CSR SSR DR SR PRH IR ISR PR

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

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

6 How Can I Test my Site’s Rendering?

6 Check Search Console

6 The Rich Results Test

6 Screaming Frog It!

6 Turn off JS in Chrome With JS Without JS

THANK YOU