Creating a minimal webpage with Canvas blocks & elements

I'm looking to minimize the page load. The design I want will use simple sticky menu, content blocks, and simple 3 col grid with images that popup Modal content with scrolable content. And a simple footer.

It's the head tags I'd like some guidance. Would like to remove all the links/calls for CSS files and javascript that I do not need.

Also so your Package Generator, would that help?

I did extend support today 88535381-f0d4-4d92-a37e-0bbb4dd5361f

Cheers,
J Greg

It does help, thank you. Lazy load saves many websites page weight that contain loads of images too. Your method seems an elegant solution to manually removing the JS codes not needed from the standard page and saves me 675kB of page weight. I'll give it a try.

CSS
style-import.css I can likely take out shop.css, blog.css, sliders.css... but that doesn't save a whole lot.

However, the big weight is in style.css 325kB

What I was hoping is that your CSS geniuses had already created a "styles-minimal.css" for the root folder that covers basic page functions, like Porto template does. That makes it a lot easier... because if any vital CSS is missing from that minimal css version for my own custom page, then it's easy enough to locate it in the big styles.css and add it back in to the minimal version.

Thanks for your help. I give all this try and come back if needed.
Cheers,
Jan

Thank you. To review and clarify:

• Following your above instructions, I also would delete all existing link rel for css and replace with the Copy/Paste section

Then open style-import.css and comment out whatever sections I think I don't need

For example:

/@import url("css/imports/blog.css");/
/@import url("css/imports/shop.css");/
/@import url("css/imports/events.css");/

Is that all correct?

I've already followed your instructions. While it's just my perception, the page load speed is visually faster, and I cleared the cache.

Testing this now on the portfolio.html page. I'll check both with a page speed service to see what the difference makes in actual speed using desktop and broadband. My main concern here is phone visitors will be about 90% of the expected visits. So I test that way ultimately and that's where I will probably see a large visual difference on actual real-world page load time.

Obvious you guys are forward thinking on your design and structure... kudos for you excellent customer support here.
You're a real breath of fresh air in today's landscape of sellers.

Cheers,
Jan

Here's the grade for the original text page and modified per our discussion. Test on Gmetrix page speed tester.

portfolio.html
GTmetrix Grade Performance
Grade 89%
Structure 86% LCP 1.3s TBT 71ms CLS 0.07

Same with changes we've disussed
1-min-portfolio.html
GTmetrix Grade Performance
Grade 93%
Structure 84% LCP 1.0ms TBT 62ms CLS 0.15

4% Seems like a small difference, but it all adds up. I've more to do. This test page is much heavier that the eventual design I have planned. Eventually will minify all css and jscript files as a final step. CDN for css jscripts images. Gzip on server. Increase the cache life in htaccess.

**What is your opinion on this step indicated by Gmetrix? ** I currently use CDN and keep the external links to css. But I'm seeing a lot of new pages across the web going inline for both css and jscript. almost counterintuitive to do this, but it does make a big difference in phone browsers. And that's my real objective here. A responsive template such as Canvas cover all the devices, but trend is more and more phones and less and less patience from visitors.

Gmtrix mod(HIGH) suggested for both pages
Either put all CSS inline or use CDN for css files
Increase cache life for repeat visitors - at least 7 days

going with inline also removes the need to minify css files and use a CDN.

Please help with the following:

Where is Critical Inline CSS in the Canvas package? I can't find it.

I can combine the rest of the external files, minify and create one file.

Can you give me best practice code example for loading the rest of the CSS files with Async?

Thank you, excellent suggestion

Cheers,
Jan Gregory

Thanks, that does help just identifying what impacts the first paint. And the async tip.

I'll try to isolate the basic top header CSS and put it inline minified in one chunk

I'll combine all the rest of the css files into one file and minify that. The async that most sense is the simplest.

<link rel="stylesheet" href="/path/to/my-canvas.css" media="print" onload="this.media='all'; this.onload=null;">

Cheers,
Jan

For anyone else following this, minify is a method of removing all the spaces in css and javacript files. In my experience, it makes a ton of difference in load times

Here's some free minify tool and there are many more
https://www.minifier.org/
https://www.willpeavy.com/tools/minifier/