Magento 2.4 - Prevent widget from loading on mobile

Question

We have an instagram widget on our site. Perfect for desktops - but very negative for the pagespeed score on mobile.

So I would like to prevent it from loading on mobile. Not hide it with {display:none;} (than it's still being loaded in the background)

A friend wrote this script for me, but that does not work.

 <script>
    let details = navigator.userAgent;

    let regexp = /android|iphone|kindle|ipad/i;

    let isMobileDevice = regexp.test(details);

    if (!isMobileDevice) {
        document.write("{{widget type="WeltPixel\InstagramWidget\Block\Widget\Instagram" instagram_api_type="basic_api" images_in_new_tab="1" images_per_row="col-5" images_have_padding="0" images_alt_text="1" images_have_caption="0" optimize_image_layout="1" enable_lazyload="1" limit="5" }}");
    } 
</script>

I added he widget code into this between the " ", but that does not work and gives "); } as output on all devices.

My friend is currently unavailable. Can someone help me solve this?

Answer 1

I think there is no need to write JavaScript code for it. This can be achieved using PHP also.

To detect that the website is being opened in mobile, I would do something like this:

// Create the function, so you can use it
function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

and then check:

if(!isMobile()){
    // Call your widget here
}

Note: The expression used in preg_match() may be old, so it may not work for some of the latest devices.

Please let me know if it helped.