LCP Problem

Hello @pexel

I’m checking your web page with “Lighthouse,” and the issue you are reporting is not happening. Our plugin includes a style block to prevent the CLS issue. It calculates the form height for different screen sizes. Please check your webpage’s HTML source.

<style>@media (max-width:480px){#cp_calculatedfieldsf_pform_1{min-height:538px;}}@media (min-width:1024px){#cp_calculatedfieldsf_pform_1{min-height:520px;}}</style>

Please note you included your own block. Remove it and let only the block generated by the plugin.

Best regards.

Hello, we don’t have any issues with CLS, but we are experiencing a problem with LCP (Largest Contentful Paint), and I can’t figure out the cause. When I remove the form, the LCP value improves, but when I add the form, the LCP value increases. I consulted experts and conducted some research. The experts suggested that it might be caused by the plugin’s cache system not being properly cached in PageSpeed scores. Of course, this is just an assumption.

I wondered if there might be an issue with our system, so I set it up on a different site. With the default theme, there were no CLS-related problems, but the form still increased the LCP value. I genuinely don’t understand the reason, and I haven’t been able to resolve it yet. We are very satisfied with the plugin overall, but I believe feedback like this is beneficial for the health and improvement of the plugin.

Hello @pexel

Could you please include the iframe="1" attribute in the form shortcode and let me know if the issue persists?

https://cff.dwbooster.com/documentation#insertion-page

Best regards.

Hello,
I would like to address a two-part issue. First, I want to respond to your question from the initial message.

Yes, the system automatically detects height; however, it does not define automatic height for third-party sites using <iframe>. This is an improvement suggestion and would add significant value.

I have prepared a script that adjusts the height automatically even when third-party sites use iframes. It also prevents CLS issues. I am sharing the script below. If an improvement is implemented, I will remove this script from all my forms. It truly has practical benefits.

<script>function sendHeight(){setTimeout(()=>{window.top.postMessage({height:document.body.scrollHeight},"*")},100)}function handleMutation(t,e){for(var s of t)if("childList"===s.type&&s.addedNodes.length>0){if(document.querySelector(".card.cp_cff_custom-card")){sendHeight();break}}else"attributes"===s.type&&s.target.classList.contains("card")&&s.target.classList.contains("cp_cff_custom-card")&&sendHeight()}window.onload=function(){sendHeight()};const observer=new MutationObserver(handleMutation),config={childList:!0,subtree:!0,attributes:!0},targetNode=document.body;observer.observe(targetNode,config);</script>

At the very least, it would be sufficient for this code to work compatibly with yours, so it does not create a second style like the one below.

<style>@media (max-width:480px){#cp_calculatedfieldsf_pform_1{min-height:538px;}}@media (min-width:1024px){#cp_calculatedfieldsf_pform_1{min-height:520px;}}</style>

I am sharing the iframe code as follows. If your script can directly solve the automatic height issue on third-party sites without the need for my script, then my custom script might not be necessary at all.

<iframe id="pexpe" src="https://www.websitename.com/?cff-form=20" style="width:100%; height:875px; overflow: hidden; border: none;" scrolling="no"></iframe><script>let iframe=document.getElementById("pexpe");window.addEventListener("message",function(e){let message=e.data;iframe.style.height=message.height+20+"px";},false);</script>

The value in the height: 875px; part is calculated automatically.

When I remove the script I use in the third-party application, here is the visual I am sharing to illustrate the issue:

It creates a gap below the iframe and causes CLS issues on third-party sites.

However, when I add the script I provided above, it automatically adjusts the height as shown in the image below and eliminates CLS issues on third-party sites. It detects the height automatically on both mobile and desktop resolutions. This improves the reliability and user experience for those using our forms.

Now, turning to the LCP issue: I applied the iframe="1" code to the same calculation page, and you can check it in its current state. However, the LCP issue persists. I am now certain it is caused by the plugin.

Here’s why: I installed a fresh WordPress setup, added the plugin, and created a simple formula with a basic calculation theme. When I checked the PageSpeed scores, it still shows an LCP issue.

As I continued my research, I noticed something that might be contributing to the LCP issue, though I’m not entirely certain. The plugin’s JS and CSS files are not being cached according to Google metrics. This might be a factor causing the problem.

Of course, this is just a guess, and I can’t pinpoint the exact issue. To summarize:

1. Improvement: Addressing the compatibility and optimization concerns.
2. Solution: Resolving the LCP issue.

If these steps are achieved, the plugin will be near perfect. Let me be clear: one of my projects was penalized by Google due to the plugin. This, of course, is a rare occurrence but still significant. The site went from good traffic levels to being at the bottom. However, this is not your fault. By improving the plugin and addressing feedback like this, it will reach even greater potential. Your attention to feedback strengthens our respect and trust in your work.

• This reply was modified 3 months, 3 weeks ago by pexel.
• This reply was modified 3 months, 3 weeks ago by pexel.
• This reply was modified 3 months, 3 weeks ago by pexel.

Hello @pexel

The plugin is not designed to distribute forms to third parties from websites. If the form is generated on your website, and loaded via iframe in third-party websites, you must set the height as iframe attributes or you will have the CLS problem. If you want us to implement a specific solution to your business logic we can contact us through the plugin website (https://cff.dwbooster.com/customization)

Regarding LCP. The plugin renders the form on the client side (the browser). If you want to solve the LCP issue, you have some alternatives. You can activate the form cache to render it on the server side (it is available on the commercial plugin options), or you can use the iframe attribute as I recommended previously. Watch its impact on the LCP in the following video:

https://resources.developers4web.com/cff/tmp/2024/11/25/video_o.mp4

Or finally, you can move the form outside the viewport not at the top of your web page.

Best regards.

Hello,
We resolved the first issue with our own script, but I shared it with you in case it could be improved. There’s no issue, as it’s a custom script I already use myself.

The critical problem is LCP. We don’t experience LCP issues on desktop; as you’ve seen in the video, desktop values are fine. The issue arises with mobile values, where we face LCP problems.

Thank you!

Hello,

I continued my research throughout the night and came to the following conclusion. When we add iframe="1" as you suggested, there is partial improvement. However, when I check the site using Google’s Rich Results tool, the Google bots are unable to see the calculator tool on the page. When I remove the iframe="1" tag, the Google bots can see the tool again. The issue seems to be with the mobile side. When I check using Lighthouse, there’s no issue, but when we look at it through PageSpeed, the problem appears. I can’t seem to come up with a solution, but it’s clear that there is an issue. Anyway, if there’s nothing else that can be done, we will continue this way. The reason I keep focusing on this issue is to avoid getting hit by a Google algorithm penalty in a new project.

Thank you.

Hello @pexel

I’ll try to describe it again for your understanding.

The plugin renders the forms in the browser, not in the server. So, the form will be generated in the page rendering process. If you want to get form rendered from the server, you must activate the form cache in the plugin settings. However, this feature is part of the commercial plugin distributions.

If you prefer continue using the free plugin version, you have two alternatives: you can load the form into an iframe by including the iframe attribute in the form shortcode, in whose case the form would not be considered by Google. Or you can insert the form outside the default viewport. For example, if the there is texts or other elements on the page, and then the form outside the viewport area.

Best regards.