search

balaramadurai / hugo-travelify-theme

Port of Aigars Silkalns's Wordpress theme Travelify to Hugo. Demo -
http://balaramadurai.github.io
MIT License
39 stars 27 forks source link

The theme shows incomplete formatting for a split second every time a page is being loaded #6

Closed anthonyfok closed 6 years ago

anthonyfok commented 6 years ago

Hello!

First of all, thank you very much for bringing such a beautiful theme to Hugo! It is a indeed a very nice and full-featured theme!

There is a problem though: there is a rather noticeable (about 200ms to 300ms?) where the page shows incomplete CSS formatting (?) like the following when loading http://balaramadurai.github.io/about/ in both Chrome and Firefox:

travelify_incomplete_formatting_during_loading

It can be reproduced, for example, by simply clicking on the About link in the menu repeatedly, and the incomplete formatting is shown each time. It is distracting enough that some users might shy away from your otherwise beautifully crafted theme.

The original WordPress theme at https://colorlib.com/travelify/ does not seem to suffer from this issue.

Thanks again for your wonderful work!

Anthony

HowdyMcGee commented 6 years ago

I'm not the author but I can't replicate this in a normal WordPress install. What I can tell is for whatever reason the styles are loading at the bottom of your page instead of in the <head> area where you would expect them / should be loading. I don't think this is a theme issue but an implementation issue.

balaramadurai commented 6 years ago

@anthonyfok and @HowdyMcGee , thank you for taking the time to report to me this issue.

I have minified the css now and also moved it to the <head>. It seems to take care of the problem. The reason the css moved into the footer was that I was getting a low score on performance in the Google tool. The suggestion was to move it below the "fold". Now, with this issue, I have realized that the "main" css alone is moved above the "fold" and the rest can stay in the footer. I guess this solves this issue.

@anthonyfok , thanks for your kind words about the theme 😃

anthonyfok commented 6 years ago

Thanks @HowdyMcGee! It does seem to point to the way #2 (above the fold) was fixed back in July 2017.

But I see @balaramadurai is busy at work, and the so-called "ugly loading" problem is now mostly solved. (Thank you @balaramadurai!) Though I wonder if the Ubuntu font could be loaded earlier too so that we don't see the headers changing from one font to another:

<link rel='stylesheet' id='google_font_ubuntu-css'  href="//fonts.googleapis.com/css?family=Ubuntu" type='text/css' media='all' />

I am wondering if the CSS stuff could all go instead <head></head>, whereas all JavaScript stuff are to be loaded at the very end?

(Sorry, I am very new to this, hehe.)

Many thanks!

balaramadurai commented 6 years ago

Thank you @anthonyfok 👍 . Thanks for troubleshooting the problem of the "dancing font". Worked out well! Now, it looks reasonable. I checked the Google test as well. This theme passed 😄

Yes, this one is an improvement on #2