Xamarin Forms: WebView loading time is very high

Question

I am using WebView for loading websites in my project. It is loading websites but very slow. It takes around 10 to 15 seconds to load this site.

I try a solution from this thread. I have added android:hardwareAccelerated="true" on the manifest under application level, but no luck.

For iOS and Windows the solution is below: But I don't know how to create the custom render.

In iOS, try to use WKWebView instead of UIWebView. For the UWP, use Windows.UI.Xaml.Controls.WebViewcontrol instead of using the built-in Xamarin WebView control.

Can I get the sample custom renderer for iOS and Windows-like above?

Lucas Zhang Lucas Zhang · Accepted Answer · 2020-10-21T09:22:41

It is loading websites but very slow

The speed of loading website will up to lots of causes . For example, it will consume a lot of time if the web contains many remote css/js file . And it will also up to network performance .

The link that you provided loads slow even if on browser on my side . It contains lots of remote css if we check the source code.

For Android , We can create an custom renderer webview to accelerate it.

Set Render Priority to hight.
Enable the dom storeage.
When Loading the html, we can disable the image showing, when loading finished, load the image by Control.Settings.BlockNetworkImage.
Enable the Cache, if you load it at the nexttime, you can load it quickly.

[assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(MyWebviewRender))]
namespace MyWebviewDemo.Droid
{
    public class MyWebviewRender : WebViewRenderer
    {
        public MyWebviewRender(Context context) : base(context)
        {
        }
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);
            Control.Settings.JavaScriptEnabled = true;
            Control.Settings.SetAppCacheEnabled(true);
            Control.Settings.CacheMode = Android.Webkit.CacheModes.Normal;
            Control.Settings.SetRenderPriority(RenderPriority.High);
            Control.Settings.DomStorageEnabled = true;
            Control.Settings.BlockNetworkImage = true;
            Control.SetWebChromeClient(new MyWebChromeClient());
        }
    }
    internal class MyWebChromeClient : WebChromeClient
    {
        public override void OnProgressChanged(Android.Webkit.WebView view, int newProgress)
        {
            base.OnProgressChanged(view, newProgress);
            if (newProgress == 100)
            {
                // webview load success

                //  //  loadDialog.dismiss();
                view.Settings.BlockNetworkImage=false;
            }
            else
            {
                //  webview loading
                //  loadDialog.show();
            }
        }
    }
}

In iOS, try to use WKWebView instead of UIWebView. For the UWP, use Windows.UI.Xaml.Controls.WebViewcontrol instead of using the built-in Xamarin WebView control.

In your case it will only have less improve even if using above solution . You could add an ActivityIndicator during the loading . If you can access the website , it would be better to download the css file to local and loading them in ContentPage .

Xamarin Forms: WebView loading time is very high

1 Answers