unl / wdntemplates

The UNLedu Web Framework (WDN Templates) – Coordinated by the Web Developer Network
https://wdn.unl.edu
35 stars 32 forks source link

Header flashes during load #1257

Open ncolgrove opened 5 years ago

ncolgrove commented 5 years ago

During page load header styles flash. Fonts appear to change and the Nebraska "N" will flash purple at times. Screenshots of the progression are attached. Video of the interaction is available at the box links below. Video samples were taken from two different machines, both Chrome browsers.

Video Links: https://unl.box.com/s/t4033n1x768yjpre6eg6tbt5dglx0k7h https://unl.box.com/s/k3stcu6y2yle13si0jgimbyry3yzasre

headerflashes-cropwatch-screenshot- mov 2019-01-03 10-02-31

headerflashes-cropwatch-screenshot- mov 2019-01-03 10-01-34

headerflashes-cropwatch-screenshot- mov 2019-01-03 10-01-48

headerflashes-cropwatch-screenshot- mov 2019-01-03 10-02-03

skoolbus39 commented 5 years ago

Nic, I just submitted a pull request that should remove the flash of blue links as the page loads. In my opinion, this is the most jarring aspect of the page load.

We will continue to work on minimizing the flash of unstyled content as the page loads (particularly in the hero region), but won't remove it altogether. It's recommended by Google. However, on subsequent page loads, I would like to see the critical CSS removed and cached CSS file loaded instead.

I've found these articles helpful on the subject: