Frontpage Patterns

[designerbrent]

As we have worked to further refine the homepage of Adventist.org and optimize it for WebVitals, we are finding some challenges with the patterns introduced in this PR #425

1. Background image is making an extra call to the server for the pattern. Can this be moved locally to the Wordpress theme?
2. High CLS, I think, when the fonts load or the background image loads around 1.5-1.9 seconds
3. Reducing file sizes. I'm wondering if we can move the styles out to a separate CSS file that only gets called on the homepage of the Adventist.org theme.

[designerbrent]

here is the GTMetrix report: https://gtmetrix.com/reports/www.adventist.org/DozdGtFt/

[designerbrent]

Here is a similar report for the ALPS Page: https://gtmetrix.com/reports/alps.adventist.io/7wFcfh2L/

(I don't expect this one to be amazing, as I know many things are getting pulled that aren't optimized, however the CLS is still showing on the ::after tag, so that may be the issue triggering it.)

[kelscahill]

@designerbrent After looking into increasing performance, I made a few updates in ALPS PL, as well as the AORG child theme. See the PR's below. Also, based on the GTMetrix report a performance plugin will dramatically increase that score. With a performance plugin you can defer JS and Lazy Load Images. One that we use at Southleft is Perfmatters. You can check out the features here: https://perfmatters.io/features/

• ALPS: #425: Resized background image for performance. #526
• ALPS Wordpress AORG: https://github.com/adventistchurch/alps-wordpress-aorg/pull/2

[designerbrent]

Thanks for making these adjustments, @kelscahill. Those are great changes and I'll merge them tomorrow, hopefully.

One other thought: How much would it save on the main ALPS library to split out the front page styles into its own file that would get loaded just on those pages?

As for performance plugins, yes, I do run WP Rocket and that does help a lot. I haven't used PerfMatters but it looks similar to WP Rocket.

[designerbrent]

@kelscahill Have you had a chance to look at the ::after class issue with the CLS?

[kelscahill]

@designerbrent I reran the GMetrix test and looks like the site has an A now!

Since the score is so high, I don't see much value in separating the homepage css, but if we ever had to this website might be of value: https://unused-css.com/

The ::after could possibly be the grid on the background. I could try to force it never displaying only on the AORG child theme homepage. Let me know if this is still an issue.

[designerbrent]

I'm happy to see the A score for Desktop. However my only concern is Mobile right now, as Google is moving to only ranking based on mobile. Our mobile score is bad

Let's address the ::after issue, at least on the homepage. I don't think it is the grid, as Adventist.org doesn't use the grid. Please look deeper into this.

[designerbrent]

@kelscahill After further testing by disabling Javascript, I found that the flash of gradient that is causing problems is the gradient that shows comes from the gradient classes (u-theme--gradient--right and u-theme--gradient--left) inside c-testimonies-media. Once the Javascript loads, the gradient only applies to the c-testimonies-media block, but before that, it shows the full height of the l-main block.

In looking in to this more, I found that the class on the pattern of u-position--relative was misspelled as u-posititon--relative, not just on the homepage theme, but in the ALPS Core pattern and the ALPS Gutenberg Blocks pattern, as well.

I've fixed it in the Adventist.org theme and will get the fixes applied to the other projects soon.

[kelscahill]

@joslemmons See Brent's comments above.

[designerbrent]

@kelscahill and @joslemmons I'm going to close this ticket now, as I think we have addressed the issues at hand, either through the changes that happened here or via server improvements.