Remove roboto font from elements for faster page load

[AndreasGalster]

I am currently working on a website and page speed is not sufficient. I'm currently looking at all the resources being loaded and trying to optimize. I've noticed I'm loading the roboto font which take a huge load of the loading time and I'm not even using roboto since I'm using my own fonts.

Is there an option to remove roboto from being loaded with paper elements without having to manually remove the roboto font in the individual paper-element font imports? This adds almost 4 seconds of loading time to my site and that's not even in production online.

[JosefJezek]

https://github.com/PolymerElements/font-roboto-local

[addyosmani]

As @JosefJezek kindly pointed out, the font-roboto-local import is probably your best bet here.

[JosefJezek]

http://stackoverflow.com/questions/31441720/overriding-dependencies-in-bower-json-file

[notwaldorf]

We're looking at removing font-roboto from typography.html in the 2.0 version of elements, and requiring you to explicitly import it.

[AndreasGalster]

It would be a good idea to do something similar with colors.html. The amount of colors is just too many imported by default. People that don't use the color theme (our site for example) at all will have to import those colors for nothing. Currently we're importing colors.html but don't use any of those colors in our own elements, instead we defined our own colors based on the color pattern.

Maybe do something similar to how iron-icons does it, import one or two basic color schemes (e. g. google-blue and greyscale-shades) and the rest of it can be imported with colors-advanced-scheme.html or something like that.

[lorenzleutgeb]

I am having the same issue. My app does not use Roboto, but gold-email-input depends on paper-styles which in turn depends onfont-roboto thus adding completely unnecessary load time to my page.

Furthermore I'd argue that it is unacceptable for any user of this package to not be able to suppress cross-origin calls! E.g. what if I do not want my application to talk to Google's servers?

[Bamieh]

+1 needs to be removed, for now i exclude it during vulcanization.

[JosefJezek]

You can simple resolve this issue using bower flat dependency tree. Check out this line...
https://github.com/StartPolymer/progressive-web-app-template/blob/master/bower.json#L12

I am using empty roboto.html...
https://github.com/StartPolymer/empty-elements/blob/master/roboto.html

I define fonts in index.html...
https://github.com/StartPolymer/progressive-web-app-template/blob/master/index.html#L183

[lorenzleutgeb]

@JosefJezek That's a workaround, not a resolution of the original issue.

[AndreasGalster]

Also that workaround really kills time whenever you have to do a new build (guess you could automate it I guess but would be nicer to just have it removed).

@notwaldorf I recall some talks about version 2.0 of all the elements in the future. Do you have a roadmap and outline what you want to achieve for the 2.0 milestone? Not just for this one but in general. It would be interesting to see where you are going (not just at the Polymer summit please, I really hate the pre-summit 3 months no updates at all wait time) and how we can help out potentially in the future.

[notwaldorf]

/cc @tjsavage

[Bamieh]

@JosefJezek a much easier "workaround" would be to exclude it during vulcanization:

grunt.config.set('vulcanize', {
...
   stripExcludes : [
        'assets/bower_components/font-roboto/roboto.html',
        'assets/bower_components/iron-icons/iron-icons.html'
   ]
...

[AimForNaN]

I'd be happy if the async attribute were added to the link[rel="stylesheet"] element that loads the font.

[iSuslov]

Best solution for now:

1. Create .bowerrc file in the same folder where you have bower.json.
2. Add the following inside the file:

{
...
  "scripts": {
    "postinstall": "node -e \"require('fs').writeFileSync('bower_components/font-roboto/roboto.html', '')\""
  }
...
}

this will clean the contents of roboto.html after bower install
3) reinstall bower components

Another option:

1. Create .bowerrc file in the same folder where you have bower.json.
2. Add the following inside the file:

  "ignoredDependencies": [
    "font-roboto"
  ]

so .bowerrc will look something like this:

{

...

{
  "ignoredDependencies": [
    "font-roboto"
  ]
}

...

}

3. reinstall bower components, you will see in the console:

bower paper-styles#1 - 2 skipped font-roboto

Now you can run polymer serve.

To build without errors run this command before build:

mkdir bower_components/font-roboto/ && touch bower_components/font-roboto/roboto.html

[iSuslov]

@TrueFusion for your specific case postinstall script in .bowerrc will look like this:

{
...
  "scripts": {
    "postinstall": "node -e \"var fs=require('fs'); var f=fs.readFileSync('bower_components/font-roboto/roboto.html', 'utf8'); fs.writeFileSync('bower_components/font-roboto/roboto.html', f.replace(/link /, 'link async '))\""
  }
...
}

[jaichandra]

@notwaldorf is font-roboto remove from polymer 2.0 elements? or is this still pending.

[notwaldorf]

@jaichandra The 2.0 elements didn't have any true breaking changes (that weren't required by the hybrid port), so font-roboto is still there, as removing it would have been a breaking change

[hzmsrv]

so in the new year 2019 it still breaking the app and all element to jam in loading?
my app got 100%cpu because of it.