Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use pre-render to boost Larget Contentful Paint (LCP) #3090

Closed
wants to merge 4 commits into from

Conversation

lewisvoncken
Copy link
Contributor

@lewisvoncken lewisvoncken commented Mar 28, 2021

Description

This will add hydrate option when root element has children. This is a follow-up for requested default Rendertron Middleware support in #3058

This PR depends on this Rendertron PR GoogleChrome/rendertron#654
Which allows to keep javascript tags so you can use rehydrate the page.

Acceptance

Verification Stakeholders

Specification

Verification Steps

  1. Spin up Rendertron based on this PR [FEATURE] Allow setting specific javascriptQuerySelectors so you coul… GoogleChrome/rendertron#654 and run it with the following config.json
{
  "cache": "filesystem",
  "cacheConfig": {
    "cacheDurationMinutes": 120,
    "cacheMaxEntries": 50,
    "snapshotDir": "~/tools/rendertron/snapshots"
  },
  "stripSelectors": "",
  "port": "3000",
  "closeBrowser": false
}
  1. Add the following lines to your .env
RENDERTRON_URL=https://localhost:3000/render
RENDERTRON_USER_AGENTS="^((?!HeadlessChrome).)*$"
RENDERTRON_EXCLUDE_URL_PATTERN="graphql|\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)"
  1. When you now visit the page you get a pre-render response which can be re-hydrated.
  2. The config is set to use a cache layer so now you can use SEOSnap to use as a CacheWarmer
  3. When rendertron is not running it will automatically fallback to the default render functionality

Screenshots / Screen Captures

Pre-rendered

image

Not Pre-rendered

image

Resolved issues:

  1. resolves [Issue] Use pre-render to boost Largest Contentful Paint (LCP) #3107: Use pre-render to boost Larget Contentful Paint (LCP)

@PWAStudioBot
Copy link
Contributor

PWAStudioBot commented Mar 28, 2021

Fails
🚫

node` failed.

🚫 A version label is required. A maintainer must add one.
🚫

Unit tests in the following files did not pass 😔. All tests must pass before this PR can be merged

  • packages/venia-concept/src/__tests__/index.spec.js
🚫

No linked issue found. Please link a relevant open issue by adding the text "closes #<issue_number>" or "closes JIRA-<issue_number>" in your PR.

Messages
📖 DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).
📖

Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Log

ERROR ON TASK: eslintCheck


ERROR ON TASK: unitTests


Error:  Danger had errors running. See message(s) above for more details.
danger-results://tmp/danger-results.json

Generated by 🚫 dangerJS against e4c08b6

@PWAStudioBot PWAStudioBot added pkg:pwa-buildpack pkg:upward-js Pertains to upward-js reference implementation of UPWARD. pkg:venia-concept labels Mar 28, 2021
@sirugh
Copy link
Contributor

sirugh commented Apr 7, 2021

@magento create issue from PR

@sirugh
Copy link
Contributor

sirugh commented May 6, 2021

@lewisvoncken can you clarify - will this PR have any affect on the code without the rendertron PR you linked?

@sirugh sirugh requested a review from jimbo May 6, 2021 20:32
@lewisvoncken
Copy link
Contributor Author

@sirugh
This PR depends on this Rendertron PR GoogleChrome/rendertron#654
And is a follow up for [FEATURE] Added default Rendertron support #3058, but that PR is not depend on the Rendertron PR so that's why I splitted it in 2 PRs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Issue] Use pre-render to boost Largest Contentful Paint (LCP)
5 participants