Navigate

8 Steps to Ideally Optimize WordPress Divi Core Web Vitals Now

8 Steps to Ideally Optimize WordPress Divi Core Web Vitals Now

Online Business | 0 comments

Optimize WordPress Divi Core Web Vitals

In a nutshell, these are the steps to take to speed up and optimize your WordPress Website. Keep reading for a detailed explanation of each step.

  1. Choose good web hosting
  2. Set up caching (WPEngine employs caching by default)
    • Cleanup and optimize WordPress database
    • Delete post revisions
    • Enable GZIP compression
    • Disable trackbacks and pingbacks
  3. Optimize JS and CSS files
    • As of Divi 4.10, this is built-in to the theme! Go to Divi Options > Performance, and enable
    • Asset CleanUp – only needed if converting a site to Divi and can’t disable plugins right away.
      • Remove third-party scripts:
        • YouTube Video
        • Google AdSense Ads
        • Facebook Like box
        • Instagram Widget
        • Disqus comments
        • Facebook conversion tracking pixel
        • Google Analytics
      • Reference: Third Party Performance
  4. Optimize images, plugins, and themes
  5. Use a CDN
  6. Design for accessibility
  7. Use a website speed test tool to assess the site:
  8. Address CLS

Choose Good Web Hosting

These are the hosts I have personal experience with that are highly recommended for WordPress sites with Divi, and in my professional environment, we recommend to our clients.

WPEngine
Siteground

Setup Caching

Disable Trackbacks and pingbacks

Trackbacks are a way to notify legacy blog systems that you’ve linked to them, and a pingback is a comment that is created when you link to another blog post where pingbacks are enabled. These can sound useful, but you can check these from Google Webmaster Tools, and if your site isn’t a blogging focused site, pingbacks are not necessary.

Go to WP-Admin → Settings → Discussion, and uncheck these:
Attempt to notify any blogs linked to from the post
Allow link notifications from other blogs (pingbacks and trackbacks) on new posts

Optimize JS and CSS files

The best way to do this is by removing unnecessary characters such as white space, new lines, comments, and block delimiters in HTML, JavaScript, and CSS files. This will reduce the size of the page kilobytes significantly.

Divi 4.10 introduced a massive performance upgrade that loads and processes only what’s needed on-demand on each page.

Divi can now automatically identify Critical CSS, defer non-critical styles and reduce the CSS output by combining duplicate styles. There are new options that automatically improve performance by caching and deferring various render-blocking requests and removing unneeded resources.

Optimize images, plugins, and themes

There are multiple ways you can optimize your images, including compressing images, adding alt text and titles, and creating an image sitemap. The best case scenario is to optimize your images before you upload them. I use a combination of Photoshop and Kraken.io to achieve this.

Remove inactive plugins and themes. It’s best practice to do this because it improves security, performance, and reduces complexity and confusion when other people work on the site.

Use a CDN

A Content Delivery Network or CDN is a network of servers that delivers cached static content from websites based on the geographic location of the user.

Design for Accessibility

According to The axe DevTools browser extension for Chrome, the benefits of building accessible sites include:

Better user experiences for all, including people with disabilities.
Expanded addressable market.
Reduced risk of accessibility-related lawsuits.
Search engine optimization.

Steps to achieve a 100 accessibility score result include making sure the site is in accordance with WCAG 2.0 guidelines. Install the plugin, check your color contrasts, make sure all images have alt text (this is also required for good SEO), and use headings in sequential order.

The Divi Accessibility plugin addresses many issues and corrects them:

Adds appropriate ARIA attributes
Improved keyboard navigation in menus
Fixes missing & incorrectly assigned labels
Makes modules such as Toggle & Accordion focusable and keyboard interactive
Adds a visual outline to focusable elements for keyboard only navigation
Ability to change keyboard only outline color
Fixes Divi incorrectly using screen reader classes
Adds skip navigation link optimized for Divi markup
Hide icons from screen readers which can affect reading of text
Fix duplicate menu IDs
Tota11y integration

Performance Testing

The best way to monitor critical metrics of a website is to perform a series of audits utilizing various tools to measure the performance, SEO, and accessibility scores. You will want to monitor the improvements made when you optimize WordPress Divi core web vitals, and make adjustments accordingly. The top tools for this are the following:

Google Pagespeed Insights
WebPagetest
GTMetrix
Chrome UX Report

Address CLS (Cumulative Layout Shift)

In Divi, the root cause of Divi CLS is due to style adjustments you make to elements on your page. I have identified 3 key items to optimize WordPress Divi core web vitals that most directly reduce CLS.
  1. Styles
    • Do NOT make any style changes in the builder to elements above the fold (typically the site navigation & the page title hero section).
    • Define these styles in the Customizer CSS section. This code loads faster than the builder set styles. Rules added here are saved to the database and output as a block of code just before the body opening tag. Because they are further down the DOM, these take priority over the default css style sheet settings declared in the Divi default CSS style sheet. Styling you set in the Divi builder is output further down in the DOM, and take final priority. This sounds good, but it means that there is a delay and this is what causes the shift.
      • Tip: Apply a class to each section above the fold, to make it easier to target the CSS. For ex. I use these semantic classes typically:
        • .announcement-bar
        • .top-bar
        • .primary-menu-bar
        • .page-title
    • If you need something off-set, use the “Transform Translate” settings. Do not use negative margins.
    • Use responsive length units (vw and vh) to get the most accurate responsive style. It’s like percent but their value changes based on what size viewport (screen) is displaying the content.
  2. Fonts
    • Disable Google fonts, self-host site fonts, and preload them.
      • Tip: the article says to put fonts inside the child theme, but I suggest not to do that, because if the child theme is auto updated it will overwrite any added content. I put my fonts inside the WP-Content folder (ie. /wp-content/fonts/*font-file*.).
    • Use relative units (rem and em) on all fonts. Divi builder defaults to px, but this is not best practice for accessibility and responsiveness.
  3. Responsive Content
    • Make responsive pages – do not create hidden versions of content to show in different screen sizes. With CSS Flexbox, you can optimize any header or content for mobile. There are no excuses! Creating a single mobile-responsive layout is the best practice for optimizing ALL of your core web vital metrics, not just cumulative layout shift.

If you have questions, feel free to contact me and I’ll try to help.

Optimize Wordpress Divi Core Web Vitals

You may also like

Shea Shay

Shea Shay

I love to design digital planners and journals! My career is in UI / UX, so I have a vested interested in enhancing the customer experience in any way that I can. In my free time, you can find me knee-deep in a home improvement DIY project, or mixing up some cocktails - fun fact, I'm a licensed bartender!

0 Comments

Leave a Reply

Shea Shay

Shea Shay

May 16, 2021

I love to design digital planners and journals! My career is in UI / UX, so I have a vested interested in enhancing the customer experience in any way that I can. In my free time, you can find me knee-deep in a home improvement DIY project, or mixing up some cocktails - fun fact, I'm a licensed bartender!

Pin It on Pinterest