Friends1st is a Christian dating site.

I was tasked with building the new home page and some 10 new internal pages.  As the site had hundreds of pages with legacy content, all built in Divi, we had to stick with that theme.

The design, from Studio 1, involved long pages with many features that tested the limits of Divi.  These features included:

  • Several different fonts and inline color changes
  • Specific line breaks for Desktop and mobiles
  • Foreground images overlay-ed on gradient backgrounds with exact requirements for positioning
  • A self-hosted video with an Image overlay
  • Several Popups, including exit intent Popups
  • Several Links to Infusionsoft signup pages
  • Several sliding Testimonials, each with different layouts for desktop and mobiles.

Even with optimum image sizing, compression and conversion to WEBP the home page size was over 6MB.

The CSS and Javascript files became large and complex.  Because of the overall load time, it exposed the weakness of inline Divi CSS.

Native Divi styling creates inline CSS that loads last, after the CSS files. With a large page such as this, the file based CSS is loaded first, and once the page loads, the inline Divi CSS changes the file based CSS.  The page loads slowly and by the time the inline CSS loads it changes the styles creating a flashing effect called FOUC (Flash Of Unstyled Content). 

There are several potential solutions for this, such as using Autoptimize to inline all CSS.  This only worked to a small extent.  The best solution was to create a class for every Divi element and to create the CSS manually in the CSS files to emulate the native Divi inline CSS.  This proved to be an enormous task which is still not complete.

The problem with the page builder’s inline CSS is not unique to Divi.  It will be a problem with any page builder on large and complex pages with other page builders like Elementor, Visual Composer, etc.