有人能解释一下发生在我的WordPress主题网站上的问题吗？

Question

当域名frameless.ca被调用时，网站加载一毫秒，然后页面变为空白，再过一两秒钟，整个站点再次加载。

我要找出是什么导致了这次延误。因为它是一个基于主题的站点，所以代码很难通过。我想知道这里的人是否有足够的专家来解决这个问题并把它孤立起来？

如有任何建议，敬请谅解！

Answer 1

您的主题或插件正在生成以下CSS代码，这些代码负责此页面加载>空白页>页面加载循环：

<style type="text/css"title="dynamic-css"class="options-output">
    body {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.24s ease-in-out;
        -moz-transition: opacity 0.24s ease-in-out;
        transition: opacity 0.24s ease-in-out;
    }
    .wf-loading body {
        opacity: 0;
    }
    .ie.wf-loading body {
        visibility: hidden;
    }
    .heading .title {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.24s ease-in-out;
        -moz-transition: opacity 0.24s ease-in-out;
        transition: opacity 0.24s ease-in-out;
    }
    .wf-loading .heading .title {
        opacity: 0;
    }
    .ie.wf-loading .heading .title {
        visibility: hidden;
    }
    .heading .subtitle {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.24s ease-in-out;
        -moz-transition: opacity 0.24s ease-in-out;
        transition: opacity 0.24s ease-in-out;
    }
    .wf-loading .heading .subtitle {
        opacity: 0;
    }
    .ie.wf-loading .heading .subtitle {
        visibility: hidden;
    }
    .navigation-top .menu a,
    .navbar-default .navigation-top .menu>li>a {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.24s ease-in-out;
        -moz-transition: opacity 0.24s ease-in-out;
        transition: opacity 0.24s ease-in-out;
    }
    .wf-loading .navigation-top .menu a,
    .wf-loading .navbar-default .navigation-top .menu>li>a {
        opacity: 0;
    }
    .ie.wf-loading .navigation-top .menu a,
    .ie.wf-loading .navbar-default .navigation-top .menu>li>a {
        visibility: hidden;
    }
    .btn-primary,
    .btn-inverse:hover,
    #mc-embedded-subscribe-form input[type="submit"],
    .ctct-embed-signup .ctct-button,
    .contact input[type="submit"] {
        background-color: #2b6560;
    }
    .btn-primary,
    .btn-inverse,
    #mc-embedded-subscribe-form input[type="submit"],
    .ctct-embed-signup .ctct-button {
        border-color: #2b6560;
    }
    .btn-inverse {
        color: #2b6560;
    }
    .navigation-top .menu>li.active a,
    .navigation-top .menu>li>a:hover {
        border-color: #31ddb7;
    }
    a,
    a:hover,
    a:focus,
    .testimonials blockquote p:before,
    .pagemeta a:link,
    .pagemeta a:visited {
        color: #31ddb7;
    }
    .dropdown-menu>.active>a,
    .dropdown-menu>.active>a:focus,
    .dropdown-menu>.active>a:hover,
    .heading .title span,
    .main-navigation li li:hover,
    .main-navigation li li.focus {
        background-color: #31ddb7;
    }
    .navbar-default {
        background-color: #2b6560;
    }
    .navbar .navigation-top {
        padding-top: 0;
    }
    .navbar-transparent .site-title a {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.24s ease-in-out;
        -moz-transition: opacity 0.24s ease-in-out;
        transition: opacity 0.24s ease-in-out;
    }
    .wf-loading .navbar-transparent .site-title a {
        opacity: 0;
    }
    .ie.wf-loading .navbar-transparent .site-title a {
        visibility: hidden;
    }
    .navbar-default .site-title a {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.24s ease-in-out;
        -moz-transition: opacity 0.24s ease-in-out;
        transition: opacity 0.24s ease-in-out;
    }
    .wf-loading .navbar-default .site-title a {
        opacity: 0;
    }
    .ie.wf-loading .navbar-default .site-title a {
        visibility: hidden;
    }
    .hero h1 {
        font-family: Montserrat;
        text-transform: none;
        letter-spacing: 1.25px;
        font-weight: 400;
        color: #fff;
        font-size: 49px;
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.24s ease-in-out;
        -moz-transition: opacity 0.24s ease-in-out;
        transition: opacity 0.24s ease-in-out;
    }
    .wf-loading .hero h1 {
        opacity: 0;
    }
    .ie.wf-loading .hero h1 {
        visibility: hidden;
    }
    .hero h2 {
        font-family: Bayon;
        text-transform: none;
        letter-spacing: 1.25px;
        font-weight: 400;
        color: #dbdbdb;
        font-size: 35px;
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.24s ease-in-out;
        -moz-transition: opacity 0.24s ease-in-out;
        transition: opacity 0.24s ease-in-out;
    }
    .wf-loading .hero h2 {
        opacity: 0;
    }
    .ie.wf-loading .hero h2 {
        visibility: hidden;
    }
    .hero {
        background-size: cover;
        background-image: url('https://frameless.ca/wp-content/uploads/2018/02/Twilight-1-1.jpg');
    }
    #welcome {
        padding-top: 250px;
        padding-bottom: 200px;
    }
    .features .feature i {
        color: #19232d;
        font-size: 50px;
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.24s ease-in-out;
        -moz-transition: opacity 0.24s ease-in-out;
        transition: opacity 0.24s ease-in-out;
    }
    .wf-loading .features .feature i {
        opacity: 0;
    }
    .ie.wf-loading .features .feature i {
        visibility: hidden;
    }
    .features .feature h3 {
        text-align: center;
        letter-spacing: 1.25px;
        color: #19232d;
        font-size: 30px;
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.24s ease-in-out;
        -moz-transition: opacity 0.24s ease-in-out;
        transition: opacity 0.24s ease-in-out;
    }
    .wf-loading .features .feature h3 {
        opacity: 0;
    }
    .ie.wf-loading .features .feature h3 {
        visibility: hidden;
    }
    .features {
        background-color: #a8ffef;
    }
    .features {
        padding-top: 100px;
        padding-bottom: 130px;
    }
    .work {
        background-color: #2b6560;
    }
    #work {
        padding-top: 20px;
        padding-bottom: 0;
    }
    .gallery {
        background-color: #ffffff;
    }
    .gallery {
        padding-top: 66px;
        padding-bottom: 0;
    }
    .project-single {
        background-color: #ffffff;
    }
    .project-single {
        padding-top: 66px;
        padding-bottom: 0;
    }
    .projects-grid {
        background-color: #ffffff;
    }
    .projects-grid {
        padding-top: 66px;
        padding-bottom: 0;
    }
    .clients {
        background-color: #ffffff;
    }
    .clients {
        padding-top: 66px;
        padding-bottom: 66px;
    }
    .stats .fa,
    .stats p {
        color: #ffffff;
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.24s ease-in-out;
        -moz-transition: opacity 0.24s ease-in-out;
        transition: opacity 0.24s ease-in-out;
    }
    .wf-loading .stats .fa,
    .wf-loading .stats p {
        opacity: 0;
    }
    .ie.wf-loading .stats .fa,
    .ie.wf-loading .stats p {
        visibility: hidden;
    }
    .stats {
        background-size: cover;
        background-image: url('https://frameless.ca/wp-content/themes/parallel-pro/images/bg-demo2.jpg');
    }
    .stats {
        padding-top: 66px;
        padding-bottom: 66px;
    }
    .testimonials {
        background-color: #19232d;
    }
    #testimonials {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .services .service i {
        color: #2b6560;
        font-size: 50px;
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.24s ease-in-out;
        -moz-transition: opacity 0.24s ease-in-out;
        transition: opacity 0.24s ease-in-out;
    }
    .wf-loading .services .service i {
        opacity: 0;
    }
    .ie.wf-loading .services .service i {
        visibility: hidden;
    }
    .services .service h3 {
        line-height: 36px;
        letter-spacing: 1.25px;
        font-weight: 400;
        font-style: normal;
        color: #19232d;
        font-size: 30px;
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.24s ease-in-out;
        -moz-transition: opacity 0.24s ease-in-out;
        transition: opacity 0.24s ease-in-out;
    }
    .wf-loading .services .service h3 {
        opacity: 0;
    }
    .ie.wf-loading .services .service h3 {
        visibility: hidden;
    }
    .services {
        background-color: #ffffff;
    }
    #services {
        padding-top: 66px;
        padding-bottom: 66px;
    }
    .pts {
        background-color: #f6f9fc;
    }
    .pts {
        padding-top: 66px;
        padding-bottom: 66px;
    }
    .brands {
        background-color: #ffffff;
    }
    #brands {
        padding-top: 66px;
        padding-bottom: 66px;
    }
    .calltoaction {
        background-size: cover;
        background-image: url('https://frameless.ca/wp-content/uploads/2018/01/widetm.jpg');
    }
    .calltoaction {
        padding-top: 150px;
        padding-bottom: 110px;
    }
    .calltoaction2 {
        background-color: #2b6560;
    }
    #calltoaction2 {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .about {
        background-color: #ff3333;
    }
    #about {
        padding-top: 66px;
        padding-bottom: 0;
    }
    .video {
        background-size: cover;
        background-position: center center;
        background-image: url('https://frameless.ca/wp-content/themes/parallel-pro/images/bg-demo4.jpg');
    }
    #team {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .team {
        background-color: #ffffff;
    }
    #team {
        padding-top: 66px;
        padding-bottom: 0;
    }
    .team {
        background-color: #ffffff;
    }
    #blog {
        padding-top: 66px;
        padding-bottom: 66px;
    }
    .newsletter {
        background-size: cover;
        background-image: url('https://frameless.ca/wp-content/themes/parallel/images/bg-demo.jpg');
    }
    #newsletter {
        padding-top: 66px;
        padding-bottom: 66px;
    }
    .contact {
        background-color: #19232d;
    }
    #contact {
        padding-top: 66px;
        padding-bottom: 66px;
    }
    .copyright {
        background-color: #121a21;
    }
    #copyright {
        padding-top: 30px;
        padding-bottom: 30px;
    }
</style>

如果您仔细查看上面的代码，您会发现几乎所有的页面部分和选择器都以.wf-loading类作为前缀，这些类带有opacity: 0;或visibility: hidden;值。