调用域名 frameless.ca 时，网站加载一毫秒，然后页面变为空白，再过一两秒钟，整个网站再次加载。
我需要找出导致此延迟的原因。由于它是基于主题的网站，因此代码很难通过。我想知道这里的人是否足够专家来找出问题并加以隔离？
任何建议都值得赞赏！
答案 0 :(得分：0)
您的主题或某个插件正在生成以下CSS代码，这些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;类的前缀。