locked
Xamarin Forms: How to reduce the WebView loading time? RRS feed

  • Question

  • User351573 posted

    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?

    Wednesday, October 21, 2020 8:21 AM

Answers

  • User379860 posted

    First of all, there are too much remote javascript in you url. it will waste lots of times to load it.

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

    1. Set Render Priority to hight.
    2. Enable the dom storeage.
    3. When Loading the html, we can disable the image showing, when loading finished, load the image by Control.Settings.BlockNetworkImage.
    4. 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 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();
            }
        }
    }
    

    } ```

    Here is first running GIF.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, October 21, 2020 9:26 AM
  • User379860 posted

    Yes, we could add a alert when loading to increase user experience. Here is running GIF.

    ``` [assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(MyWebviewRender))] namespace MyWebviewDemo.Droid { public class MyWebviewRender : WebViewRenderer { Context context; public MyWebviewRender(Context context) : base(context) { this.context = context; } protected override void OnElementChanged(ElementChangedEventArgs 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(context));

        }
    }
    internal class MyWebChromeClient : WebChromeClient
    {
        Android.App.AlertDialog.Builder dialog;
       AlertDialog alert;
    
        public MyWebChromeClient(Context context)
        {
    
    
            dialog = new AlertDialog.Builder(context);
            alert = dialog.Create();
    
            alert.SetMessage("loading...");
    
    
    
        }
        public override void OnProgressChanged(Android.Webkit.WebView view, int newProgress)
        {
            base.OnProgressChanged(view, newProgress);
            if (newProgress == 100)
            {
    
    
                   alert.Dismiss();
    
                view.Settings.BlockNetworkImage=false;
            }
            else
            {
                alert.Show();
    
            }
        }
    }
    

    } ```

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, October 21, 2020 10:59 AM

All replies

  • User379860 posted

    First of all, there are too much remote javascript in you url. it will waste lots of times to load it.

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

    1. Set Render Priority to hight.
    2. Enable the dom storeage.
    3. When Loading the html, we can disable the image showing, when loading finished, load the image by Control.Settings.BlockNetworkImage.
    4. 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 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();
            }
        }
    }
    

    } ```

    Here is first running GIF.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, October 21, 2020 9:26 AM
  • User351573 posted

    @LeonLu I have tried the custom renderer. But no big change :/

    Wednesday, October 21, 2020 10:31 AM
  • User379860 posted

    Yes, we could add a alert when loading to increase user experience. Here is running GIF.

    ``` [assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(MyWebviewRender))] namespace MyWebviewDemo.Droid { public class MyWebviewRender : WebViewRenderer { Context context; public MyWebviewRender(Context context) : base(context) { this.context = context; } protected override void OnElementChanged(ElementChangedEventArgs 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(context));

        }
    }
    internal class MyWebChromeClient : WebChromeClient
    {
        Android.App.AlertDialog.Builder dialog;
       AlertDialog alert;
    
        public MyWebChromeClient(Context context)
        {
    
    
            dialog = new AlertDialog.Builder(context);
            alert = dialog.Create();
    
            alert.SetMessage("loading...");
    
    
    
        }
        public override void OnProgressChanged(Android.Webkit.WebView view, int newProgress)
        {
            base.OnProgressChanged(view, newProgress);
            if (newProgress == 100)
            {
    
    
                   alert.Dismiss();
    
                view.Settings.BlockNetworkImage=false;
            }
            else
            {
                alert.Show();
    
            }
        }
    }
    

    } ```

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, October 21, 2020 10:59 AM