Any good web optimization is aware of it’s not productive to level out points with out providing options. So, let’s have a look at the choices we are able to carry to internet builders to enhance our JavaScript web optimization.
The feasibility of those options is determined by your web site’s tech stack. Therefore, laying out an excellent/higher/finest method is necessary.
Ideally suited answer: Make important content material obtainable within the uncooked HTML
As SEOs, we are able to sleep soundly at evening realizing that our web site’s inner hyperlinks, web page headings, physique copy, and extra can be found to Google in our uncooked HTML. Searchbots can crawl and index our important content material effectively with out risking errors or delays related to Google’s rendering service.
Make sure you spotlight to builders the important web optimization parts at the moment absent from the uncooked HTML and discover the feasibility of creating these updates.
Subsequent finest answer: Implement a server-side rendering (SSR) answer
Earlier than we go into this answer, let’s perceive server-side rendering (SSR) vs. client-side rendering (CSR):
-
Server-Aspect Rendering: The preliminary web page load delivers all content material to the browser by way of HTML.
-
Consumer-Aspect Rendering: Content material from JavaScript information is downloaded to the browser after the preliminary web page load.
Points with indexing JavaScript-rendered content material come from its client-side rendering. while you change off JavaScript in your browser, and a few elements of the web page vanish? That is the problem visualized proper there.
I commonly use this analogy from Onely to clarify the distinction: “CSR is sort of a cooking recipe. Google will get the cake recipe that must be baked and picked up. SSR – Google will get the cake able to eat. No want for baking.”
So, the important query for our devs is, “May we lean on SSR as an alternative of CSR to ship content material throughout the preliminary web page load?”
And here is a professional tip: Should you’re acquainted with your web site’s JavaScript framework, many supply useful instruments to combine SSR easily.
JS Framework |
SSR Resolution |
React |
Subsequent.js, Gatsby |
Angular |
Angular Common |
Vue.js |
Nuxt.js |
Final-ditch answer: Implement dynamic rendering
Dynamic rendering is a hybrid answer the place your customers expertise your web site’s client-side rendering whereas search engine bots are served a separate, static HTML model.