Canvas Support

Optimise plugins.js / functions.js / font-icons.woff

7 replies · opened Jul 8, 2020

TthemepackJul 8, 2020

I think I know which functions from functions.js my implementation isn't using, is there a quick way to remove the ones not in use to reduce the size of these two js files? I'm getting 1900ms in script evaluation in Lighthouse (minimize main thread work)

How about the file font-icons.woff? Is there any way to minimize this filesize aside from compression? e.g. remove font icons not being used.

I managed to get css/font-icons.css down from 112kB to 7kB just by using the rules for the icons I have used across the site.

In lighthouse I'm getting around 97/100 on desktop and 75/100 on mobile

SSemicolon WebSTAFFJul 8, 2020

Hello,

  1. To remove the Functions from the js/functions.js File, you can the following guide:
  • Remove the gmap: function( element ) Function Block
  • Remove all the Instances of SEMICOLON.widget.gmap(); Function.
  1. Consider using the IconMoon App: https://icomoon.io/app/#/select and then Import the css/fonts/font-icons.svg. Choose the Icons you need and then Generate Font.

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

TthemepackJul 9, 2020

Awesome! Thank you so much

TthemepackJul 9, 2020

Got font-icons down from 543kB to 9.5kB

TthemepackJul 9, 2020

the best way to do it is to create a new font-icons.svg file using using a text editor with only the icon names you need, then upload/export in iconmoon

SSemicolon WebSTAFFJul 9, 2020

Hello,

Thanks for the Valuable Suggestions and sharing your Workflow. Sounds Amazing! We would love to check the Final Product if you would like to share with us!

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

TthemepackJul 9, 2020

One question, in functions.php there are these bits of code (for example instagram)

	instagramPhotos: function( element ){
		let settings = {
			element: element,
			default: '.instagram-photos',
			file: 'plugins.instagram.js',
			error: 'plugins.instagram.js: Plugin could not be loaded',
			execfn: 'SEMICOLON_instagramPhotosInit',
			pluginfn: 'typeof scwInstagramPlugin !== "undefined"',
			trigger: 'pluginInstagramReady',
			class: 'has-plugin-instagram'
		};

		SEMICOLON.initialize.functions( settings );
	},

It appears to be calling plugins.instagram.js but I have never noticed that being loaded, the only other .js that gets loaded alongside functions.js is plugins.min.js. Does that mean i can remove from the unminified plugins.js file any plugins I have removed from functions.php?

It would be good to reduce that file size as it's 0.5MB (174kB compressed)

https://www.worldclass-schools.org/

It is a WordPress conversion of the template (as all my canvas sites are). This one has quic.cloud CDN running on a Litespeed enabled server with Litespeed wordpress plugin configured (Clook.net reseller hosting). On my fibre internet connection it loads in around 400ms after the cache is primed. About 700ms pre-cache.

SSemicolon WebSTAFFJul 10, 2020

Hello,

You can simply remove the js/plugins.min.js File. Then, the AJAX JS Loading will be automatically activated and will load only the JS Files needed on the Page.

This will definitely work fine. Hope this Helps!

Thank You so much for sharing your work! :) The Level of Customization and Optimization is amazing.

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard