Web Performance

[danielmrey]

Hi Simon:

As you know I am a bit obsessed with Web Performance , at the moment we have:

- 2 CSS files: this is fine

bootstrap.min.css (21 Kb) progenitor.css (1Kb)

- 8 JS files: This is a bit much for a starter theme no?... can we reduce some? it is now 336 KB in total... Imagine when people add plugins... Let's see which functionalities we must keep, which ones we can live without and which ones we can leave for people to decide easily (commented or uncommented depend on the default we want to leave)

These 2 JS go together and are to do with Font Awesome, people use this Font but let's figure out another way so we do not need to have such a huge JS file:

config.js (1Kb) = A tiny file, necessary only if you want to use font Awesome on ::before and ::after pseudo elements = this must must come before Font Awesome == that is why I have it as a separate file all.js (277 Kb) = This is my main worry!

These are a must, so we keep them (they have to be minimised always):

jquery.min.js (30Kb) = Necessary popper.min.js (7Kb) = Necessary bootstrap.min.js (13Kb) = Necessary bootstrap-4-wp.js (1Kb)= Necessary for adding Bootstrap classes to form fields and input buttons (This is there instead of Progenitor master JS)

These 2 can be put in a way so people can add or remove, but as these 2 files are not too big, we can leave them, so forget this:

wp-embed.min.js (1Kb) = For video = I have a code to remove this (could be commented) modernizr.min.js (5Kb) = For old browsers = This could be commented

My main worry is all.js (277 Kb) the rest can stay if you want!

Thank you.

[SimonPadbury]

If you remove all.js then FONT AWESOME is gone. Then remove all the <i></i> throughout the code too, and simplify.

[danielmrey]

I would like to remove all.js (because is a big file) but I wouldn't like to remove fontawesome (because people use it)

So I am looking for alternatives.

In your old BST you had the glyphicons fonts, so we could add a fonts folder and add the fontawesome and load them in CSS

Going to try that

Thanks.

[danielmrey]

I am going to revert my changes until we come up with a better idea...

[danielmrey]

How can we add the Fontawesome just with a local CSS + Local fonts?

[SimonPadbury]

Glyphicons was in Bootstrap 3 but abandoned it, so that it is not in Bootstrap 4. Why go back? Where are you going to get glyphicons.css from?

Maybe it would be better to download Font Awesome 5 and obtain the 35KB file fontawesome-all.min.css and host it within Progenitor -- and then host all the webfonts too. But then you would have to continuously update all these files in Progenitor, and also it would mean the our users would would be serving multiple fonts and CSS instead of one 277 KB JS.

And the 277 KB JS may be already in their cache, because served for many other websites they already visited, no?

[SimonPadbury]

See edited reply above.

[danielmrey]

Ok I understand...

I was looking in how to do it here: https://fontawesome.com/get-started/web-fonts-with-css

By downloading fontawesome-all.css (34Kb) and /webfonts/fonts-files (XKb) but I think you are right maybe are less Kbytes to load, and all.js is only one file and it is maybe also cached... Is just that 277Kbytes just for fonts seems to me like a lot

So let's leave this for now...

Just removed some rules that I added in main CSS

Can you remove the whole /fonts folder and files?

Thanks

[danielmrey]

See edited reply above.

[danielmrey]

According to this: https://fontawesome.com/

There are 2 ways:

• https://fontawesome.com/get-started/svg-with-js loads a JS: https://use.fontawesome.com/releases/v5.0.6/js/all.js (656Kb but yours is 277Kb)

• https://fontawesome.com/get-started/web-fonts-with-css loads a CSS: https://use.fontawesome.com/releases/v5.0.6/css/all.css (34Kb)

Can we use the CSS way as it loads less bytes?

Thanks

[danielmrey]

See edited reply above.

[SimonPadbury]

Check inside the 34KB file.

Does it link to fonts online, or do you need to host them?

Will 34KB + those fonts >= 277KB ?

And instead of having one (277KB) file, you now have multiple files (34KB + those fonts). How is that better performance?

On 20 Feb 2018, at 15:13, danielmrey notifications@github.com wrote:

According to this: https://fontawesome.com/get-started/svg-with-js https://fontawesome.com/get-started/svg-with-js There are 2 ways:

https://use.fontawesome.com/releases/v5.0.6/js/all.js https://use.fontawesome.com/releases/v5.0.6/js/all.js (656Kb but yours is 277Kb) https://use.fontawesome.com/releases/v5.0.6/css/all.css https://use.fontawesome.com/releases/v5.0.6/css/all.css (34Kb) Can we use the CSS way as it loads less bytes?

Thanks

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Progenitor-Theme/progenitor/issues/20#issuecomment-367008779, or mute the thread https://github.com/notifications/unsubscribe-auth/AFTFpXz3QwpwYR8xvaVV1d8BszZwisj9ks5tWuEYgaJpZM4SLxal.

[danielmrey]

The CSS loads all fonts like this:

url(../webfonts/fa-brands-400.eot)

so it loads them via CDN right?

Here all code that loads the fonts:

@font-face{font-family:Font Awesome\ 5 Brands;font-style:normal;font-weight:400;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:Font Awesome\ 5 Brands}@font-face{font-family:Font Awesome\ 5 Free;font-style:normal;font-weight:400;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-weight:400}@font-face{font-family:Font Awesome\ 5 Free;font-style:normal;font-weight:900;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:Font Awesome\ 5 Free}.fa,.fas{font-weight:900}

[danielmrey]

I understand your arithmetics + more file requests...

But I don't think you load all the fonts, but the ones that the browser needs...

Mayebe we can leave this for later and leave for now your single JS file of 277Kbytes... and do some research in future...

Thanks.

[SimonPadbury]

so it loads them via CDN right?

No, it needs them from a sub folder within the website itself. It is not looking elsewhere.

[danielmrey]

But the CSS loads the URLs as relative: ../webfonts

And as the CSS is in CDN, does this ../webfonts loads the fonts in CDN or in Local?

According to the website you only need to load that absolute URL in your website, and din't say anything about loading fonts in local... so that makes me think that it loads the fonts in CDN... no?

[SimonPadbury]

The 34KB CSS file was from the download. Try this all.css CDN instead, if you still don't like the JS form the CDN. But then you still have all the webfonts as separate files to count in your performance obsession.

https://fontawesome.com/get-started/web-fonts-with-css

[danielmrey]

Hi Simon:

I have created 2 pages with this code:

Fonts via CSS: http://www.danielmrey.com/lab/fonts/css.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Fonts CSS</title>
  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>
  <i class="fab fa-facebook"></i>
  <i class="fab fa-twitter"></i>
</body>
</html>

Fonts via JS: http://www.danielmrey.com/lab/fonts/js.html

...same code...
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
...same code... 

Online tests:

Fonts via CSS: https://tools.pingdom.com/#!/cY4LON/http://www.danielmrey.com/lab/fonts/css.html 63.4 KBytes

Fonts via JS: https://tools.pingdom.com/#!/cWXD0a/http://www.danielmrey.com/lab/fonts/js.html 278.4 kBytes