标签: google-pagespeed

我在页面底部引用了以下js脚本：

<script src="http://example.com/test.js" type="text/javascript"></script>

Google PageSpeed的建议是推迟加载此js。我不太了解该怎么做或产生的影响。有人可以解释一下吗？

我一直在尝试从API中检索屏幕截图,但是当我解码图像并保存它时,我得到了一个破碎的图像.以下是我正在使用的代码.如果您想测试它,我为包含谷歌响应的示例文件创建了一个tinyurl.

$name = 'test';
$result = file_get_contents('http://tinyurl.com/q4smyod'); 
$result = json_decode($result, true);
$decoded=base64_decode($result['screenshot']['data']);
file_put_contents('img/'.$name.'.jpg',$decoded);

我只是花了很长时间谷歌搜索...到处找到半答案.我正在使用谷歌页面速度见解来改进我的网站,它告诉我异步加载我的JavaScript.我找到了几个代码,但他们没有解释如何加载多个js文件以及如何加载css.我也找不到它告诉我加载它的顺序的任何地方.有人可以帮忙吗？

注意:我DID尝试将js移动到页脚,但我的移动菜单不再有效(使用expand.js文件)

我需要异步加载的Javascript文件是:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/h5.js"></script>
    <script language="javascript" type="text/javascript" src="js/expand.js"></script>

我的CSS:

    <link rel="stylesheet" type="text/css" href="style.css">

我正在为网站使用webp图像，但是Google Page Speed Insight无法识别它，因此无法提供优化的结果。GooglePage Insight不支持Webp图像？

例如。 http://cdn-gi.storehippo.com/s/548ee13cdb64e550191162b4/ms.slides/webp/585a2d21d679d2df1179c75b-2048x2048.png

我正在尝试从加载Google网络字体导致的Google Pagespeed洞察中删除"脚本作为渲染阻止文件"错误.互联网告诉我使用Web Font Loader加载字体异步.我在页脚中放置了下面的一段javascript,字体加载得很好,但我的pagespeed洞察结果中仍然出现了渲染阻塞错误.

注意:字体渲染阻止错误仅在移动测试中显示,而不是在桌面上显示.

<script>
      WebFontConfig = {
         google: {
            families: ['Archivo Narrow:300,400,700']
         }
      };

      (function(d) {
         var wf = d.createElement('script'), s = d.scripts[0];
         wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
         wf.async = true;
         s.parentNode.insertBefore(wf, s);
      })(document);
</script>

编辑:

尝试在关闭body标记之前添加脚本仍会导致渲染阻止文件错误:

<script>
   WebFontConfig = {
      google: {
         families: ['Archivo Narrow:300,400,700']
      }
   };

   (function(d) {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      document.body.appendChild(wf);
   })(document);
</script>

我在PageSpeed Insights中收到以下错误.我进入Minify"手动"模式并添加了以下CSS.但谷歌仍然抱怨CSS.我只有64/100的分数.请帮忙.

您的页面有1个阻止的CSS资源.这会导致呈现页面的延迟.在不等待加载以下资源的情况下,无法呈现页面上的上述内容.尝试推迟或异步加载阻止资源,或直接在HTML中内联这些资源的关键部分.优化以下内容的CSS交付:https: //www.northfloridacricket.com/wp-content/cache/minify/000000/4799b/default.include.4feacd.css

当我在GTmetrix上查看我的WordPress网站时,我收到此消息"跨主机名并行化下载"> https://gtmetrix.com

以下是详细信息> https://gtmetrix.com/parallelize-downloads-across-hostnames.html

我该如何解决这个问题？

我发现 Google Pagespeed Insight 有时很可笑。它说，优化 CSS 交付......说延迟脚本，移动到页脚，内联样式等等等......同时有很多建议说不要内联 CSS。不管怎样，我试过他们的脚本

 </noscript>
 <script>
  var loadDeferredStyles = function() {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener('load', loadDeferredStyles);
 </script>

我还尝试将 CSS 链接放在代码的底部。但谷歌仍然大喊“首屏内容”！！而且，延迟 CSS 会弄乱初始渲染，页面看起来像乞丐，直到整个东西都被加载了！

我知道他们说...'inline critical above the fold CSS'并推迟所有其他的。获得正确的方法仍然是一项令人沮丧的努力。

我的问题是，如果我让 CSS 放在 head 部分，它会影响我的 SEO 吗？并忽略“首屏”问题？因为这样即使加载需要时间，至少它会像一个体面的页面一样加载！无论如何，我的 CSS 并不大。

第二个问题是js。我无法让像 min.js 这样的 CDN js 兑现或延期......尽我所能......

总结基本问题 - 为 SEO …

我在 Google Pagespeed 中得到了这个推荐：

“了解更多”链接会导致 404。我试图弄清楚为什么这应该为我节省 7.08 秒，但找不到它。

我认为在页面上加载 10 个图标将是最后的优先事项？！图像、其他字体和脚本不是更重要吗？

或者以某种方式拖延某些事情，导致这些字体未加载？

我可以在我的网络选项卡中看到，如果我这样加载字体：

<link rel="preload" href="css/fontawesome.css" as="style" onload="this.rel='stylesheet'">

...这（确实如此）成为优先事项并在任何其他事情之前被加载。但我真的想要这样吗？

更新

我知道这可以解释为 SEO 问题，因为它源自 Google Pagespeed。但事实并非如此。这是一个“如何建立一个好的网站”的问题。在谷歌上的排名并不重要。网站上的体验很重要。

SVG 是矢量，因此可以在不损失任何质量的情况下调整大小。

知道这一点后，我的脑海中浮现出为什么我要使用正确大小的 SVG。在我看来，相同尺寸的 SVG 100px x 100px 的尺寸比 10px x 10px 的尺寸要大得多。

那么问题是我应该选择较小的文件大小并让浏览器调整图像大小，还是以正确的大小提供图像更好，这样浏览器就不必进行任何重新缩放（在许多情况下接受这一点）由于响应性，它必须以任何一种方式执行此操作）。

我知道这可能属于微优化的范畴，但似乎我的许多 SVG 可能要小得多，这可能有助于提高 Google 页面速度分数。