WordPress
Sometimes browsing a website that has only been partly
optimised will result in a white flash of unstyled content
loading when a page is viewed. This is also referred to as a flash of
unstyled content (FOUC). After the flash, the styled content quickly
loads but the experience is jarring to a user and can make the
website feel unfinished. This is caused when ‘critical CSS’ is
deferred by accident to attempt to prevent render-blocking. Critical
CSS are the styles needed to render the page correctly when a
user first loads the page. Once critical CSS has been identified, it
should be made exempt from any deferring techniques and
allowed to block the DOM.
How do you get your critical CSS? You need to examine the
above the fold content – the content a user can see without
scrolling down the page – and identify what CSS needs to load in
order for the page to render with this content fully styled. This is
then extracted into its own CSS file, or in some cases inlined into
the document. There are many online tools and even WordPress
plugins that will do this automatically, although you’ll find most of
them are currently paid tools.
Once the critical path CSS has been loaded, the rest of the
styling for the website can be loaded asynchronously and a user’s
perceived performance of the website will increase, even though
the page still takes the same amount of time to load in entirety.THE WHITE FLASH
IN-DEPTHThere is no right or wrong option out of the many
available but the Breeze plugin (https://wordpress.
org/plugins/breeze/) bundles many of these features
cleanly into one and in this instance, works directly
with the server hosting the website.
Install and activate the plugin and head to the
Settings page, on the first tab tick the Cache system.
Minify HTML, CSS, and JS
If the website being worked on is live, make sure
to minify on a staging website as the options can
occasionally cause problems at first.
Minification is the process of removing the
characters in code that makes the code tidy and
human-readable and also reduces the size of the
page. Breeze is perfect for this. On the Settings page,
tick the Minification button for HTML, CSS and JS.
Save the changes and clear the current cache by
hovering over the Breeze button at the top of the
screen and select ‘Purge all Cache’. The changes
can now be seen by opening the website in a new
tab. Check to make sure everything works and then
re-run the PageSpeed tests. An instant jump in
performance should be seen.
If problems do occur and some JavaScript breaks
or an element doesn’t render correctly, inspect the
element in the developer tools to try and find which
resource is not working. Once you have an idea of
what stylesheet or script is causing the problem,
head to the Advanced tab of the Breeze settings and
paste the link to the offending script in the Exclude
CSS or Exclude JS option (depending on the filetype).
This stops that file from being minified and should
fix the problem at the expense of some performance.
DEFER JAVASCRIPT
Live chat, analytics and tracking tools can bundle
large JavaScript files that add seconds to the
time a page takes to become interactive. Add the
Defer attribute to these scripts so that they aren’t
executed until the DOM has finished loading. This
can be done from the Breeze settings under the
Above The infamous white flash is effectively a page of unstyled content. This is
because the CSS has been deferred and hasn’t loaded yet“Live chat, ana ly tics and
tracking tools can
bundle large JavaScript
Ľohv#wkdw#dgg#vhfrqgv#wr#
the time a page takes to
become interactive”