Huge performance boost and easy to configure

  • Biggest speed improvement is when I added navigation pre-load filter:

    add_filter( 'wp_service_worker_navigation_caching_strategy', function() {
    return WP_Service_Worker_Caching_Routes::STRATEGY_STALE_WHILE_REVALIDATE;
} );

add_filter( 'wp_service_worker_navigation_caching_strategy_args', function( $args ) {
    $args['cacheName'] = 'pages';
    $args['plugins']['expiration']['maxEntries'] = 50;
    return $args;
} );

    Resulting in sub 200ms page load time!

    I’m also using it to cache images, css, js.

    Easy to update manifest as well through filter:

    function get_manifest_update( $manifest ) {
	/*
	 $manifest = array(
		'name'      => wp_kses_decode_entities( get_bloginfo( 'name' ) ),
		'start_url' => home_url( '/' ),
		'display'   => 'minimal-ui',
		'dir'       => is_rtl() ? 'rtl' : 'ltr',
	); */

	// Add argument to $manifest array
	$manifest['start_url'] .= 'en/page/support/';
	$manifest['short_name'] = 'My App';
	$manifest['name'] = 'Full name of app';
	return $manifest;
}

add_filter( 'web_app_manifest', 'get_manifest_update' );

    Hopefully this will be added to WP core soon! Thanks for making it easy to implement service workers with hooks as well, great way to introduce Devs to PWA!

Viewing 10 replies - 1 through 10 (of 10 total)

  • Very cool, great to see progress on PWAs. What is your Lighthouse Score after enabling the module compared to before?

    Thread Starter Lukasz

    (@wpfed)

    I should of made note of that since I don’t remember previous numbers but..

    Page load times as low as 160ms !

    I don’t remember what the score was but now it is about 88 for performance and I have a full PWA badge. I sometimes reach 93 score but depends on server and how optimized everything is of course.

    I think more important than the numbers is how it feels, there’s no wait time in between, the pages load instantly, feels like a native app.

    I should also add I’m using instant.page plugin, which “uses just-in-time preloading — it preloads a page right before a user clicks on it.”

    For someone new to this plugin, what exactly did you configure after installing? I installed it and there are no setting, nothing changed on my mobile device.

    Plugin Author Weston Ruter

    (@westonruter)

    @mddsharp the configuration is in code. See the description above.

    Alternatively, here is another plugin you can use to do the configuration for the caching strategy: https://gist.github.com/westonruter/1a63d052beb579842461f6ad837715fb

    You activate that plugin alongside the PWA plugin to make use of its APIs.

    It’s probably something which should be integrated directly into the PWA plugin. We’ve not done so yet because we were waiting to look for common patterns for configuration of the service worker. That plugin is pretty much the most common baseline integration I think.

    @westonruter OK, I have the PWA plugin installed and activated, and the caching strategy plugin installed and activating.

    I then visited my site on my mobile device using Chrome and got nothing to install on my home screen.

    Here is my lighthouse report

    https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fccountync.com%2F&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa&utm_source=lh-chrome-ext

    Plugin Author Weston Ruter

    (@westonruter)

    @mddsharp Failures:

    * Manifest does not have a PNG icon of at least 192px,
    * Manifest does not have short_name,
    * Manifest does not have name.

    Make sure you create a PNG to use for the Site Icon.

    The ‘name’ is derived from the Site Title. Is that empty on your site?

    The ‘short_name’ shouldn’t be required. See: https://github.com/GoogleChrome/lighthouse/issues/10044

    But you can supply one via code:

    add_filter( 'web_app_manifest', function( $manifest ) { $manifest['short_name'] = 'Carteret NC'; return $manifest; } );

    @westonruter OK TY working now. Lighthouse still says I have a performance issue, not sure what to do about that, I am behind Cloudflare and have it set to cache everything.

    Now when you said I could add:

    add_filter( ‘web_app_manifest’, function( $manifest ) { $manifest[‘short_name’] = ‘Carteret NC’; return $manifest; } );

    Which file exactly?

    And given the above code by Luke, what file is that added to? Where to define the start URL?

    Plugin Author Weston Ruter

    (@westonruter)

    This code goes best into a custom plugin on your site. Alternatively, it can go in your theme’s functions.php if it’s a theme that you have made yourself.

    You can just put a file like wp-content/plugins/pwa-config.php and then at the top put:

    <?php
/*
 * Plugin Name: PWA Config
 */

    and then put the code after that.

    You can then activate this plugin in the WordPress admin.

    The start URL is automatically set to be the home URL.

    OK perfect, I am assuming the code above by Luke is already handled by the caching strategy plugin you sent me:

    add_filter( ‘wp_service_worker_navigation_caching_strategy’, function() {
    return WP_Service_Worker_Caching_Routes::STRATEGY_STALE_WHILE_REVALIDATE;
    } );

    add_filter( ‘wp_service_worker_navigation_caching_strategy_args’, function( $args ) {
    $args[‘cacheName’] = ‘pages’;
    $args[‘plugins’][‘expiration’][‘maxEntries’] = 50;
    return $args;
    } );

    Plugin Author Weston Ruter

    (@westonruter)

    Correct. The plugin code is an alternative to what Luke provided. They should not both be added.

    Also, there is a complication when using the stale-while-revalidate strategy that you need to be aware of which is not present when using the network-first strategy.

    @wpfed FYI: https://github.com/GoogleChromeLabs/pwa-wp/issues/237#issuecomment-580490670

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Huge performance boost and easy to configure’ is closed to new replies.