diff --git a/public/preload/view.js b/public/preload/view.js
index acfe07df..744aaf50 100644
--- a/public/preload/view.js
+++ b/public/preload/view.js
@@ -15,10 +15,12 @@ const { MenuItem, shell } = remote;
 
 window.global = {};
 
-// eslint-disable-next-line no-console
-console.log('Preload script is loading...');
+let handled = false;
+const handleLoaded = (event) => {
+  if (handled) return;
+  // eslint-disable-next-line no-console
+  console.log(`Preload script is loading on ${event}...`);
 
-const handleLoaded = () => {
   const loadDarkReader = () => {
     const shouldUseDarkColor = ipcRenderer.sendSync('get-should-use-dark-colors');
     const darkReader = ipcRenderer.sendSync('get-preference', 'darkReader');
@@ -220,16 +222,16 @@ const handleLoaded = () => {
   }
   // eslint-disable-next-line no-console
   console.log('Preload script is loaded...');
+
+  handled = true;
 };
 
-// https://stackoverflow.com/a/39993724
+// try to load as soon as dom is loaded
+document.addEventListener('DOMContentLoaded', () => handleLoaded('document.on("DOMContentLoaded")'));
+// if user navigates between the same website
+// DOMContentLoaded might not be triggered so double check with 'onload'
 // https://github.com/atomery/webcatalog/issues/797
-if (document.readyState !== 'loading') {
-  // document is already ready, just execute code here
-  handleLoaded();
-} else {
-  document.addEventListener('DOMContentLoaded', handleLoaded);
-}
+window.addEventListener('load', () => handleLoaded('window.on("onload")'));
 
 // Communicate with the frame
 // Have to use this weird trick because contextIsolation: true
diff --git a/src/components/dialog-preferences/index.js b/src/components/dialog-preferences/index.js
index c13b8636..fd864157 100644
--- a/src/components/dialog-preferences/index.js
+++ b/src/components/dialog-preferences/index.js
@@ -1050,23 +1050,6 @@ const Preferences = ({
         </Typography>
         <Paper elevation={0} className={classes.paper}>
           <List dense disablePadding>
-            <ListItem>
-              <ListItemText
-                primary="Use hardware acceleration when available"
-              />
-              <ListItemSecondaryAction>
-                <Switch
-                  edge="end"
-                  color="primary"
-                  checked={useHardwareAcceleration}
-                  onChange={(e) => {
-                    requestSetPreference('useHardwareAcceleration', e.target.checked);
-                    requestShowRequireRestartDialog();
-                  }}
-                />
-              </ListItemSecondaryAction>
-            </ListItem>
-            <Divider />
             <ListItem>
               <ListItemText
                 primary="Hibernate unused workspaces at app launch"
@@ -1102,6 +1085,23 @@ const Preferences = ({
               <ListItemText primary="CSS Code Injection" secondary={cssCodeInjection ? 'Set' : 'Not set'} />
               <ChevronRightIcon color="action" />
             </ListItem>
+            <Divider />
+            <ListItem>
+              <ListItemText
+                primary="Use hardware acceleration when available"
+              />
+              <ListItemSecondaryAction>
+                <Switch
+                  edge="end"
+                  color="primary"
+                  checked={useHardwareAcceleration}
+                  onChange={(e) => {
+                    requestSetPreference('useHardwareAcceleration', e.target.checked);
+                    requestShowRequireRestartDialog();
+                  }}
+                />
+              </ListItemSecondaryAction>
+            </ListItem>
           </List>
         </Paper>