diff --git a/add-on/src/lib/ipfs-client/index.js b/add-on/src/lib/ipfs-client/index.js
index 41542b53e..c7b69ecae 100644
--- a/add-on/src/lib/ipfs-client/index.js
+++ b/add-on/src/lib/ipfs-client/index.js
@@ -10,6 +10,7 @@ const browser = require('webextension-polyfill')
 const external = require('./external')
 const embedded = require('./embedded')
 const embeddedWithChromeSockets = require('./embedded-chromesockets')
+const { webuiCid } = require('../state')
 
 let client
 
@@ -32,7 +33,7 @@ async function initIpfsClient (opts) {
 
   const instance = await client.init(opts)
   easeApiChanges(instance)
-  _reloadIpfsClientDependents() // async (API is present)
+  _reloadIpfsClientDependents(instance) // async (API is present)
   return instance
 }
 
@@ -53,7 +54,8 @@ function _isWebuiTab (url) {
   return bundled || ipns
 }
 
-async function _reloadIpfsClientDependents () {
+async function _reloadIpfsClientDependents (instance, opts) {
+  // online || offline
   if (browser.tabs && browser.tabs.query) {
     const tabs = await browser.tabs.query({})
     if (tabs) {
@@ -66,6 +68,18 @@ async function _reloadIpfsClientDependents () {
       })
     }
   }
+  // online only
+  if (client && instance) {
+    if (webuiCid && instance.refs) {
+      // Optimization: preload the root CID to speed up the first time
+      // Web UI is opened. If embedded js-ipfs is used it will trigger
+      // remote (always recursive) preload of entire DAG to one of preload nodes.
+      // This way when embedded node wants to load resource related to webui
+      // it will get it fast from preload nodes.
+      log(`preloading webui root at ${webuiCid}`)
+      instance.refs(webuiCid, { recursive: false })
+    }
+  }
 }
 
 const movedFilesApis = ['add', 'addPullStream', 'addReadableStream', 'cat', 'catPullStream', 'catReadableStream', 'get', 'getPullStream', 'getReadableStream']
diff --git a/add-on/src/lib/state.js b/add-on/src/lib/state.js
index 6345727dd..b9fa09503 100644
--- a/add-on/src/lib/state.js
+++ b/add-on/src/lib/state.js
@@ -4,6 +4,10 @@
 const { safeURL } = require('./options')
 const offlinePeerCount = -1
 
+// CID of a 'blessed' Web UI release
+// which should work without setting CORS headers
+const webuiCid = 'QmYTRvKFGhxgBiUreiw7ihn8g95tfJTWDt7aXqDsvAcJse' // v2.4.7
+
 function initState (options) {
   // we store options and some pregenerated values to avoid async storage
   // reads and minimize performance impact on overall browsing experience
@@ -22,12 +26,11 @@ function initState (options) {
   state.gwURLString = state.gwURL.toString()
   delete state.customGatewayUrl
   state.dnslinkPolicy = String(options.dnslinkPolicy) === 'false' ? false : options.dnslinkPolicy
-  // store info about 'blessed' release of Web UI
-  // which should work without setting CORS headers
-  state.webuiCid = 'QmQNHd1suZTktPRhP7DD4nKWG46ZRSxkwHocycHVrK3dYW' // v2.4.6
+  state.webuiCid = webuiCid
   state.webuiRootUrl = `${state.gwURLString}ipfs/${state.webuiCid}/`
   return state
 }
 
 exports.initState = initState
 exports.offlinePeerCount = offlinePeerCount
+exports.webuiCid = webuiCid