home / front screen loading slow/incomplete (Audit please /rewriting our index.html. Etc.) #1803

ImprovedTube · 2023-10-24T08:25:48Z

Hi, our index.html includes 30 tiny files (css & js) and sometimes loads blank / white for up to 10 seconds.. ( - thats only if you test on an old machine with busy ram / IO. Still this should not happen at all. The html and css can appear and be rendered instantly. If any JS runs, that can be afterwards) - While this issues might "only" cost less than 100 000 * 0.x seconds in human time per day (still a lot), it still looks bad as a first impressions and might hold back the whole project the most. (even if more importantly the original author paid a lot of attention to optimize code running on YouTube)

For reproducing the error you can move <script> tags back to the <body>
( I assume the original author had the script tags in the <body> section not to block half the page from appearing already, however this step wasn't finsihed, because once the <div class="satus-base is inserted already, in the middle of the <body, then the remaining scripts (=buttons) wont appear anymore (hence for now i moved them all to the <head>452b0dc )

youtube/menu/index.html

Lines 14 to 44 in 79de20d

    
           <link rel="stylesheet" href="../js&css/satus.css"> 
        
           <link rel="stylesheet" href="styles/analyzer.css"> 
        
           <link rel="stylesheet" href="styles/appearance.css"> 
        
           <link rel="stylesheet" href="styles/player.css"> 
        
           <link rel="stylesheet" href="styles/blacklist.css"> 
        
           <link rel="stylesheet" href="styles/fonts.css"> 
        
           <link rel="stylesheet" href="styles/header.css"> 
        
           <link rel="stylesheet" href="styles/home.css"> 
        
           <link rel="stylesheet" href="styles/mixer.css"> 
        
           <link rel="stylesheet" href="styles/night-mode.css"> 
        
           <link rel="stylesheet" href="styles/search.css"> 
        
           <link rel="stylesheet" href="styles/settings.css"> 
        
           <link rel="stylesheet" href="styles/themes.css">		 
        
           <script src="../js&css/satus.js"></script> 
        
           <script src="index.js"></script> 
        
           <script src="skeleton.js"></script> 
        
           <script src="skeleton-parts/search.js"></script> 
        
           <script src="skeleton-parts/active-features.js"></script> 
        
           <script src="skeleton-parts/settings.js"></script> 
        
           <script src="skeleton-parts/night-mode.js"></script> 
        
           <script src="skeleton-parts/mixer.js"></script> 
        
           <script src="skeleton-parts/general.js"></script> 
        
           <script src="skeleton-parts/appearance.js"></script> 
        
           <script src="skeleton-parts/themes.js"></script> 
        
           <script src="skeleton-parts/player.js"></script> 
        
           <script src="skeleton-parts/playlist.js"></script> 
        
           <script src="skeleton-parts/channel.js"></script> 
        
           <script src="skeleton-parts/shortcuts.js"></script> 
        
           <script src="skeleton-parts/blacklist.js"></script> 
        
           <script src="skeleton-parts/analyzer.js"></script> 
        
           <script src="functions.js"></script>

thanks!

The text was updated successfully, but these errors were encountered:

biyacraft · 2023-10-25T23:09:40Z

Hey, I can do this task

ImprovedTube · 2023-11-19T02:45:19Z

hi! @Atesfahun awesome , looking forward! thanks for caring!
and sorry i missed the message yet.

(assignments aren't required or exclusive as it is still unlikely here that two people do the same thing at the same time)

AbhinavGoel9 · 2023-12-16T15:43:14Z

@ImprovedTube Got it, I've identified the optimizations needed. I'll be working on async/defer loading for scripts, potential stylesheet merging, and exploring preloading critical resources to enhance page loading speed.

ImprovedTube · 2023-12-17T03:38:06Z

thanks for caring @AbhinavGoel9! yes, we can have a build script for all CSS and JS to be in one script which should usually only save a few ms. not sure if am missing something.

ImprovedTube · 2023-12-18T02:55:21Z

thanks @AbhinavGoel9! sorry, not sure it helps. (this was undone: https://github.com/code-charity/youtube/pull/1857/files )

this is the only alert i get from the scripts: code-charity/SATUS#10

ImprovedTube · 2024-03-11T04:55:40Z

let me know if you see this again

raszpl · 2024-04-06T04:28:15Z

For reproducing the error you can move <script> tags back to the

Cant reproduce. Extension popup loads fine with all scripts in head and all scripts in body. But if there would be a problem here, it would be the other way around. Moving scripts to head would introduce a bug (browser stops parsing while executing the script, can execute before body is created), and moving them to body would fix it.
Another way to fix it would be combining all scripts into one .js file and loading it in head with async attribute.

The main thing that happens when you move scripts to head is you make the browser parse and execute them serially one after another before whole html document is loaded and interpreted. This means that

youtube/menu/index.html

Lines 3 to 4 in 7014a79

    
           <script src="satus.js"></script>	 
        
           <script src="index.js"></script>

is being executed before document.body exists at all. This means its possible for

youtube/menu/index.js

Line 25 in 7014a79

satus.render(extension.skeleton);

thus

youtube/menu/satus.js

Line 800 in 7014a79

this.append(element, container);

thus

youtube/menu/satus.js

Lines 267 to 268 in 7014a79

    
           satus.append = function(child, parent) { 
        
           	(parent || document.body).appendChild(child);

to also execute before document.body has been created and crash. This will be non deterministic and depend on system speed and browser used.
Hell, now that Im looking at it its probably even possible for

youtube/menu/index.js

Line 25 in 7014a79

satus.render(extension.skeleton);

to execute before all the other .js files loaded with contents of the menu - this could result in partially loaded menus.

( I assume the original author had the script tags in the section not to block half the page from appearing already,

keeping scripts in body ensured document.body already existed when executing satus.render()

however this step wasn't finsihed, because once the <div class="satus-base is inserted already, in the middle of the <body, then the remaining scripts (=buttons) wont appear anymore (hence for now i moved them all to the

Can you trigger this error, right click on the resulting non working extension popup, open devtools and copy whats in the console.log?

raszpl · 2024-04-06T04:40:08Z

Another way to fix it would be combining all scripts into one .js file and loading it in head with async attribute.

This is the best thing that can be done for fast nd reliable loading with no weird timing issues. Combining can be done during the build process, so source code in github looks just like now with everything separated into its own files, but extension ships with only one file called index.html containing <script> tag with concatenated contents of all of those:
functions.js index.js satus.js skeleton.js active-features.js analyzer.js appearance.js blocklist.js channel.js general.js mixer.js night-mode.js player.js playlist.js search.js settings.js shortcuts.js themes.js

raszpl · 2024-04-06T06:14:34Z

for example this will never have timing problems and will always load reliably:
menu.zip

all .css bundled in html, all .js bundled into one file. Optimally .js would be inlined, but that requires signed file in manifest so I didnt bother.

Trivial build script:

type index1.html > index.html

type satus.css >> index.html
type styles\home.css >> index.html
type styles\appearance.css >> index.html
type styles\search.css >> index.html
type styles\header.css >> index.html
type styles\sub-options.css >> index.html
type styles\analyzer.css >> index.html
type styles\blocklist.css >> index.html
type styles\fonts.css >> index.html
type styles\mixer.css >> index.html
type styles\settings.css >> index.html
type styles\themes.css >> index.html

type index2.html >> index.html

type satus.js > all.js
type skeleton.js >> all.js
type functions.js >> all.js
type skeleton-parts\search.js >> all.js
type skeleton-parts\active-features.js >> all.js
type skeleton-parts\settings.js >> all.js
type skeleton-parts\night-mode.js >> all.js
type skeleton-parts\mixer.js >> all.js
type skeleton-parts\general.js >> all.js
type skeleton-parts\player.js >> all.js
type skeleton-parts\appearance.js >> all.js
type skeleton-parts\shortcuts.js >> all.js
type skeleton-parts\channel.js >> all.js
type skeleton-parts\playlist.js >> all.js
type skeleton-parts\themes.js >> all.js
type skeleton-parts\blocklist.js >> all.js
type skeleton-parts\analyzer.js >> all.js
type index.js >> all.js

just requires index.html to be divided into two parts index1.html

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<title>ImprovedTube</title><style>body{width:320px;max-width:320px; margin:0; height:600px;max-height:600px;"}</style>
<style type="text/css">

index2.html

</style>
<script defer src="all.js"></script>
</head><body></body></html>

Also there is no need for "...asking your browser what settings you made here before..." to ever be present because there will never be any delay.

ImprovedTube added the bounty Will pass on donations (Optional) - (OR: Requester will pay personally. Only if stated!) label Nov 18, 2023

ImprovedTube assigned biyacraft Nov 19, 2023

ImprovedTube mentioned this issue Nov 27, 2023

📈🎉🤯Need contributors!(updates, prepared code, awesome roadmap 2025) #1586

Open

6 tasks

ImprovedTube closed this as completed Dec 7, 2023

ImprovedTube reopened this Dec 13, 2023

AbhinavGoel9 mentioned this issue Dec 17, 2023

feat: Optimize index.html for Improved Loading Performance #1891

Draft

ImprovedTube removed the important Critical or common. Thus to prioritize label Dec 19, 2023

ImprovedTube added Riddle and removed Structures (UX) & ORG Let's focus on structure! Everything should be as easily seen/found as or where it is relevant. labels Mar 11, 2024

ImprovedTube closed this as completed Mar 11, 2024

ImprovedTube changed the title ~~Audit please /rewriting our index.html. (Loading slow/incomplete). Etc.~~ front screen loading slow/incomplete (Audit please /rewriting our index.html. Etc.) Mar 11, 2024

ImprovedTube changed the title ~~front screen loading slow/incomplete (Audit please /rewriting our index.html. Etc.)~~ home / front screen loading slow/incomplete (Audit please /rewriting our index.html. Etc.) Mar 11, 2024

ImprovedTube mentioned this issue Mar 11, 2024

"v4.0" ToDo, finally merging Victor's latest work #1439

Open

13 tasks

ImprovedTube mentioned this issue Apr 5, 2024

Update satus.js correct Menu load timing problems #2160 #2163

Merged

raszpl mentioned this issue Apr 6, 2024

white empty menu screen. satus.js bug? language files denied? #2160

Open

ImprovedTube mentioned this issue Apr 21, 2024

Update core.js limit localstorage writes to only essential ones #2180

Merged

raszpl mentioned this issue May 6, 2024

Autplay not working. Ver 4.820 #2137

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

home / front screen loading slow/incomplete (Audit please /rewriting our index.html. Etc.) #1803

home / front screen loading slow/incomplete (Audit please /rewriting our index.html. Etc.) #1803

ImprovedTube commented Oct 24, 2023 •

edited

Loading

biyacraft commented Oct 25, 2023

ImprovedTube commented Nov 19, 2023

AbhinavGoel9 commented Dec 16, 2023

ImprovedTube commented Dec 17, 2023

ImprovedTube commented Dec 18, 2023

ImprovedTube commented Mar 11, 2024

raszpl commented Apr 6, 2024 •

edited

Loading

raszpl commented Apr 6, 2024 •

edited

Loading

raszpl commented Apr 6, 2024 •

edited

Loading

home / front screen loading slow/incomplete (Audit please /rewriting our index.html. Etc.) #1803

home / front screen loading slow/incomplete (Audit please /rewriting our index.html. Etc.) #1803

Comments

ImprovedTube commented Oct 24, 2023 • edited Loading

biyacraft commented Oct 25, 2023

ImprovedTube commented Nov 19, 2023

AbhinavGoel9 commented Dec 16, 2023

ImprovedTube commented Dec 17, 2023

ImprovedTube commented Dec 18, 2023

ImprovedTube commented Mar 11, 2024

raszpl commented Apr 6, 2024 • edited Loading

raszpl commented Apr 6, 2024 • edited Loading

raszpl commented Apr 6, 2024 • edited Loading

ImprovedTube commented Oct 24, 2023 •

edited

Loading

raszpl commented Apr 6, 2024 •

edited

Loading

raszpl commented Apr 6, 2024 •

edited

Loading

raszpl commented Apr 6, 2024 •

edited

Loading