Conditional stylesheet load doesn't work until Refresh of page

[arqdesignstudio]

I am trying to have a seperate style sheet for a custom page layout load only when that page is requested to improve our performance score according to lighthouse.

I've done this by using the statement in theme.liquid

{% if page.template_suffix == 'kabrita-hcp' %}
{{ 'hcp-page.css' | asset_url | stylesheet_tag }}
{% endif %}

My template is called "page.kabrita-hcp.liquid" which I would assume returns the value "kabrita-hcp" which should return as true in that if statement.

This works only when you refresh after visiting the page. The first visit, the content is unstyled.

I've also tried:

{% if template contains "kabrita-hcp" %}

{{ 'hcp-page.css' | asset_url | stylesheet_tag }}
{% endif %}

That just makes it load on every page.

Really need a solution to improve being able to partition style sheets so we can mitigate being penalized for site performance by search engines.

Preview link: https://v4lwykme9k3yuh7c-1484881984.shopifypreview.com

[candiSoft]

- make file hcp.css.liquid in asset.
- put all css in that file for hcp page.
- now put condition over all css codes. Like below.
{% if template.suffix == 'kabrita-hcp' %}
All css codes in file here
{% endif %}

- if not works try to change template.suffix condition.
- like and accept my answer as solution.

[JoesIdeas]

If the file is small I wouldn't worry too much. You're not "being penalized", it's just a suggestion from an automated tool.

I usually conditionally load JS when I can. CSS sure if it's a large file but personally I don't bother with files under 10kb.

You could do something like this <h1> {{page.template_suffix }} </h1> on a test theme to have it show what's loading there (or just use html comments if you're testing on live site).

That might give you a clue why it's not loading on the first try. I don't think I've seen an instance where first visit doesn't show it but repeat visits do. Might be some app interference with caching or something, but displaying the variable should help.