Issue with Website Load Order

Log in to reply
yogena

yogena

Free Member
    • Business Listing
    Apr 12, 2025
    7
    0
    London
    calcvat.uk
  • #1
    Hi everyone,

    I’m looking for some feedback on my new website:. I’ve been working on it for a while and would love to know what you think.
    However, I’m facing an issue where the calculator loads first when the page is opened, and the hero image loads afterward. Ideally, the hero image should be the first thing visitors see.
    Has anyone encountered this issue before? Any suggestions on how to fix it so the hero image loads before the calculator?

    Thanks a lot for your help and feedback!
     
    fisicx

    fisicx

    Moderator
    Sep 12, 2006
    46,699
    8
    15,380
    Aldershot
    www.aerin.co.uk
  • #2
    There could be multiple reasons for this. You need to inspect the code to see how the scripts for the calculator are loaded and if the hero image takes a while to load.

    Try looking at the waterfall on a site like gtmetrix or pingdom.
     
    • Like
    Reactions: yogena
    Upvote 0
    yogena

    yogena

    Free Member
    • Business Listing
    Apr 12, 2025
    7
    0
    London
    calcvat.uk
  • #3
    Thanks for your reply!
    I’ve checked my website’s performance, and it’s currently scoring 98, which seems pretty good. I’m using WordPress for the website, and I’m not sure if it’s related to that.
    Could you kindly check the site and let me know if you spot any specific issues? Here’s the link:
    www.calcvat.uk

    Thanks again for your help!
     
    Upvote 0
    fisicx

    fisicx

    Moderator
    Sep 12, 2006
    46,699
    8
    15,380
    Aldershot
    www.aerin.co.uk
  • #4
    It's not page speed. You need to test for the order each element loads:

    gtmetrix.com

    GTmetrix | Website Performance Testing and Monitoring

    GTmetrix is a free tool to test and monitor your page's performance. Using Lighthouse, GTmetrix generates scores for your pages and offers actionable recommendations on how to optimize them.
    gtmetrix.com

    However, there are multiple issues with your site. Trying to unravel everything is almost impossible, the code a real mess. Did you build it yourself?
     
    Upvote 0
    yogena

    yogena

    Free Member
    • Business Listing
    Apr 12, 2025
    7
    0
    London
    calcvat.uk
  • #5
    Yes, I built it myself. I know there are some issues, and I’m working on fixing them. I can definitely make improvements to the code.
    If you have any specific suggestions on where to start or areas to focus on, I’d really appreciate it!


    Thanks for your input!
     
    Upvote 0
    fisicx

    fisicx

    Moderator
    Sep 12, 2006
    46,699
    8
    15,380
    Aldershot
    www.aerin.co.uk
  • #6
    You really need to strip out the hundreds of lines of code that should be in external stylesheets. Then sort out the scripts. Then rethink your choice of theme.

    And might even be worth choosing another domain name as there is already a calcvat.co.uk

    What you really need is a website review - but you need to upgrade your membership for this.
     
    • Like
    Reactions: yogena
    Upvote 0
    ServWise

    ServWise

    Free Member
    • Jan 22, 2008
    1,267
    292
    The Internet
    www.servwise.com
  • #7
    Agree with all of the other comments. Might want to look into the "transition-delay" options of CSS which could help you delay the visual loading of the element to give the hero time to load in, otheriwise using javascript you could use the loading of an element as as the trigger to display or load another element. If you are not code orientated then if you are using one of the popular page builders they normally have options to delay loading of elements within the screen which might help you.
     
    Upvote 0
    fisicx

    fisicx

    Moderator
    Sep 12, 2006
    46,699
    8
    15,380
    Aldershot
    www.aerin.co.uk
  • #8
    If you look at the code it’s a horrible spaghetti mess. The theme dumps a huge chunk of necessary css, there are nested classes and all sorts of enqueued files.

    Example:

    Code: 
    <body class="home page-template-default page page-id-28 wp-custom-logo wp-embed-responsive footer-on-bottom hide-focus-outline link-style-standard content-title-style-hide content-width-fullwidth content-style-unboxed content-vertical-padding-show transparent-header mobile-transparent-header">

    And the actual calculator isn’t very good. And it looks like someone has pasted in the calculator code resulted in a second <head> being inside <body>. A real mess.

    I’m not even sure of the purpose of the site.
     
    Upvote 0
    ServWise

    ServWise

    Free Member
    • Jan 22, 2008
    1,267
    292
    The Internet
    www.servwise.com
  • #9
    fisicx said:
    If you look at the code it’s a horrible spaghetti mess. The theme dumps a huge chunk of necessary css, there are nested classes and all sorts of enqueued files.
    Click to expand...
    Yeah, I never actually checked the code. But yes there are some definite issues, just one being the code for the calc is a full html page inserted into a code block within your content.
    2025-04-13-10-08-42-b007db3c5bae.png
     
    • Like
    Reactions: yogena
    Upvote 0
    ServWise

    ServWise

    Free Member
    • Jan 22, 2008
    1,267
    292
    The Internet
    www.servwise.com
  • #10
    fisicx said:
    And the actual calculator isn’t very good. And it looks like someone has pasted in the calculator code resulted in a second <head> being inside <body>. A real mess.

    I’m not even sure of the purpose of the site.
    Click to expand...
    Hahaha its early morning, just seen you mentoned that embeded page code already... I need more sleep on a sunday. :)
     
    Upvote 0
    ctrlbrk

    ctrlbrk

    Free Member
    May 13, 2021
    997
    401
  • #11
    fisicx said:
    Example:

    Code: 
    <body class="home page-template-default page page-id-28 wp-custom-logo wp-embed-responsive footer-on-bottom hide-focus-outline link-style-standard content-title-style-hide content-width-fullwidth content-style-unboxed content-vertical-padding-show transparent-header mobile-transparent-header">
    Click to expand...
    That's how Wordpress' themes attach CSS to a page isn't it?

    Depending on the theme you choose, various classes are added so that you can target this or that WP component.
     
    Upvote 0
    fisicx

    fisicx

    Moderator
    Sep 12, 2006
    46,699
    8
    15,380
    Aldershot
    www.aerin.co.uk
  • #12
    ctrlbrk said:
    That's how Wordpress' themes attach CSS to a page isn't it
    Click to expand...
    Some themes do. Good ones don’t. The kadence theme doesn’t need that many classes, it’s just lazy coding.
     
    • Like
    Reactions: yogena
    Upvote 0
    ctrlbrk

    ctrlbrk

    Free Member
    May 13, 2021
    997
    401
  • #13
    fisicx said:
    Some themes do. Good ones don’t. The kadence theme doesn’t need that many classes, it’s just lazy coding.
    Click to expand...
    I think there's some method to the madness

    page-template-default page page-id-28
    Click to expand...

    The bit above allows you to target all pages of the theme ('page'), that individual page ('page-id-28') or the page template ('page-template-default').

    I'm not suggesting this is the best way to go about it - in fact I worry that Wordpress is becoming bloated. I try to keep things as slim as possible myself with a custom theme so I understand where you're coming from.

    I just think - for many people who are not as development-minded, this may make things easier.
     
    Upvote 0
    fisicx

    fisicx

    Moderator
    Sep 12, 2006
    46,699
    8
    15,380
    Aldershot
    www.aerin.co.uk
  • #14
    I agree. The problem with many themes is they try to do everything which results is bazillions of classes.

    Have you looked at the code on that site? It’s not pretty.
     
    Upvote 0
    ctrlbrk

    ctrlbrk

    Free Member
    May 13, 2021
    997
    401
  • #15
    fisicx said:
    The problem with many themes is they try to do everything
    Click to expand...
    That's the downside of semplicity. You make it simple for people but it comes at a cost.

    I agree programmers have become lazy. Rather than trying to code efficiently now it's "Eh, computers are now so powerful who cares if my code requires more ram and more disk space".
     
    • Like
    Reactions: fisicx
    Upvote 0
    Log in to reply

    Latest Articles

    Join UK Business Forums for free business advice
    Top Bottom
    Community
    Articles
    Menu