How to prevent flicker delay on page loads

Home Forums WordPress Themes – Premium Pure & Simple How to prevent flicker delay on page loads

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #63545
    Vicki Berenson
    Participant

    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;
    }

    #63571
    Styled Themes
    Keymaster

    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 7 months, 3 weeks ago by Styled Themes.
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.