Recommended
Recommended
More Related Content
Similar to Prerendering 101
Similar to Prerendering 101 (20)
Recently uploaded
Recently uploaded (20)
Prerendering 101
- 1. Prerendering 101 How Prerendering Works and Why It is Important for SEO
- 2. ● Interested in digital marketing, especially SEO for 10+ years. ● Worked at different side: Freelancer, Niche Site Builder, Web Designer, Agency and Corporation ● Worked for many different industries such as Health, Finance, Insurance, Automotive, Travel, FMCG and iGaming ● Currently working as a Technical SEO Manager at ComeOn Group, responsible for 18+ Websites in 8 different markets. Your Presenter: Batuhan SASI
- 3. Tables of Content ● Intro: How Prerender Works? ● Web Basics ● A Regular Request Scenario ● How Websites Work ● Javascript’s Role in Websites ● Rendering Types: Client-Side and Server- Side ● Request Scenario from Google’s Perspective ● How Google Crawl and Index The WWW ● Javascript and Google’s Crawl and Index Process ● Crawl Budget 101 ● How Prerendering Works ● Prerendering Types ● Key Takeaways ● QnA
- 4. Today’s Topic is How Prerendering Works? and Why It is Important for SEO?
- 5. But How Does It Work EXACTLY
- 6. To Understand How Prerendering Works We Need to Start From Web Basics
- 7. A Regular Request Scenario
- 8. How Websites Work: HTML, CSS and Javascript
- 9. Introduction to JavaScript and its Role in Websites
- 10. Client-Side vs. Server-Side Rendering: Key Difference Server-Side Rendering The website’s server will exhausted if 1.000s of user try to access the website at the same time. Because it have to render the same page 1.000s time. Client-Side Rendering On the other hand if the website’s server just sends the files and client’s browsers render the page, The website’s servers won’t be affected. In Short 1 Browser Works 1.000s Times 1.000’s Browser Works 1 Time
- 12. How Google Crawl and Index Web Pages
- 13. A Request Process from Google’s Perspective
- 14. Google wants to update every page frequently to serve better user experience. In this moment, Crawl Budget comes in to the equation. Google needs to prioritize websites and web elements as it doesn’t have infinite resource. As Javascript use more resource than HTML & CSS, Google tens to defer the JS files. For “Authoritative” websites, it might render pages with JS more quickly but not for other websites. JavaScript Rendering and Google Bot Billions of Web Pages
- 15. A Rough Calculation If our server renders/builds the page than Google doesn't need to use it’s resource for rendering. It means it use it’s resource for crawl more pages. Resource Allocation of Google Resource To Render One Page Crawl Budget 100 MB 1 MB 100 Pages 100 MB 5 MB 20 Pages
- 16. And It Leads Us To… Prerender.io
- 17. How Prerendering and Prerender.io Works
- 18. Prerendering Types (And a Great Analogy)
- 19. Key Takeaways and Final Thoughts - Using JS is important for dynamic content sites like iGaming websites, in terms of functionality (It is mandatory) and also page speed. - On the other hand, it is really hard to process the JS for Google because of limited resource and time. - Prerendering helps to companies to serving lightweight web pages to Google. - Dynamic Prerendering is the best solution for the websites. - Prerender works with these steps: Crawl the web page> Renders It>Keeping the HTML version on the Server> Serve the rendered, JS Free HTML version to the Googlebot.
- 20. Question and Answer Session
- 21. Thank You!
Editor's Notes
- SEO is all about making our website more visible and attractive to search engines like Google, Bing and Yandex. If search engines crawl your website easily it means higher rankings on search result, and it means higher traffic and higher revenue. Prerendering is not important for all websites but JS heavy websites. Search engines use bots to crawl and index websites. These bots have limited resources and time. If you website takes too long to load or have complex javascript code, Those bots might not crawl your whole content. And it means lower rankings, traffic and revenue This is where prerendering becomes a game-changer. It creates static version of you website and provide that for the search engine bots. And It means those bots can crawl your whole content really fast without a problem.
- So to understand how prerendering works exactly we need to start from web basics. There is 3 minutes video that explains how web works in a really basic way. Lets watch it first and continue VIDEO So key takeaways of this video in regards of prerendering are users use browsers to reach out websites When a user try to reach out a web page, they type in the URL in the address bar or in most cases use search engines and access to the websites Browser and server communicate with each other and the server sends the HTML, CSS and JS files to the browser And browser read them and turn them in to visual web page user to interact. And this is basically how web works. There are lots of things to consider like DNS (domain name server), CDN (Content Delivery Network), SSL/TLS (Secure Sockets Layer/Transport Layer Security) and so on but we are not going to dive in to those ones today, maybe next time.
- So a regular request scenario looks like this: In our case: A user want to read some news and he use his browser to access news website. He types Example.com in the address bar and press enter. So this action sends a request to the the website’s server. And the web site’s server response this request with the requested files. Again his browser gets the files and starts to read them one by one. This process happen in milliseconds. The browser read the HTML file first and construct the web pages structure, with a analogy skeleton of the body, then read the CSS file to understand of web page elements style like font size and color, background color and image, game images sizes etc so skin of the body. Lastly reads the Javascript file to add dynamic elements of the web page like dynamic search bar, games files, users balance data etc so muscles of the body.
- In another analogy: HTML is the naked part of the car, CSS is the paint and interior, JS is the engine that moves the car. I will try to explain them very quickly. HTML (HyperText Markup Language) is the skeleton of a website. It's like the framework of a building, providing the basic structure and content. HTML is used to create and organize sections, paragraphs, headings, links, and other foundational elements of web pages. CSS (Cascading Style Sheets) is what gives the website its style and appearance. Think of CSS as the paint, decor, and style choices in a building. It controls the layout, colors, fonts, and overall visual aspects of the website, making it appealing and user-friendly. JavaScript is the interactive element of a website. If HTML is the structure and CSS is the style, JavaScript is the electricity that powers the gadgets in the building. It's a programming language that enables interactive features like forms, animations, and other dynamic elements that respond to user actions. So in conclusion when you visit a website, your browser reads the HTML code to display the content, uses CSS to apply style, and executes JavaScript to add interactivity. Together, these three create the rich and dynamic web experiences we're familiar with today.
- So let's dive into the JS. We need to understand how it works and why it is problematic for Google. There is a short example that shows what happened at the back of the curtains. VIDEO So browser requested the files. First read the HTML and CSS then requested the JS files and read and render them. So this is the typical and default render que of the browsers. They get HTML and CSS first then get the JS file. So the first and fastest phase is getting and reading HTML and CSS after that it gets JS. So in terms of SEO: if the HTML files doesn’t has the SEO elements (Title, Headings, Content etc) there might be problems about indexation. Because if Google has limited resource for crawling your website, it might not see your SEO related elements so it means lower ranking, lower organic traffic and it means single even non digit organic growth.
- So before dive in to Google’s perspective, we need to learn two different types of rendering: Client-side and Server-Side. So clients means us, the users, the users computer and browser. In other term client-side rendering or processing use OUR COMPUTERS resource and energy. On the other hand server side rendering / processing use the SERVER SIDES resource and energy like the website’s servers OR Google’s servers.
- One more thing before Google’s perspective
- Let’s listen Matt Cuts the former head of the web spam team at Google says about how Google works. VIDEO He said many millions , no billions of pages. So they want to crawl, index and re-crawl and re-evaluate billions of pages everyday.
- Let’s imagine that. Google request a web page, the server response with the files and Google’s machine renders it and Googlebots reads the content and start to analyz. One request is piece of cake for Google
- but when it comes to many billions everyday, it might be really hard task even for Google.
- I have to point out this is a really rough calculation, because there are many factors to consider when it comes to Crawl budget like page size, server response time, server speed etc. But it can give you an idea for. So if Googles allocated resource for our website is 100 MB and if our one web page is 5 MB big, it means Google crawl 20 page of our websites. If we somehow change the files and keep the same design and content on the web page and decreasing the page size to 1 MB then Google crawls 100 pages of our website. Quick note: Prerendering is not compressing. With Prerender page size gets smaller but not because of compression, because of changing files, From JS to HTML, CSS and other types of file.
- So it leads us too
- So how prerendering and of course also prerender.io works. Let's watch the short part of the video. VIDEO So before Prerenders works in many ways but we will focus on two ways. Dynamically Update with Sitemap.xml and On-Demand of Googebots. So we can send the pages that we want to prerender manually or dynamically updated by Sitemap.xml. OR let's say there is a new page that is not in sitemap: When Google request that web page our server communicate with prerender.io and send the web page to Prerender.io, Prerender renders it and create the HTML file and send back to the website’s server and the website’s server send it to Googlebot. And this happens in seconds even milliseconds.
- Also there are different types of rendering, I will not go into them in details but as a general culture lets see what are they and key differences. This is Head of Product at Prerender Mrs Aliya. She is going to explain the Prerendering Types and key differences with a great analogy for Prerendering So we are using Dynamic rendering as we use Prerendering IO. In ideal word we should have use Server Side Rendering but as she said its costly, it's hard maintenance because of the effort and time so best solution for us for now is prerender.io