堆栈内存溢出
  简体   繁体   English

如何“消除首屏内容中的阻止渲染的JavaScript和CSS”

[英]How to “Eliminate render-blocking JavaScript and CSS in above-the-fold content”

 原文  2015-07-07 21:56:46  7   1    javascript/ html/ css/ pagespeed

问题描述

I have a web page which receives a very poor "Mobile" score of 42%. 我有一个网页 ，其“移动”得分非常低，仅为42％。 The only item flagged in red is that I should "Eliminate render-blocking JavaScript and CSS in above-the-fold content". 用红色标记的唯一项是我应该“消除首屏内容中的阻止渲染的JavaScript和CSS”。 But all of the page is rendered above the fold, because it's all on the same page, without scrolling. 但是所有页面都呈现在折叠上方，因为它们都在同一页面上，而无需滚动。 And all of the JS and CSS is required for rendering the page. 呈现页面需要所有JS和CSS。

So am I just stuck with a big FAIL from Google, or is there something I've missed? 因此，我只是坚持Google的失败，还是错过了某些东西？

The main libraries I'm loading are: 我正在加载的主要库是： 

jquery.min.js
jquery-ui.min.js
jquery-ui-slider-pips.min.js

... and my own scripts for doing the gruntwork for the page. ...以及我自己的脚本来完成页面的繁琐工作。

What may be causing an issue is that I have an img div with a URL that points to a node server that generates a png on the fly, and it usually takes ~2 secs for that image to be served. 可能引起问题的是，我有一个img div，其URL指向动态生成png的节点服务器，并且通常需要2秒钟才能投放该图像。 But that div is hidden until its ready to display, so I can't see why that would be the real issue. 但是该div会一直隐藏，直到可以显示为止，因此我看不到为什么这是真正的问题。

Thanks for any insights that might help improve the google pagespeed score! 感谢您提供的任何见解，可能有助于提高Google Pagespeed得分！

1 个解决方案

解决方案1
 1  2015-07-10 10:26:32

combine and minified the js files and set into last tags on element 合并并缩小js文件并设置为element的最后一个标签 

<html>
<head></head>
<body>
<!-- html content -->
<script src="minified-script.min.js" type="text/javascript">
</body>
</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何修复 joomla 中的“在首屏内容中消除阻止渲染的 JavaScript 和 CSS” - How to fix “Eliminate render-blocking JavaScript and CSS in above-the-fold content” in joomla 在不影响响应性和性能的情况下，消除即时内容解决方案中阻止渲染的JavaScript和CSS - Eliminate render-blocking JavaScript and CSS in above-the-fold content solution without affecting responsiveness and performance OpenCart PageSpeed-在首屏内容中消除渲染阻止的JavaScript和CSS - OpenCart PageSpeed - Eliminate render-blocking JavaScript and CSS in above-the-fold content 在首屏内容中消除阻止渲染的JavaScript和CSS-Wordpress - Eliminate render-blocking JavaScript and CSS in above-the-fold content - Wordpress “尽管所有JS都位于页面的底部，但是在首映内容中消除了渲染阻止JavaScript” - “Eliminate render-blocking JavaScript in above-the-fold content” even though all JS is at the bottom of the page? Google PageSpeed消除了折叠式内容Wordpress中的渲染阻止CSS - Google PageSpeed Eliminate render-blocking CSS in above-the-fold content Wordpress 消除渲染阻止JavaScript和CSS - Eliminate render-blocking JavaScript and CSS nopcommerce 3.80折叠式内容中的阻止发布者的JavaScript和CSS - nopcommerce 3.80 ender-blocking JavaScript and CSS in above-the-fold content 如何消除渲染阻塞JavaScript - How to eliminate render-blocking JavaScript 解决首批内容中的JavaScript和CSS的选项 - Options to solve JavaScript and CSS in above-the-fold content
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM