☰

YouTube Web Tweaks

This script optimizes YouTube's performance by modified configs and much more!

  1. // ==UserScript==
  2. // @name         YouTube Web Tweaks
  3. // @version      4.2.8
  4. // @description  This script optimizes YouTube's performance by modified configs and much more!
  5. // @author       Magma_Craft
  6. // @license MIT
  7. // @match        *://www.youtube.com/*
  8. // @namespace    https://greatest.deepsurf.us/en/users/933798
  9. // @icon         https://www.youtube.com/favicon.ico
  10. // @unwrap
  11. // @run-at       document-end
  12. // @unwrap
  13. // @grant        none
  14. // ==/UserScript==
  15.  
  16. // Enable strict mode to catch common coding mistakes
  17. "use strict";
  18.  
  19. // Define the flags to assign to the EXPERIMENT_FLAGS object
  20. const flagsToAssign = {
  21.   // Standard tweaks (YT config editor + Disable animations)
  22.   IS_TABLET: true,
  23.   DISABLE_YT_IMG_DELAY_LOADING: true,
  24.   polymer_verifiy_app_state: false,
  25.   desktop_delay_player_resizing: false,
  26.   web_animated_actions: false,
  27.   web_animated_like: false,
  28.   web_animated_like_lazy_load: false,
  29.   render_unicode_emojis_as_small_images: true,
  30.   smartimation_background: false,
  31.   kevlar_refresh_on_theme_change: false,
  32.   // Disable cinematics (aka ambient lighting)
  33.   kevlar_measure_ambient_mode_idle: false,
  34.   kevlar_watch_cinematics_invisible: false,
  35.   web_cinematic_theater_mode: false,
  36.   web_cinematic_fullscreen: false,
  37.   enable_cinematic_blur_desktop_loading: false,
  38.   kevlar_watch_cinematics: false,
  39.   web_cinematic_masthead: false,
  40.   web_watch_cinematics_preferred_reduced_motion_default_disabled: false
  41. };
  42.  
  43. const updateFlags = () => {
  44.   // Check if the EXPERIMENT_FLAGS object exists in the window.yt.config_ property chain
  45.   const expFlags = window?.yt?.config_?.EXPERIMENT_FLAGS;
  46.  
  47.   // If EXPERIMENT_FLAGS is not found, exit the function
  48.   if (!expFlags) return;
  49.  
  50.   // Assign the defined flags to the EXPERIMENT_FLAGS object
  51.   Object.assign(expFlags, flagsToAssign);
  52. };
  53.  
  54. // Create a MutationObserver that calls the updateFlags function when changes occur in the document's subtree
  55. const mutationObserver = new MutationObserver(updateFlags);
  56. mutationObserver.observe(document, { subtree: true, childList: true });
  57.  
  58. // Other tweaks to be added
  59. (function() {
  60. let css = `
  61.  
  62. /* Hide ads, shorts, etc using CSS */
  63. .ytd-search ytd-shelf-renderer, ytd-reel-shelf-renderer, ytd-merch-shelf-renderer, ytd-action-companion-ad-renderer, ytd-display-ad-renderer, ytd-rich-section-renderer, ytd-video-masthead-ad-advertiser-info-renderer, ytd-video-masthead-ad-primary-video-renderer, ytd-in-feed-ad-layout-renderer, ytd-ad-slot-renderer, ytd-statement-banner-renderer, ytd-banner-promo-renderer-background ytd-ad-slot-renderer, ytd-in-feed-ad-layout-renderer, .ytwPanelAdHeaderImageLockupViewModelHost, ytd-ads-engagement-panel-content-renderer, #content.ytd-ads-engagement-panel-content-renderer, ytd-engagement-panel-section-list-renderer[target-id="engagement-panel-ads"], ytd-rich-item-renderer:has(> #content > ytd-ad-slot-renderer), .ytd-video-masthead-ad-v3-renderer, div#root.style-scope.ytd-display-ad-renderer.yt-simple-endpoint, div#sparkles-container.style-scope.ytd-promoted-sparkles-web-renderer, div#main-container.style-scope.ytd-promoted-video-renderer, div#player-ads.style-scope.ytd-watch-flexy, #clarify-box, ytm-rich-shelf-renderer, ytm-search ytm-shelf-renderer, ytm-button-renderer.icon-avatar_logged_out, ytm-companion-slot, ytm-reel-shelf-renderer, ytm-merch-shelf-renderer, ytm-action-companion-ad-renderer, ytm-display-ad-renderer, ytm-rich-section-renderer, ytm-video-masthead-ad-advertiser-info-renderer, ytm-video-masthead-ad-primary-video-renderer, ytm-in-feed-ad-layout-renderer, ytm-ad-slot-renderer, ytm-statement-banner-renderer, ytm-banner-promo-renderer-background ytm-ad-slot-renderer, ytm-in-feed-ad-layout-renderer, ytm-rich-item-renderer:has(> #content > ytm-ad-slot-renderer) .ytm-video-masthead-ad-v3-renderer, div#root.style-scope.ytm-display-ad-renderer.yt-simple-endpoint, div#sparkles-container.style-scope.ytm-promoted-sparkles-web-renderer, div#main-container.style-scope.ytm-promoted-video-renderer, div#player-ads.style-scope.ytm-watch-flexy, ytm-pivot-bar-item-renderer:has(> .pivot-shorts), ytd-compact-movie-renderer, yt-about-this-ad-renderer, masthead-ad, ad-slot-renderer, yt-mealbar-promo-renderer, statement-banner-style-type-compact, ytm-promoted-sparkles-web-renderer, tp-yt-iron-overlay-backdrop, #masthead-ad, #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer.style-scope[title="Shorts"], a.yt-simple-endpoint.style-scope.ytd-mini-guide-entry-renderer[title="Shorts"] {
  64. display: none !important
  65. }
  66.  
  67. .style-scope[page-subtype='channels'] ytd-shelf-renderer,
  68. .style-scope[page-subtype='channels'] ytm-shelf-renderer {
  69. display: block !important;
  70. }
  71.  
  72. ytd-watch-metadata.ytd-watch-flexy {
  73. padding-bottom: 36px !important;
  74. }
  75.  
  76. /* Remove filter categories on search results and playlists to make the UI usable on low-entry machines */
  77. ytd-item-section-renderer.style-scope.ytd-section-list-renderer[page-subtype="playlist"] > #header.ytd-item-section-renderer > ytd-feed-filter-chip-bar-renderer {
  78. display: none !important;
  79. }
  80.  
  81. div#chip-bar.style-scope.ytd-search-header-renderer > yt-chip-cloud-renderer.style-scope.ytd-search-header-renderer > div#container.style-scope.yt-chip-cloud-renderer {
  82. display: none !important;
  83. }
  84.  
  85. /* Remove every unwanted compact renderer in related section and limit the number of yt-lockup-view-model to 9 */
  86. #related ytd-compact-video-renderer, ytd-compact-movie-renderer, #related ytd-compact-playlist-renderer, #related ytd-compact-radio-renderer, #related yt-lockup-view-model, #related ytd-channel-renderer, ytd-watch-flexy ytd-reel-shelf-renderer, ytd-watch-flexy ytd-rich-section-renderer, #related ytd-continuation-item-renderer, #related #continuations {
  87. display: none !important
  88. }
  89.  
  90. #related yt-lockup-view-model:nth-of-type(1), #related yt-lockup-view-model:nth-of-type(2), #related yt-lockup-view-model:nth-of-type(3), #related yt-lockup-view-model:nth-of-type(4), #related yt-lockup-view-model:nth-of-type(5), #related yt-lockup-view-model:nth-of-type(6), #secondary #related yt-lockup-view-model:nth-of-type(7), #secondary #related yt-lockup-view-model:nth-of-type(8), #secondary #related yt-lockup-view-model:nth-of-type(9) {
  91. display: flex !important
  92. }`;
  93. if (typeof GM_addStyle !== "undefined") {
  94.   GM_addStyle(css);
  95. } else {
  96.   let styleNode = document.createElement("style");
  97.   styleNode.appendChild(document.createTextNode(css));
  98.   (document.querySelector("head") || document.documentElement).appendChild(styleNode);
  99. }
  100. })();
  101.  
  102. //
  103. // What is this userscript trying to address?
  104. // When playing a video, only a small part of the video loads, and the subsequent
  105. // parts do not load afterward.
  106.  
  107. (function () {
  108.   "use strict";
  109.  
  110.   const originalGetContext = HTMLCanvasElement.prototype.getContext;
  111.   HTMLCanvasElement.prototype.getContext = function (contextType) {
  112.     if (contextType === "webgl" || contextType === "webgl2") {
  113.       console.log("WebGL is disabled by Tampermonkey");
  114.       return null;
  115.     }
  116.     return originalGetContext.apply(this, arguments);
  117.   };
  118. })();