Re: Load stylesheets in <head> - Dawn

Sneaky · ‎06-29-2022

Within Dawn, stylesheets (and specific inline styles) are added to the page where a section or block has been added, it can also often use the same stylesheet more than once on the same page, especially if you have duplicate section types.

Is there a way to shift those stylesheets to be inserted within the <head> section of the page and check for already listed stylesheets to not duplicate?

made4Uo · ‎06-29-2022

Hi @Sneaky,

I am not sure if you are aware, we should try to minimize the stylesheet being loaded at the head area since this affects the website performance. The codes at the <head> are being rendered as soon as the website loads, imagine putting all your stylesheets in there. It will take longer to read the stylesheet and therefore slow down the website performance.

The reason the stylesheets are rendered with the section so the stylesheet is only read when we use the section. I hope I make since

You can read more on what I said here.

If this fixed your issue Likes and Accept as Solution is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

Sneaky · ‎06-30-2022

Hmm..., that is not what I am reading, e.g. https://gtmetrix.com/put-css-in-the-document-head.html

Not discounting your reference, just saying there are a lot of opposing views on this topic. Your link makes comments about loading styles to improve load time, e.g avoid inline styles. It also does not really say not to load stylesheets in the <head> of the site (unless I missed it).

My idea would still be to load stylesheets ONLY if that section is in use on that page, just as it does now but placed in the <head> area as preferred. It will ensure less shifting (and other factors) in the page loading where later in body stylesheets affect the layout etc. Thus not having one large stylesheet, but again only load stylesheets needed for that specific page.

There is also the issue where a stylesheet is often referred to multiple times, for example, adding more than one rich text block will result in the rich text stylesheet being loaded multiple times for every rich text section you add. Another example is component-rating.css which is often listed 2 or more times on the same page.

I am just trying to remove clutter, as well as where I need to, combine some stylesheets where it would be beneficial to do so.

I am in the process of making my own edited version of Dawn (for my own sites) that offers more specific styles and many more layout features.

Thanks for your help.

made4Uo · ‎06-30-2022

Hi @Sneaky,

I would say try it yourself. I know everyone has different opinions but it is best to check it yourself. Try putting all your stylesheets at the <header> then check your website performance.

If this fixed your issue Likes and Accept as Solution is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

Sneaky · ‎06-30-2022

Not wanting to add them "All" in there, only have those added where that section is on that page, Just like it does now but instead of within the body, the stylesheets are placed in the <head>.

If I loaded every stylesheet used in Dawn into the <head> yes it may have a performance issue.

Cedcommerce · ‎07-01-2022

Hello @Sneaky,

A better way to do this is to use external CSS and include it in the head section.

If your blocks and section have the same selector then this style will be applicable to all the pages where you are adding the blocks and sections.

Follow the below steps:

Create a file in the asset folder of the theme.
Load the style in the head of the layout folder in theme.liquid file.
Add this below-provided code between the head tag.

{{ 'base.css' | asset_url | stylesheet_tag }}//

You can replace base.css in the code with your CSS file name.
Dawn works on a 2.0 version.
Hence, if you are creating any page template then you can use that section twice.
You do not need to duplicate the same section.
Just add the section and all styling for that section will be the same.

While duplication of any same selector like classes, ids, and attributes, all CSS will be applied for that particular section.

Follow the below steps for the same.

Go to > Themes > Customise
Open the Dropdown as shown below and you will find an option to create a new template.

After creating the template just add the same section twice.
As you can see we have just picked the heading class name and applied the CSS to it and it automatically applies to both the sections.
Even if you are duplicating the section with the same class name, then CSS will be applied to both the sections as you can see in the below image.

Please Note:- If you are creating any template don’t forget to assign the template given in the below screenshot.

Follow the steps to resolve your issue. If you need any further assistance, please contact us.

All the best,

Team CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here

Sneaky · ‎07-01-2022

Correct the best way is to use css as an external file. However, Dawn puts stylesheets within the body of the page. Using templates is fine, but only when needed. I created the template you suggested and also added 2 rich-text sections between each side of the collection list sections (i.e. collections - rich-text-collection-rich-text). This results in the stylesheets for collections and rich text sections, to be listed as duplicates. The only way to fix this would be to remove the stylesheets from the collections and rich-text blocks, and load them into the head. But then they would load on every page of the site even if there is no rich-text or collections listed on that page.

Unless I am missing something or misunderstanding your reply.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>

<link href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/base.css?v=175576561900805097641656389960" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-list-menu.css?v=151968516119678728991656208055" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-search.css?v=96455689198851321781656208067" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-menu-drawer.css?v=182311192829367774911656208059" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-cart-notification.css?v=119852831333870967341656208050" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-cart-items.css?v=23917223812499722491656208049" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/trp-styles.css?v=114746328608870644901656553782" rel="stylesheet" type="text/css" media="all" />
<link rel="preload" as="font" href="https://fonts.shopifycdn.com/open_sans/opensans_n4.5460e0463a398b1075386f51084d8aa756bafb17.woff2?h1=dHJwLWRhd24uYWNjb3VudC5teXNob3BpZnkuY29t&hmac=655921244a0a26712eacbba5d41555f41cd9590a9229cda65205fb4b2970e63d" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="https://fonts.shopifycdn.com/open_sans/opensans_n4.5460e0463a398b1075386f51084d8aa756bafb17.woff2?h1=dHJwLWRhd24uYWNjb3VudC5teXNob3BpZnkuY29t&hmac=655921244a0a26712eacbba5d41555f41cd9590a9229cda65205fb4b2970e63d" type="font/woff2" crossorigin>
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-predictive-search.css?v=165644661289088488651656208063" media="print" onload="this.media='all'">
</head>

<body>
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-price.css?v=112673864592427438181656208064" media="print" onload="this.media='all'">
  <link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-loading-overlay.css?v=167310470843593579841656208057" media="print" onload="this.media='all'">
<link href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/section-collection-list.css?v=70863279319435850561656208084" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-card.css?v=72805245582035824971656208048" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-slider.css?v=95971316053212773771656208069" media="print" onload="this.media='all'">
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-rte.css?v=69919436638515329781656208066" media="print" onload="this.media='all'">
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/section-rich-text.css?v=155250126305810049721656208093" media="print" onload="this.media='all'">
<link href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/section-collection-list.css?v=70863279319435850561656208084" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-card.css?v=72805245582035824971656208048" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-slider.css?v=95971316053212773771656208069" media="print" onload="this.media='all'">
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-rte.css?v=69919436638515329781656208066" media="print" onload="this.media='all'">
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/section-rich-text.css?v=155250126305810049721656208093" media="print" onload="this.media='all'">
<link href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/section-footer.css?v=30145471305276302051656467652" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-newsletter.css?v=103472482056003053551656208062" media="print" onload="this.media='all'">
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-list-menu.css?v=151968516119678728991656208055" media="print" onload="this.media='all'">
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-list-payment.css?v=69253961410771838501656208056" media="print" onload="this.media='all'">
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-list-social.css?v=52211663153726659061656208057" media="print" onload="this.media='all'">
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/component-rte.css?v=69919436638515329781656208066" media="print" onload="this.media='all'">
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0611/0514/3986/t/49/assets/disclosure.css?v=646595190999601341656208074" media="print" onload="this.media='all'">
</body>
</html>

As the above shows there are 19 external stylesheets listed to be loaded in the <body>. In the list you will note that section-collection-list.css, component-slider.css, component-rte.css and section-rich-text.css are listed 2 or more times. The more I add rich text and collection list components, the more the duplication occurs.

Ideally, the theme should identify the blocks/sections as it does now, but place only one link to the external stylesheet on the page <head>. If the system detects the same section it does not add the external stylesheet again.

As I have said in my posts above I am looking to trim and combine common styles/styesheets so that reduces calling the same style/stylesheet more than one, e.g. component-rte.css.

There is obviously not a simple way to do this so I will have to see if I can figure out what else I can do.

LuckyLuc · ‎05-14-2024

Hi, I know it's been 2 years (2022) , but have you found a solution for that? That's exactly my problem right now (2024) ....

Each time I add my custom block, the css / js file link is duplicated on the page... very annoying... 😞

Re: Load stylesheets in <head> - Dawn

How can I shift stylesheets to the head section without duplication?

Community Blog Articles