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

[4.0] Use preload instead of prefetch alternative #34890

Merged
merged 9 commits into from
Sep 4, 2021

Conversation

dgrammatiko
Copy link
Contributor

Pull Request for Issue # .

Summary of Changes

Prefetch = load an asset for the next navigation (this is very low priority)
Preload = load an asset with higher priority for the current page

In short, proload is what is needed for the css (color, fonts)

This PR is essentially is implementing basically the https://css-tricks.com/the-fastest-google-fonts/ with some extras:

  • the webfont will also be available even if Javascript is disabled (the same thing I did for font awesome)

  • the preload is done in the actual headers of the response

  • Inlined the CSS Properties for all the fonts

  • The code is written in a way that a custom google font URL can be used (not exposed to UI, but a simple input and a toggle button will do the trick)

  • There are changes in the SQL that are not automatically applied

  • There are SCSS files that were deleted

Testing Instructions

Apply the PR, and make sure to save the Cassiopeia default style!!!
Check all the fonts and the loading (preferably by emulating a very slow connection)

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Documentation Changes Required

@joomla-cms-bot joomla-cms-bot added NPM Resource Changed This Pull Request can't be tested by Patchtester PR-4.0-dev labels Jul 24, 2021
@brianteeman
Copy link
Contributor

for what I thought were fairly obvious reasons the fonts can not be loaded directly from google in the default template.

@dgrammatiko
Copy link
Contributor Author

for what I thought were fairly obvious reasons the fonts can not be loaded directly from google in the default template.

I kinda remember #30914 😄

@brianteeman
Copy link
Contributor

as it is right now it cant be accepted.

@dgrammatiko
Copy link
Contributor Author

as it is right now it cant be accepted.

Then all the Google (or any other remote source) based fonts need to be completely removed as the implementation is totally bs. Wrong usage of prefetch, extra imports, etc it's a disaster...

@brianteeman
Copy link
Contributor

If the site is behind a firewall then loading a font from google or a script from a cdn will not work
If the site is in Germany then they are saying that accessing google fonts is a GDPR breach.

To the best of my knowledge there are no assets being used by core, by default, that are being loaded from an external source.

If a site owner wants to use scripts from a cdn or fonts from google then that is their choice but it can not be the default.

This discussion has been held numerous times and I really dont want to repeat it.

@richard67
Copy link
Member

As far as I can see, stuff from Google would only be loaded if one has selected a fonts scheme in template settings which uses Google, but not if "None" or "Roboto (local)" are used, as far as I can see, so that should not be different to what we have now.

But if you select a local fonts scheme, the change here hardcodes the font family to "Roboto". That means if someone adds another local font scheme in his or her template copy, he or she has to edit code in the 4 PHP files, while now it just needs to add another (s)css at a special place, which does the includes. It might not be nice like it is now, but it was easier to maintain than it will be with the changes here.

@dgrammatiko
Copy link
Contributor Author

But if you select a local fonts scheme, the change here hardcodes the font family to "Roboto".

I could restore the values in the scss for local and adjust the if/else, fixable

@dgrammatiko
Copy link
Contributor Author

@richard67 local fonts now declare their css vars using the scss/css file.

@richard67
Copy link
Member

It might need some time until I can test that because I'm currently fighting with another issue with the extensions installer for my latest PR.

@dgrammatiko
Copy link
Contributor Author

@wilsonge a quick decision here?

@richard67
Copy link
Member

No need to hurry, if it is not in tomorrow it will be in next time for sure. From review it looked ok to me, but I haven't found time yet for testing.

@RickR2H
Copy link
Member

RickR2H commented Aug 12, 2021

@dgrammatiko I tested the PR but for some reason the web fonts don't work. On the other hand Roboto local is working like before.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34890.

@dgrammatiko
Copy link
Contributor Author

@richard67 can you share the request header for those pages?

@RickR2H
Copy link
Member

RickR2H commented Aug 12, 2021

@dgrammatiko FYI the font is loaded in the Chrome inspector network tab but not applied. Probably a CSS issue?


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34890.

@dgrammatiko
Copy link
Contributor Author

FYI the font is loaded in the Chrome inspector network tab but not applied. Probably a CSS issue?

@RickR2H it should be fine now

@RickR2H
Copy link
Member

RickR2H commented Aug 12, 2021

I have tested this item ✅ successfully on 2faaca4

javascript:


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34890.

@RickR2H
Copy link
Member

RickR2H commented Aug 12, 2021

Never mind the comment 😉


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34890.

@RickR2H
Copy link
Member

RickR2H commented Aug 12, 2021

I have tested this item ✅ successfully on 8158b88

Works better 😄


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34890.

@jwaisner
Copy link
Member

I have tested this item ✅ successfully on 8158b88


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34890.

@jwaisner
Copy link
Member

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34890.

@joomla-cms-bot joomla-cms-bot added RTC This Pull Request is Ready To Commit and removed PR-4.0-dev labels Aug 24, 2021
@dgrammatiko
Copy link
Contributor Author

@bembelimen can I have a decision here?

@bembelimen
Copy link
Contributor

bembelimen commented Sep 3, 2021

As it's targeting 4.0 it's still @wilsonge call, but in my opinion the preload approach is correct, so in general: yes we should go for it.
Two things has to be fixed:

  • the PHP code needs a bit of cleanup (I can help you with that when the rest is done)
  • Loading directly from Google could really be an issue in Germany the EU. So at least we should offer a local solution beside the online one.

(Last but not least I'm in general not happy about the inflexible way of setting the fonts in the core templates, it's rather hard to implement own fonts, but that's an issue for another PR I guess)

@dgrammatiko
Copy link
Contributor Author

Loading directly from Google could really be an issue in Germany the EU. So at least we should offer a local solution beside the online one.

I'm really not sure what you mean here, Brian also mentioned that before. Let me explain that this PR is not changing anything fundamental here. Before this PR there was an @import that was pointed at Google's Font CDN. All this PR is doing is eliminating that extra CSS file and importing the CSS directly from the CDN (eg one less round trip to the server). Also, the local option is still there, I didn't change that.

About the So at least we should offer a local solution beside the online one.:

I had a draft PR for localizing the G-Fonts #30914 but people were against it (btw WP is doing that)...

@richard67
Copy link
Member

I'm really not sure what you mean here, Brian also mentioned that before. Let me explain that this PR is not changing anything fundamental here. Before this PR there was an @import that was pointed at Google's Font CDN. All this PR is doing is eliminating that extra CSS file and importing the CSS directly from the CDN (eg one less round trip to the server). Also, the local option is still there, I didn't change that.

I fully confirm that this PR changes nothing on the local fonts option and in case of web fonts where they come from, it just eliminates the extra CSS. For the issue with loading web fonts from Google and privacy regulations we have that yellow hint below the "Fonts Scheme" field in the template style's advanced options.

@bembelimen
Copy link
Contributor

Loading directly from Google could really be an issue in Germany the EU. So at least we should offer a local solution beside the online one.

I'm really not sure what you mean here, Brian also mentioned that before. Let me explain that this PR is not changing anything fundamental here. Before this PR there was an @import that was pointed at Google's Font CDN. All this PR is doing is eliminating that extra CSS file and importing the CSS directly from the CDN (eg one less round trip to the server). Also, the local option is still there, I didn't change that.

My bad, didn't check the deleted files.

Here are some PHP suggestions: dgrammatiko#3 otherwise it's good to go 👍

@bembelimen bembelimen merged commit cabe406 into joomla:4.0-dev Sep 4, 2021
@joomla-cms-bot joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label Sep 4, 2021
@bembelimen
Copy link
Contributor

Thx

@bembelimen bembelimen added this to the Joomla 4.0.3 milestone Sep 4, 2021
@dgrammatiko dgrammatiko deleted the 4.0-dev-preload-alt branch September 4, 2021 08:51
@dgrammatiko
Copy link
Contributor Author

@richard67 shall I leave the db changes for the update to you or do you want me to try a fix?

@richard67
Copy link
Member

@richard67 shall I leave the db changes for the update to you or do you want me to try a fix?

@dgrammatiko Let me do it. I know you can do it, too, but there might be other change being merged before the next release which require files and folder to be deleted, too, and I could that into 1 PR.

@richard67
Copy link
Member

#35478 for the deleted files.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
NPM Resource Changed This Pull Request can't be tested by Patchtester
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants