Service page takes a while to load

Compared to other pages the service page takes a while to load. Also the service page tab has a blue line around it when it loads. No other menu tab does that. Not sure if theirs something on the page that’s slowing it down such as instagram grid feed plugin. Does that slow a page down?

Hello Sasan,

Thanks for writing in!

I have tested your Services page and it took 2.77 seconds to load it. The page is 1.5MB in file size and has 67 server request which 57% of those request are more on images. You can check it here: https://tools.pingdom.com/#5ae92a735e800000

To improve your site’s performance, please check this out:

Yes, I checked as well on pingdom.com but im just wondering when you start from home page and then click on the service tab. The tab has a light blue border around it when i loads, not sure why (How we can remove) and page takes little longer to load then other pages. And i was curious to know if it’s the plugins we are using on the page.

Hello Sasan,

Thanks for updating the thread. :slight_smile:

Please try out following CSS under Pro > Theme Options > CSS:

a:focus, 
a.x-btn:focus, 
select:focus, 
input[type="file"]:focus, 
input[type="radio"]:focus, 
input[type="submit"]:focus, 
input[type="checkbox"]:focus, 
input[type="button"]:focus {
        outline: none !important;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

Perfect! Thank you.

Actually I tried that code and I cleared cache and blue color around service tab still shows up when loading.

Hi Sasan,

I don’t see any blue color around the services page, can you provide us a screenshot of the said blue line? So we can take a closer look.

Thanks,

Yes, not the page I’m referring to the blue border around the tab. Im noticing this blue color around all my tabs not sure why.

Hello Sasan,

Thanks for the screenshot. The blue line is the focus outline in the menu item.
Adding the code given by @Prasant should remove those lines. Unless otherwise there is a class conflict somewhere which has affected the newly added CSS. Could you please update this block:

@media only screen and (max-width:600px){
    .mobile-class .x-anchor-content{
        padding:10px 0 !important;
    }
    .e585-4.x-menu > li > .x-anchor[class*="active"]{
        background-color:transparent;
    }
    .e585-4.x-menu > li > .x-anchor[class*="active"] .x-anchor-text-primary{
        color:#000;
    }
    .x-menu-dropdown.x-dropdown{
        transition-duration:0.15s !important;
    }
    a:focus,a.x-btn:focus,select:focus,input[type="file"]:focus,input[type="radio"]:focus,input[type="submit"]:focus,input[type="checkbox"]:focus,input[type="button"]:focus{
        outline:none !important;
    }

and replace it with this code instead:

@media only screen and (max-width:600px){
    .mobile-class .x-anchor-content{
        padding:10px 0 !important;
    }
    .e585-4.x-menu > li > .x-anchor[class*="active"]{
        background-color:transparent;
    }
    .e585-4.x-menu > li > .x-anchor[class*="active"] .x-anchor-text-primary{
        color:#000;
    }
    .x-menu-dropdown.x-dropdown{
        transition-duration:0.15s !important;
    }
}

a:focus,a.x-btn:focus,select:focus,input[type="file"]:focus,
input[type="radio"]:focus,input[type="submit"]:focus,
input[type="checkbox"]:focus,input[type="button"]:focus{
  outline:none !important;
}

Clear all your caches first and then test your page again.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.