Welcome to Centmin Mod Community
Register Now

centminmod.com Progressive Web App (PWA) conversion

Discussion in 'Centmin Mod News' started by eva2000, Jul 24, 2018.

Thread Status:
Not open for further replies.
  1. eva2000

    eva2000 Administrator Staff Member

    54,529
    12,212
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,781
    Local Time:
    7:01 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    FYI, switched centminmod.com to PWA enabled live operation now for some testing as outlined here. Give the site a whirl and see how it performs for 2nd/repeat visited pages and also offline mode (after at least loading page once to browser cache storage API) :D

    Chrome 67+ has support for PWA on desktop too PWA Coming to Chrome for Desktop

    From Chrome menu - Install Centmin Mod

    canary-centminmod.com-pwa-25718-01.png

    Clicking it prompts to install Centmin Mod site PWA app

    canary-centminmod.com-pwa-25718-02.png

    On install, Centmin Mod site pops up as a Windows 10 native app

    canary-centminmod.com-pwa-25718-03.png

    Also shows up in Windows 10 menu :)

    canary-centminmod.com-pwa-25718-04.png

    As a native Windows 10 app, you can pin Centmin Mod PWA to taskbar or Start menu like any other app :D

    canary-centminmod.com-pwa-25718-05.png

    centminmod.com opened up as a native Windows 10 app


    canary-centminmod.com-pwa-25718-06.png
     
    Last edited: Jul 25, 2018
  2. eva2000

    eva2000 Administrator Staff Member

    54,529
    12,212
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,781
    Local Time:
    7:01 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    On Samsung Galaxy S7 Android 8 Chrome browser

    pwa-centminmod-android-chrome-01b.jpg pwa-centminmod-android-chrome-02b.jpg
    pwa-centminmod-android-chrome-03b.jpg
     
  3. eva2000

    eva2000 Administrator Staff Member

    54,529
    12,212
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,781
    Local Time:
    7:01 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    So far the PWA conversion + disabling Google Adsense page level ads has done wonders for site page load speed :) As expected disabling Google Adsense page level ads had a more dramatic impact on site page load times and the further away the country visitors are from USA base hosted centminmod.com site. There maybe slight differences due to centminmod.com now running behind Cloudflare with DNS round robin to 3 of my previously GeoDNS (Amazon Route53) based VPS in Los Angeles, Seattle and New Jersey - so visitors around the world will hit Cloudflare edge servers but those will need to communicate back to one of these 3 backend origin VPSes.

    This is Google Data Studio + Google Analytics source data based site page speed metrics for July 20th to July 27th (4am) period for desktop, mobile, desktop + mobile and for United States, Indonesia, Vietnam, India, China, Brazil, Germany, Russia, Singapore & Australia regions which are the most visited regions and also the first four countries are also the slowest for page load times. So the focus on these regions in terms of PWA conversion and the affects on site page load times is of most interest :)
    • July 24th - PWA switch
    • July 25th - disabled Google Adsense page level ads
    • July 26th - a lot of webpagetest runs and re-tuning of centminmod.com site for page speed including adding some pre-caching to PWA service worker.
    First separate break down of overall centminmod.com desktop and mobile site page speed metrics - of interest throughout will be average document content loaded and average page load times as conversion to PWA should improve these quite dramatically :D

    ga-data-200718-270718-01-desktop-mobile.png

    Next is centminmod.com site page speed metrics for Desktop + Mobile + Tablet so all traffic

    ga-data-200718-270718-01-desktop-mobile2.png
    Now the breakdown by country starting with United States

    ga-data-200718-270718-01-desktop-mobile-usa.png

    Then Indonesia and Vietnam

    ga-data-200718-270718-02-indonesia-vietnam.png

    Then India and China

    ga-data-200718-270718-02-india-china.png

    Germany and Russia - Russia had a spike again but early July 27th stats up to 4-5am mark. It could very well be due to centminmod.com doing Cloudflare DNS round robin to 3 USA based locations in Los Angeles, Seattle and New Jersey i.e. Russian visitors hitting further away New Jersey backend origin.

    ga-data-200718-270718-03-germany-russia.png
    Brazil and Singapore - no traffic yet for July 27th (4-5am)

    ga-data-200718-270718-04-brazil-singapore.png
    Australia - no traffic yet for July 27th (4-5am)

    ga-data-200718-270718-05-australia.png

    As a page speed addict, there will certainly be more tuning and optimisations - so lets see how things go over the long term. Especially in terms of Google PageSpeed Insight origin stats derived from CruX - Chrome User Experience Reports which get updated daily based on rolling monthly average :)

    If you'd like to comment on this, you can discuss this in my PWA thread here.
     
  4. eva2000

    eva2000 Administrator Staff Member

    54,529
    12,212
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,781
    Local Time:
    7:01 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    Guess which centmin mod site is getting the PWA conversion treatment eventually ;) :D

    I've setup a custom Xenforo usergroup which has the PWA enabled version of the forums configured so can test privately - excluding general visitors/members from PWA enabled version for now. If any forum member wants to help me test PWA enabled version of this forum, contact me via private conversation message and I'll add your member account to the PWA enabled usergroup as well No longer need usergroups, as forum members can enable PWA mode themselves via User Preference option :)

    opera-pwa-cmm-forums-01.png
     
    Last edited: Jul 29, 2018
  5. eva2000

    eva2000 Administrator Staff Member

    54,529
    12,212
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,781
    Local Time:
    7:01 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    Looking good so far for this forum's PWA conversion

    centminmod-forums-pwa-270718-02-tn.jpg centminmod-forums-pwa-270718-05-tn.jpg

    Both Centmin Mod site and forum's PWA app will have it's own app window so has it's own app history separate from Chrome app.

    Samsung Galaxy S7 app history

    centminmod-forums-pwa-270718-01-tn.jpg
     
  6. eva2000

    eva2000 Administrator Staff Member

    54,529
    12,212
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,781
    Local Time:
    7:01 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+

    Forum PWA User Preference Option Added



    Update for this forum's PWA conversion and testing. Instead of enabling PWA at the XF usergroup level, I have made a new forum User Preference Checkbox Option. You can enable this option for up to 40% faster page load times. PWA development is currently ongoing but eventually PWA will be enabled forum wide.

    When you check the box, the next web browser reload will register the service worker (sw.js) in the web browser and from that point forward, your forum browsing sessions will be PWA based.

    centminmod-forums-pwa-preference-option-01.png

    centminmod-forums-pwa-preference-option-01b.png

    In web browser Developer tools -> Application -> Service Workers you will see sw.js service worker being registered.

    centminmod-forums-pwa-preference-option-02.png

    Take note of the far right 'Unregister' service worker link. You will need to use that if you want to disable PWA mode for the forums by going to User Preferences and unchecking Enable PWA mode for forums + clicking Unregister service worker link in web browser Developer tools -> Application -> Service Workers section.

    Give PWA mode a try and see if you can notice a difference in page load speeds (especially on repeat visits) :D

    Example of forum PWA app installed on my Samsung Galaxy S7

    s7-app-03-tn.jpg s7-app-01-tn.jpg
    s7-app-02-tn.jpg
     
  7. eva2000

    eva2000 Administrator Staff Member

    54,529
    12,212
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,781
    Local Time:
    7:01 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    Checking in on my centminmod.com site PWA conversion's page speed improvements. Looking very good comparing before PWA conversion versus after PWA conversion

    Google Analytics segment for PWA is for only pages loaded within native 'Add To Home Screen' launched browsing.
    • All Users - 55.14% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads
    • Desktop - 51.58% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads
    • Mobile - 69.6% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads
    • PWA - 53.5% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads than All Users
    before PWA conversion July 1 - 23, 2018

    ga-centminmod.com-290718-before-pwa-01.png

    after PWA conversion July 24 - 29, 2018

    ga-centminmod.com-290718-after-pwa-01.png

    Just drilling down for China based traffic shows huge improvements in page load speed after PWA conversion

    ga-centminmod.com-290718-after-pwa-china-01.png
    ga-centminmod.com-290718-after-pwa-china-02.png
    ga-centminmod.com-290718-after-pwa-china-03.png

    Another way to view before and after stats is to focus just on frequent user sessions which have more than 2 pageviews per session
    • All Users - 48.7% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads
    • Desktop - 41.1% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads
    • Mobile - 70% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads
    • PWA - 41.9% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads than All Users
    frequent user sessions before PWA conversion July 1 - 23, 2018

    ga-centminmod.com-290718-frequent-before-pwa-01.png

    frequent user sessions after PWA conversion July 24 - 29, 2018

    ga-centminmod.com-290718-frequent-after-pwa-01.png

    If you haven't guessed it yet, I love my numbers/stats. So here's more before and after stats taken from my Google Data Studio reports based on Google Analytic numbers. Breakdown of before and after sub-continent average document loaded and average page load times :)

    before PWA conversion July 1 - 23, 2018

    g-datastudio-centminmod.com-before-01.png

    after PWA conversion July 24, 2018

    g-datastudio-centminmod.com-after-01.png
     
    Last edited: Jul 29, 2018
Thread Status:
Not open for further replies.