Lag on spicetify only on the home page.

🔍 Have you checked Spicetify.app page for your issue?

• I have checked the FAQ

🔍 Is there already an issue for your problem?

• I have checked older issues, open and closed

ℹ Environment / Computer Info

Spotify for Windows (64 bit): 1.2.53.440.g7b2f582a
Spicetify v2.38.7

Windows 11 22H2
Intel I5 6600T
24 GB DDR4 2333MZH RAM
Integrated Graphics (Intel HD 530)

📝 Description

I have extreme lag while scrolling, but only on the homepage. Other animations like hovering over a song play completely smoothly, I've tried uninstalling the theme i have and just using the default one, no help. I also know it's not because my computer's slow, the animation that plays while hovering over a song works fine. I found an older, unanswered issue on this: #207.

📸 Screenshots

2025-01-09_20-06-21.mp4

[rxri]

Theme issue most likely. Not related to spicetify itself. Also you're using iGPU while spotify is laggy on these also

[amd64fox]

similar to this one

this is most likely a native client issue, try disabling enableHomeCarousels in exp features

Spotify was completely fine before I installed spicetify, the animations for hovering over songs and podcasts aren't laggy at all along with every page except home. I've also tried every theme on the store along with not using a theme.

[machinemessiah]

Try this.

( function delusoire() {
	// @why - push a dummy entry to jailbreak webpack's require method so we can use it below
	const webpackRequire = globalThis.webpackChunkclient_web.push(
		[
			[Symbol()], // @what - a unique identifier for our "chunk"; it doesn't need to do anything but be a Symbol
			{}, // @what - the content of this new chunk/module...but we aren't actually adding a real one, we just need the correct type
			require => require // @what - this is what we're really after, we are pushing this whole array just so the return value is a call to webpack's require method
		]
	);

	const moduleEntries = Object.entries( webpackRequire.m );
	const modules = moduleEntries.map( ( [id] ) => webpackRequire( id ) );
	const [module, key, value] = modules
		.flatMap( module => {
			const keys = Object.keys( module );
			if ( keys.length !== 1 ) {
				return [];
			}
			const key = keys[0];
			const value = module[key];
			if ( typeof value !== "function" ) {
				return [];
			}
			const functionString = value.toString();
			if ( !functionString.includes( "scrollNodeRef" ) || !functionString.includes( "executeOnceOnStart" ) ) {
				return [];
			}
			return [[module, key, value]];
		} )[0];

	Object.defineProperty( module, key, {
		enumerable: true,
		get: () => function ( arg1, arg2 ) {
			if ( arg1.toString().includes( "--top-bar-opacity" ) ) {
				arg2.disabled = true;
			}
			return value( arg1, arg2 );
		},
	} );
} )();

Also, at the top of spicetifyWrapper.js you'll need to add the following:

const nativeObjectDefineProperty = Object.defineProperty;

Object.defineProperty = function ( obj, prop, descriptor ) {
	if ( prop !== "prototype" && descriptor ) {
		descriptor.configurable = descriptor.configurable ?? true;
	}
	return nativeObjectDefineProperty( obj, prop, descriptor );
};

None of this code is mine (well, other than the comments), this piece of magic was performed by my second favouite wizard @Delusoire

I'm sorry if I look stupid, but where am I supposed to put the first peice of javascript code?

Try this.

( function delusoire() {
	// @why - push a dummy entry to jailbreak webpack's require method so we can use it below
	const webpackRequire = globalThis.webpackChunkclient_web.push(
		[
			[Symbol()], // @what - a unique identifier for our "chunk"; it doesn't need to do anything but be a Symbol
			{}, // @what - the content of this new chunk/module...but we aren't actually adding a real one, we just need the correct type
			require => require // @what - this is what we're really after, we are pushing this whole array just so the return value is a call to webpack's require method
		]
	);

	const moduleEntries = Object.entries( webpackRequire.m );
	const modules = moduleEntries.map( ( [id] ) => webpackRequire( id ) );
	const [module, key, value] = modules
		.flatMap( module => {
			const keys = Object.keys( module );
			if ( keys.length !== 1 ) {
				return [];
			}
			const key = keys[0];
			const value = module[key];
			if ( typeof value !== "function" ) {
				return [];
			}
			const functionString = value.toString();
			if ( !functionString.includes( "scrollNodeRef" ) || !functionString.includes( "executeOnceOnStart" ) ) {
				return [];
			}
			return [[module, key, value]];
		} )[0];

	Object.defineProperty( module, key, {
		enumerable: true,
		get: () => function ( arg1, arg2 ) {
			if ( arg1.toString().includes( "--top-bar-opacity" ) ) {
				arg2.disabled = true;
			}
			return value( arg1, arg2 );
		},
	} );
} )();

Also, at the top of spicetifyWrapper.js you'll need to add the following:

const nativeObjectDefineProperty = Object.defineProperty;

Object.defineProperty = function ( obj, prop, descriptor ) {
	if ( prop !== "prototype" && descriptor ) {
		descriptor.configurable = descriptor.configurable ?? true;
	}
	return nativeObjectDefineProperty( obj, prop, descriptor );
};

None of this code is mine (well, other than the comments), this piece of magic was performed by my second favouite wizard @Delusoire

similar to this one

this is most likely a native client issue, try disabling enableHomeCarousels in exp features

This fixed it, mostly. It still lags at the top of the homepage, maybe my computer's just slow.

[realazizk]

@kk-spartans maybe you can try my fix (it's a spotify issue, not related to spicetify) https://youtu.be/YNVdA2XbaJ0

@kk-spartans maybe you can try my fix (it's a spotify issue, not related to spicetify) https://youtu.be/YNVdA2XbaJ0

Turning off enableHomeCarousels reduced a bit, but this made it as smooth as it was without spicetify. Thanks!