How to prevent flicker delay on page loads

[Vicki Berenson]

Hi, my site at midwestcentertherapy.com is showing a flicker delay on page loads. It’s a fairly simple site and I don’t know what’s causing it. Custom css is as follows:

/* Removes excess padding from header */
.header-bg {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 10px;
}
#masthead .header-inner {
padding: 0px!important;
}
.header-inner .logo {
display: inline;
}

/* Remove excess white space below banner & Increase main body font size.*/
#cta {
background-color: #ffffff;
padding: 0rem;
}

#content {
padding-top: 20px;
}

/*Style sub-menus*/
#primary-navigation ul.nav-menu li ul.sub-menu li a {
text-transform: inherit;
background-color: #2d353f;
}

#primary-navigation ul.nav-menu li ul.sub-menu li a:hover {
text-transform: inherit;
background-color: #696977;
}

/*Customize title and widget title fonts*/
h1.entry-title {
font-weight: bold!important;
font-family:sans-serif;
}

h3.widget-title {
font-weight:bold!important;
font-family:sans-serif;
}

/* Turns off capitalization of primary menu items */

.site-navigation ul {
text-transform: none;
}

[Styled Themes]

Hello Vicki,
The page is loading for me quite fast, hardly notice any kind of flicker.
You can try to do some optimization on the site, first try to move the custom css from the customizer to your child theme css file in /wp-content/themes/puresimple-child/style.css
See if that helps.

You can also try to force the logo height to be fixed so the header have a preset height and it won’t be “moving the rest of the page down” until your logo image loads fully loads, try this CSS

@media (min-width:1024px){
.logo img {
    height: 134px;
}
}

• This reply was modified 4 years, 8 months ago by Styled Themes.

[Author]

Posts