gajus / usus Goto Github PK

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?

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

It could be something like:

whatever-program-to-read-sitemap http://gajus.com | usus generate-css-usage-report

Need to write tests for Chrome rendering.

There are users that want to inline the styles used on the page and avoid loading the rest of the styles entirely.

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!

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.

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.

.. 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)

Don't send SPAM emails, I never shared my email address for any marketing!!!

ū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:

• remove font loading from extracted CSS altogether (because some don't consider it part of the critical path);
• remove font loading from the extracted CSS and add rel=preload to HTML

Idea thanks to #20 and #8 discussions.

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

Gist of the output here and live on rawgit

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.

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.

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!

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!

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..

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">.

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.

can we get a way to actually save this rather than just copying from the console

Need a logo for ūsus. Something simple; might refer to Chrome and CSS.

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 by render() function of usus in create-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

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.

Inline <noscript> CSS import fallback.

See:

https://github.com/gajus/usus/blob/3edef93496971e329024aa1856babcd4cc15f453/src/usus.js#L155

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.

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

This can be happen when loading YouTube player, showing ads, etc.

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

See notes:

https://github.com/gajus/usus/blob/3edef93496971e329024aa1856babcd4cc15f453/src/usus.js#L27-L40

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?

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?

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.

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.

Equivalent to #1

See notes:

https://github.com/gajus/usus/blob/3edef93496971e329024aa1856babcd4cc15f453/src/usus.js#L42-L64