mobile rendering iOS

Hello @jamestrueman,

For troubleshooting, please do the following steps and let me know the results:

1- Head over to WP Dashboard > Plugin.
2- Deactivate all plugins.
3- Then, first activate the Ocean Extra plugin.
4- Check your issue.
5- Then, activate your plugins one by one
6- After activation of any plugins, check your issue

Note: if you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes.

Also, please tell us a little about the versions of plugins you use. To do this, please go to WP Dashboard > Tools > Site Health > Info Tab and click on the button Copy site info to clipboard. You can send the information as code here or upload them to https://pastebin.com/ and get an exclusive link.

Please keep us posted.

Best Regards

Hi Shahin

I deactivated all plugins (which are listed below) and did a full purge of Cloudflare CDN. i then checked this in an uncached incognito browser window and these changes did not change the rendering issue at all in the affected devices / browsers.

AIOSEO
LiteSpeed Cache
Ocean Extra
SimpLy Gallery Block & Lightbox
Theme Editor
Total Upkeep
Wordfence Security
WP Reset

I forgot to mention that I had also noticed that the mobile menu does not work at all in these browsers / devices. Happy to supply details.

I have reactivated the plugins for now.

Apologies – here is the site health paste

https://pastebin.com/R19Jfd2d

Hello @jamestrueman,

There are two issues:

1. It’s a TTFB issue: https://i.postimg.cc/q7Zvc6hc/image.png.
Please read this article: https://web.dev/time-to-first-byte/.

2. Lazy load delayed loading images on your website, and the logo is included in the lazy load. You can exclude the logo from lazy load: https://i.postimg.cc/NfwfxcMn/image.png.

Regarding the website’s performance, please check this URL: https://gtmetrix.com/reports/trueman.org.uk/3AXi0GvE/ and this image: https://i.postimg.cc/59XnShG8/image.png.

https://i.postimg.cc/SRQXDbQC/image.png

Best Regards

Thanks Shahin

I am somewhat confused about the TTFB issue – particularly as the images are being compressed. I have re-exported/optimised these and will allow the optimisation processes in the plug in to further improve these. Furthermore, I do not have lazy load enabled in LiteSpeed?

I also need to address the mobile rendering of the site. Here is a different screenshot.

https://www.amazon.co.uk/photos/share/ei2iPkFD1VKG9eWhyrj6uXZsbTmyHVtvOOlkOiBRkzt

You will see in this image:

1) the header logo is not within the screen container
2) the footer shows the [oceanwp_date] shortcode – it does not render the date
3) (you cannot see) but the mobile menu does not work

I am working on this to improve performance – but would appreciate any further help you can offer

I have now replaced LiteSpeed with a different optimisation tool and removed AISEO – which seems to have improved performance.

I just now need to address the mobile rendering.

Many thanks

Hello @jamestrueman,

Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

@media(max-width:1024px) and (min-width:320px) {
    #site-header #site-logo #site-logo-inner a img,
    #site-header.center-header #site-navigation-wrap .middle-site-logo a img {
        max-width: 200px;
    }
}

Also, you can use OceanWP settings on customizer > Header > Logo: https://i.postimg.cc/yWqz6Xw8/image.png.

You can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/

Best Regards

Hi @skalanter

Many thanks for that help – worked like a charm. Are you able to advise on a solution for the mobile menu? Whilst the ‘main menu’ is fine in these older browsers, the ‘mobile menu’ does not respond on these older browsers (it just highlights as active)?

best regards

Hello @jamestrueman,

Sorry for the late reply.

I checked your website with an online service (simulator) to check your website in the old browser on all devices and could not see it on my end. Would you please share your system info(device name and version of the browser/which browser)?

Best Regards