Optimize Elite – Render Hero Section Text First

[Alberto Brusa]

Dear Bill,

Great themes, great support! Keep it like this!

Now the tricky part: is it possible to optimize the Elite Theme (home page) so that the client gets the hero section text+button before anything else?
I run the google page test on my site and (as opposed to the OT site) the results are around 80 points for a PC and below 75 for a mobile device.
I believe it would be a great improvement to your already great theme!

One last element: on the google page test (for the image on the right), my site never gets rendered properly while others that I tested do… any ideas?

Best regards,
Alberto

[Bill Robbins]

Good Morning Alberto,

Great question. One option is to set a background color for the hero section that contrasts with the text and button. That way they will be visible before the image loads. Here’s how you can do that:

1. Go to the Theme Options page and select the Advanced tab.
2. Scroll down to the Custom CSS box and paste this:

   
   body.image #hero-section,
   body.gallery #hero-section,
   body.video #hero-section {
   	background-color: #000000;
   }
   

3. Just change the #000000 to the color background you’d like to have.
4. Update your settings.

That should give you a colored background for the hero section that will be visible until the image there loads.

---

Good question about the screenshot. I have noticed many screenshot tools have difficulty rendering backgrounds that are set to “cover.” When I first released the Moonrise theme which used that property I had to manually create parts of the screenshots in Photoshop to make the backgrounds work properly. You could turn that off, but it would cause troubles with how the hero images look on most devices.

If I can help, just let me know.

Thanks,
Bill

[Alberto Brusa]

Bill,

I believe this will make the background color appear at first, but I am not sure that the hero text section would appear…
Is it possible to make both things come up first and then to load the image/gallery/video?

On the screen shots, it is quite curious… see attached images please.
Thanks in advance,

Alberto

Attachments:

1. 

   Screen-Shot-2014-03-05-at-19.26.07.png
   

2. 

   Screen-Shot-2014-03-05-at-19.27.41.png
   

[Bill Robbins]

Yes I see what you mean. In the gallery format (as opposed to the image format), the text is in the slide itself. The slides are not visible until all the slides have finished loading.

I don’t believe the script that runs the slideshow, Flexslider (https://github.com/woothemes/FlexSlider) supports that. It would be a nice addition, but I don’t believe it’s possible now.

Sorry about that. Probably the best option at the moment would be to use the smallest file size images possible to speed things up.

I have been looking at some other scripts for the slideshow. I’ll keep that limitation in mind as a look through them for the next theme update.

Thanks,
Bill

[Alberto Brusa]

Thanks for your response!
Best,
Alberto

[Bill Robbins]

If I end up with a way for that to work, I’ll be sure to let you know Alberto.

Thanks.

[Author]

Posts