Skip to main content Skip to docs navigation

Prerender

Prerendering refers to the practice of speculatively prefetching and rendering pages that the user is likely to navigate to in the near future (the browser renders the page in the background in what is effectively an invisible separate tab). Prerendering includes downloading a document's subresources and running associated JavaScript.

On this page

Prerender

If the user then chooses to navigate to the page, display of its content can be near instant.

Prerendering might be used, for example, to fetch the page resources linked by a "Next" button, or a link popup that a user hovers over, or the likely page target of the URL being entered into the address bar. The following speculation rules could be included in the head of a document to hint to the browser that it should prerender next.html and next2.html , as either might reasonably be a target of the next navigation:

html
                                    
                                        
                                            
                                                <
                                                script
                                            
                                            type
                                            
                                                =
                                                "
                                                speculationrules"
                                            
                                            >
                                        
                                        
                                            
                                                {
                                                "prerender"
                                                :
                                                [
                                                {
                                                "source"
                                                :
                                                "list"
                                                ,
                                                "urls"
                                                :
                                                [
                                                "next.html"
                                                ,
                                                "next2.html"
                                                ]
                                                }
                                                ]
                                                }
                                            
                                        
                                        
                                            
                                                </
                                                script
                                            
                                            >
                                        
                                    
                                

Prerendering results in faster display time than prefetching and hence a better user experience, at the cost of more resources being consumed.

See also

Updated on April 20, 2024 by Datarist.