标签: pagespeed

我正在寻求在PageSpeed上达到100/100而我几乎就在那里.我正在尝试找到一个很好的解决方案来缓存Google Analytics.

这是我得到的信息:

利用浏览器缓存在HTTP标头中为静态资源设置到期日期或最长期限,指示浏览器从本地磁盘而不是通过网络加载以前下载的资源.利用浏览器缓存以获取以下可缓存资源:http: //www.google-analytics.com/analytics.js(2小时)

我发现的唯一解决方案是从2012年开始,我不认为这是一个很好的解决方案.基本上你复制GA代码并自己托管.然后,您运行一个cron作业,每天重新检查一次Google以获取最新的GA代码并替换它.

http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

在使用Google Analytics的同时,我还能做些什么才能达到100/100？

谢谢.

我一直在使用Google PageSpeed的见解来尝试提高我网站的效果,到目前为止,它已经证明非常成功.像延迟脚本这样的东西工作得很漂亮,因为我已经有了一个内部版本的jQuery .ready()来推迟脚本直到页面完全加载,我所要做的就是内联该特定功能并将完整脚本移动到页面末尾.这很有效.

但是现在我发现自己瞪着核对清单上剩下的一个黄点:"在首映内容中消除渲染阻止CSS".

我的CSS设置方式是让一个全局_.css文件包含一般适用于页面结构的样式,或者在整个站点的多个或两个位置使用.然后,大多数页面都有一个关联的CSS文件(例如,party.php有party.css)包含特定于该特定页面的样式.所有CSS文件都无限期地缓存,因为我附加/t=FILEMTIME到文件名(后来用.htaccess删除它们),以保证文件在更改时更新.

因此,无论如何,Google建议内联上层内容所需的关键样式.麻烦是......好吧,看看这个截图:http://prntscr.com/1qt49e

正如你所看到的...... 所有内容都是首屈一指的!人们讨厌滚动,尤其是涉及加载许多页面的游戏.因此,我将网站设计为适合一个屏幕(假设分辨率足够好).所以这意味着... 所有的风格都适用于上面的内容!那么......有什么解决方案吗？或者我是否在那个近乎完美的分数上坚持那个黄色标记？

当您在网站上运行Google的Firebug/Firefox的PageSpeed插件时,它会建议可以无损压缩图像的情况,并提供下载此较小图像的链接.

例如:

• 无损压缩http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg可以节省33.5KiB(减少85%).
• 无损压缩http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg可以节省18.5KiB(减少77%).
• 无损压缩http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png可以节省262B(减少11%).
• 无损压缩http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png可以节省91B(减少51%).
• 无损压缩http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm可以节省61B(减少5%).

这适用于JPG和PNG文件类型(我没有测试GIF或其他.)

另请注意Flickr缩略图(所有这些图像都是75x75像素.)它们可以节省很多.如果这真的很棒,为什么雅虎不会将这个服务器端应用到整个库并减少存储和带宽负载？

即使Stackoverflow.com代表一些非常小的节省:

• 无损压缩http://sstatic.net/stackoverflow/img/sprites.png?v=3可以节省1.7KiB(减少10%).
• 无损压缩http://sstatic.net/stackoverflow/img/tag-chrome.png可以节省11B(减少1%).

我已经看到PageSpeed建议使用Photoshop的"Save for Web"功能创建的PNG文件相当不错.

所以我的问题是,他们对图像做了哪些改变以减少它们呢？我猜不同的文件类型有不同的答案.对于JPG来说,这真的无损吗？他们怎么能打败Photoshop？我应该对此有点怀疑吗？

Google PageSpeed说我应该为JS和CSS"指定一个Vary:Accept-Encoding标头".我怎么在.htaccess中这样做？

让我们面对现实吧,jQuery/jQuery-ui是一个重载下载.

Google建议延迟加载JavaScript以加快初始呈现速度.我的页面使用jQuery来设置一些位于页面下方的选项卡(主要是在初始视图之外),我想将jQuery推迟到页面呈现之后.

Google的延迟代码在页面加载后通过挂钩到正文onLoad事件为DOM添加标记:

<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>

我想以这种方式推迟加载jQuery,但是当我尝试它时,我的jQuery代码无法找到jQuery(我不是完全出乎意料):

$(document).ready(function() {
    $("#tabs").tabs();
});

所以,似乎我需要找到一种方法来推迟执行jQuery代码,直到加载jQuery.如何检测添加的标签是否已完成加载和解析？

作为推论,似乎异步加载也可能包含答案.

有什么想法吗？

Google PageSpeed经常建议优化CSS交付.在我看来,它会减少网络往返,以便像这样内联所有的CSS:

<style type="text/css">

    @{ 
        var bootstrap = File.ReadAllText(Server.MapPath("bootstrap.min.css"));
        var bootstrapTheme = File.ReadAllText(Server.MapPath("theme.min.css"));
        var fontAwesome = File.ReadAllText(Server.MapPath("font-awesome.min.css"));
        var bigfont = File.ReadAllText(Server.MapPath("bigfont.min.css"));
        var bigfontPrint = File.ReadAllText(Server.MapPath("bigfont-print.min.css"));
    }

    @Html.Raw(bootstrap)
    @Html.Raw(bootstrapTheme)
    @Html.Raw(fontAwesome)
    @Html.Raw(bigfont)
    @Html.Raw(bigfontPrint)

</style>

这似乎是缓慢页面加载问题的合理解决方案,并将我的PageSpeed得分从88增加到95.

暂时把代码风格放在一边,有什么技术原因,如果有的话,以这种方式插入所有CSS？

我们有一个官方公司网站。当我们检查页面速度时，该网站排名较低，并在“减少未使用的 JavaScript”中显示 Google 跟踪代码管理器脚本。由于谷歌标签管理器对网站很重要，有什么方法可以解决这个问题吗？“defer”属性不适用于该脚本。

如果我在侧边栏上使用此html加载图像

<img src="http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" height="200px" width="200px" alt="image" />

它会加载任何更快/更慢的加载比我放在侧边栏上我的style.css(在标题中调用)有

.image {
  width: 200px;
  height: 200px;
  background-image: url('http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png');
}

<div class="image"></div>

我有一个WordPress网站,我的客户想要完美验证(使用W3C验证器).其中一个问题是Google的pagespeed,它似乎默认由托管服务提供商启用.

我尝试使用以下内容禁用.htaccess文件中的mod_pagespeed,但由于某些原因它不起作用:

<IfModule pagespeed_module>
    ModPagespeed off
</IfModule>

我可以通过向URL添加"？ModPagespeed = off"来禁用它,但这并不能解决我的问题.

还有什么我可以尝试的吗？我只能通过FTP访问(没有服务器conf访问,没有c-panel访问等).

我正在尝试优化这个网站：electronicsportsitalia-it，当我尝试在 Google PageSpeed 上对其进行分析时，平台说有一种 Google 字体阻止了页面呈现：

https://fonts.googleapis.com/css?family=Lato:300,400,700

字体首先是通过 php 加载的，但后来我将它直接插入到 html 代码中，试图用以下代码加载它：<link rel=stylesheet id=avia-google-webfont href='//fonts.googleapis.com/css?family=Lato:300,400,700' type='text/css' media=all lazyload>- 也放在</body>标签之前- 但它没有用。

所以我尝试使用Web Font Loader加载它，实际上该网站正在运行这个脚本：`

</script>
<script>
  WebFont.load({
    google: {
      families: ['Lato']
    }
  });
</script>`

但在 PageSpeed 上总是同样的问题。

有人能帮我吗？