gajus / usus Goto Github PK
View Code? Open in Web Editor NEWWebpage pre-rendering service. ⚡️
License: Other
Webpage pre-rendering service. ⚡️
License: Other
When I use the utility in CentOS it never works. The solution was found here
Error: connect ECONNREFUSED 127.0.0.1:41730
at Object._errnoException (util.js:1024:11)
at _exceptionWithHostPort (util.js:1046:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1182:14)
There's need in '--no-sanbox' launch option. I have not investigated the reasons so I'd like just to offer enable the option by default.
Need to write tests for Chrome rendering.
for the site https://yarnpkg.com/en/package/vue-instantsearch, inlineStyles and extractStyles don't have an effect on the page:
vue-instantsearch master ✗ ➜ usus render --url https://yarnpkg.com/en/package/vue-instantsearch > vue-instantsearch.html
ChromeLauncher Waiting for browser. +0ms
ChromeLauncher Waiting for browser... +1ms
ChromeLauncher Waiting for browser..... +509ms
ChromeLauncher Waiting for browser.....✓ +3ms
ChromeLauncher Killing all Chrome Instances +7s
vue-instantsearch master ✗ ➜ code .
vue-instantsearch master ✗ ➜ usus render --url https://yarnpkg.com/en/package/vue-instantsearch --inlineStyles true> vue-instantsearch.html
ChromeLauncher Waiting for browser. +0ms
ChromeLauncher Waiting for browser... +1ms
ChromeLauncher Waiting for browser..... +512ms
ChromeLauncher Waiting for browser.....✓ +2ms
ChromeLauncher Killing all Chrome Instances +9s
vue-instantsearch master ✗ ➜ usus render --url https://yarnpkg.com/en/package/vue-instantsearch --extractStyles true> vue-instantsearch.html
ChromeLauncher Waiting for browser. +0ms
ChromeLauncher Waiting for browser... +1ms
ChromeLauncher Waiting for browser..... +507ms
ChromeLauncher Waiting for browser.....✓ +2ms
ChromeLauncher Killing all Chrome Instances +8s
vue-instantsearch master ✗ ➜ usus render --url https://yarnpkg.com/en/package/vue-instantsearch --extractStyles=true> ~/Desktop/vue-instantsearch.html
ChromeLauncher Waiting for browser. +0ms
ChromeLauncher Waiting for browser... +1ms
ChromeLauncher Waiting for browser..... +513ms
ChromeLauncher Waiting for browser.....✓ +2ms
ChromeLauncher Killing all Chrome Instances +12s
vue-instantsearch master ✗ ➜ usus render --url https://yarnpkg.com/en/package/vue-instantsearch --inlineStyles=true> ~/Desktop/vue-instantsearch.html
ChromeLauncher Waiting for browser. +0ms
ChromeLauncher Waiting for browser... +1ms
ChromeLauncher Waiting for browser..... +510ms
ChromeLauncher Waiting for browser.....✓ +3ms
ChromeLauncher Killing all Chrome Instances +11s
Waiting n seconds is rather inefficient.
In addition to waiting mechanism, allow to signal completion of rendering using console.log
, e.g. wait for "ūsus-ready" message.
Hi
İ get an error on node js.
I install babel-node for runnig server
I do same steps in here
https://github.com/babel/example-node-server
Then i had an error that says await is reserved word.
I'm new in babel. So i don't know solve problem
.. which is the LTS (still recommended for most users):
→ usus --url http://gajus.com
/home/alessio/.nvm/versions/node/v6.9.4/lib/node_modules/usus/dist/bin/commands/render.js:72
const handler = exports.handler = async argv => {
^^^^
SyntaxError: Unexpected identifier
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at Object.require (internal/module.js:20:19)
at /home/alessio/.nvm/versions/node/v6.9.4/lib/node_modules/usus/node_modules/require-directory/index.js:76:17
at Array.forEach (native)
Equivalent to #1
See notes:
https://github.com/gajus/usus/blob/3edef93496971e329024aa1856babcd4cc15f453/src/usus.js#L42-L64
Inline <noscript>
CSS import fallback.
See:
https://github.com/gajus/usus/blob/3edef93496971e329024aa1856babcd4cc15f453/src/usus.js#L155
ūsus can parse the CSS, find the fonts used, and preload the fonts using rel=preload
.
<link rel="preload" href="/assets/myfont.woff" as="font">
There can be two options:
rel=preload
to HTMLIt could be something like:
whatever-program-to-read-sitemap http://gajus.com | usus generate-css-usage-report
Using inlineStyles
I noticed you inline the 'critical' CSS in a <style>
block in the <head>
and then <link>
the complete, non-critical, CSS file right above </body>
(so as not to block rendering).
Another good pattern is to use rel=preload
in the head for this non-critical CSS file and then load it with JS. A good explanation (and JS utility) can be found in LoadCSS by the Filamentgroup.
Adding a loadCSS
script might be out of scope, but it might be good to document (README?) this usage with extractStyles
.
inlineStyles
could actually do half the work by also adding a <link rel="preload" href="org-stylesheet.css" as="style">
.
I noticed extractStyles
and inlineStyles
does not produce any pseudo classes. E.g. a:hover
was left out.
I realize this is all not usus
specific (but CSS Coverage) but I was wondering why. Also: for critical styles I would expect these to be included.
It would be great if it was possible to pass down custom chrome settings (like --no-sandbox
) without having to create and maintain the actual Chrome instance itself.
I may be mistaken, but this module seems to work fine with node 6? However, when I try to install it with yarn
, I get the following error:
error [email protected]: The engine “node” is incompatible with this module. Expected version “>6".
The engines definition in my project is the following:
"engines": {
"node": "^6.10.3"
},
Is this just a matter of changing the package.json
in this repo to allow 6? It would be nice to not force all our engineers to use --ignore-engines
!
alessio: /home/alessio/www/tmp
→ usus render --url http://gajus.com/
ChromeLauncher Waiting for browser. +0ms
ChromeLauncher Waiting for browser... +1ms
ChromeLauncher Waiting for browser..... +521ms
ChromeLauncher Waiting for browser.....✓ +1ms
/home/alessio/.nvm/versions/node/v8.1.3/lib/node_modules/usus/dist/bin/index.js:15
throw error;
^
Error: 'CSS.takeCoverageDelta' wasn't found
at /home/alessio/.nvm/versions/node/v8.1.3/lib/node_modules/usus/node_modules/chrome-remote-interface/lib/chrome.js:90:30
at Chrome.handleMessage (/home/alessio/.nvm/versions/node/v8.1.3/lib/node_modules/usus/node_modules/chrome-remote-interface/lib/chrome.js:289:13)
at WebSocket.<anonymous> (/home/alessio/.nvm/versions/node/v8.1.3/lib/node_modules/usus/node_modules/chrome-remote-interface/lib/chrome.js:266:27)
at emitTwo (events.js:125:13)
at WebSocket.emit (events.js:213:7)
at Receiver._receiver.onmessage (/home/alessio/.nvm/versions/node/v8.1.3/lib/node_modules/usus/node_modules/ws/lib/WebSocket.js:143:54)
at Receiver.dataMessage (/home/alessio/.nvm/versions/node/v8.1.3/lib/node_modules/usus/node_modules/ws/lib/Receiver.js:385:14)
at extension.decompress (/home/alessio/.nvm/versions/node/v8.1.3/lib/node_modules/usus/node_modules/ws/lib/Receiver.js:354:40)
at _inflate.flush (/home/alessio/.nvm/versions/node/v8.1.3/lib/node_modules/usus/node_modules/ws/lib/PerMessageDeflate.js:279:12)
at afterWrite (_stream_writable.js:438:3)
at onwrite (_stream_writable.js:429:7)
at afterTransform (_stream_transform.js:102:3)
at TransformState.afterTransform (_stream_transform.js:75:12)
at Zlib.callback (zlib.js:485:5)
alessio: /home/alessio/www/tmp
→ node -v && npm -v
v8.1.3
5.0.3
This can be happen when loading YouTube player, showing ads, etc.
There are users that want to inline the styles used on the page and avoid loading the rest of the styles entirely.
Hi!
when I run usus without any flag the output has all my styles inlined, which is undesirable as my html files grows up to 5000 LOC.
Shouldn't inline styling be disabled by default? Am I doing something wrong? I wrapped usus in a webpack plugin, but I'm just running it like this, nothing fancy
const Usus = require('usus')
Usus.render('someUrl')
thanks for your time!
I'm not sure how usus
(CSS Coverage, really) classifies styles as 'critical'.
Most other tools, I believe, look at the styles needed to render the first screen (above the fold) of content.
usus
seems to take more styles as critical?
Is there a way to call usus
to obtain a single stylesheet with "critical" CSS for all possible viewport sizes, and mobile and retina options?
Motivation: We don't know the client's viewport size on the server side, so the critical CSS should include the necessary CSS for all viewport sizes.
I've posted this question to Stackoverflow but still no luck :
Maybe this is not directly related to "usus", but have no luck Google for the answer.
Question : How can I access
.html
file which have been created byrender()
function ofusus
increate-react-app
public folder/public/
I'm wondering how @gajus make this >> https://go2cinema.com/movies/baywatch-2017-1198354
Long Question here : https://stackoverflow.com/questions/48426119/how-to-open-raw-html-html-in-react-public-folder
Need a logo for ūsus. Something simple; might refer to Chrome and CSS.
can we get a way to actually save this rather than just copying from the console
Hello. Is there any way to provide some custom event that will indicate that page is loaded? For example, by setting some variable or firing custom event?
As an example you may refer to chrome-render
lib (https://github.com/gwuhaolin/chrome-render):
useReady: boolean whether use window.isPageReady=1 to notify chrome-render page has ready. default is false chrome-render use domContentEventFired as page has ready.
It is somewhat described in the article https://medium.com/@gajus/pre-rendering-spa-for-seo-and-improved-perceived-page-loading-speed-47075aa16d24. However, a simple chart would help a lot to the users.
Hello, thanks for the work you do: it's great!
But I have an issue I hope you help with:
Is there a convenient way to rewrite relative paths in url()?
The critical css is placed in head section and relative paths copied from css files are usually broken due to the files are located in different path than index.php or something?
At the moment this is what I get:
… it would be really helpful to add all parameters and options. Preferably you would add a couple of usage examples as you do in the readme
A lower-level API should allow to control when to start Chrome and kill it, as opposed to restarting the app on every request. This would allow more scalable use cases.
The lower-level API should expose a direct access to Chrome components.
While this works great with the terminal example (it returns the desired HTML), I'm not sure how this can be implemented on, say a basic express app, where I want the crawlers to get the prerendered HTML for SEO purposes. One or two examples as to how to implement this would be awesome!
Other than that the project seems great!
Hi Gajus, I cannot thank you enough for this project.
I'm trying to detect if a crawled page responds with a statusCode different than 200 for SEO reasons, is that possible / will be possible?
hey,
your project inspired me, but my usecase is a bit out of scope, so I created my own package...
However, I found out, that CSS.takeCoverageDelta()
doesn't include the media queries for a rule.
I tinkered a bit and outsourced the resulting parser in a separate package coverage-delta-parser. Feel free to use or copy, it is rather small..
c:\Temp\render>usus render --url http://myreactsite.com
C:\Users\me\AppData\Roaming\npm\node_modules\usus\node_modules\bluefeather\dist\map.js:9
const map = async (values, mapper, configuration) => {
^
SyntaxError: Unexpected token (
at createScript (vm.js:56:10)
. . .
node --version
v6.10.2
Probably just need to define the version of node required (v7+) in the dependencies
This could be seen as a user error, but I noticed that inlineStyles
basically duplicated my already-inline styles.
For my site I have all styles as an inline style block in the head. So no external <link>
.
usus render --url https://valuedstandards.com/ --inlineStyles true > valuedstandards.html
.. will result in duplicate <style>
blocks in the <head>
:-)
Again: this might be to be expected since I should not have used inlineStyles
, but it would be neat if this could be caught.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.