Jumpstart Theme - Site Header Load time

Shopify Partner
1 0 0

Although my site logo is only 16KB, my site header's background color loads first in Jumpstart and it takes a few seconds for my logo and menu to finally show up (looks like a fade in effect). It's not optimal yet kind of acceptable for desktops users but way too slow for mobile users. I thought this could be addressed by modifying the .animate value under .site-header in theme.scss but it doesn't seem to be related. Anyone else experiencing this? Any recommendation on how to speed this up? Thanks in advance.     

0 Likes
New Member
2 0 1

did you get an answer to this?

0 Likes
Shopify Expert
96 17 12

@laudusseau - There is a transition being applied to the logo with an ease effect.  This can be removed and that should load the logo with no appearance of a lag.

 

1. Go to your theme.scss asset file and locate the following code (should be near line 2015):

 

.site-header--classic .site-nav,
.site-header--classic .site-header__logo {

  .js & {
    opacity: 0;
    @include prefixer(transition, opacity .15s ease-in, webkit moz);
  }

  .no-js & {
    opacity: 1;
  }
}

2. Comment out that code by wrapping the css in {% comment %} and {% endcomment %}.  Should look something like the below:

 

{% comment %}

.site-header--classic .site-nav,
.site-header--classic .site-header__logo {

  .js & {
    opacity: 0;
    @include prefixer(transition, opacity .15s ease-in, webkit moz);
  }

  .no-js & {
    opacity: 1;
  }
}

{% endcomment %}

3. Tada!  If this works on your end, please mark as solved ;)

 

0 Likes
New Member
2 0 1

It worked.  Thank you so much.  

I have some other issues with my website i need help with.  

Can you email me at john@flairpubs.com

1 Like
Shopify Expert
96 17 12

@busyinc - Of course and happy to help! 

 

 @laudusseau - Make sure to mark this as closed when you validate it worked on your end!

0 Likes