标签: google-pagespeed

如何在IIS中为SVG文件启用gzip压缩？

我创建了一个web.config文件,该文件成功打开了文本和消息资源的静态压缩.但是,下面显示的显而易见的解决方案似乎对.svg压缩没有任何影响(验证gzip内容编码未在.svg文件的响应头中设置,但是通过chrome开发人员工具设置为.html,css等) .

这是我的web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpCompression minFileSizeForComp="1024" MaxDiskSpaceUsage="500">
            <scheme name="gzip"/>
            <staticTypes>
              <add mimeType="text/*" enabled="true"/>
              <add mimeType="message/*" enabled="true"/>
              <add mimeType="application/javascript" enabled="true"/>
              <add mimeType="image/svg+xml" enabled="true"/>
              <add mimeType="application/json" enabled="true" />
              <add mimeType="*/*" enabled="false"/>
            </staticTypes>
        </httpCompression>
        <urlCompression doStaticCompression="true" doDynamicCompression="true"/>
        <staticContent>
          <remove fileExtension=".svg" />
          <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
          <remove fileExtension=".svgz" />
          <mimeMap fileExtension=".svgz" mimeType="image/svg+xml" /> 
        </staticContent>
    </system.webServer>
</configuration>

Run Code Online (Sandbox Code Playgroud)

此问题的动机是按照Google Page Speed Insights的建议提供压缩的SVG字体.我一直在IIS 7.5/Windows 7和IIS 8/Windows Server 2012上测试这个web.config.

有任何想法吗？

compression iis svg gzip google-pagespeed

use*_*310

2013 12-06

9
推荐指数

1
解决办法

6053
查看次数

字体很棒的 CDN JS 在 Pagespeed Insights 上显示为渲染阻塞

我没有直接链接到 Font Awesome CSS，而是使用Font Awesome CDN 中的 js来允许异步加载主页上的图标，但 Google 的 Pagespeed Insights 仍将其标记为阻止渲染的 js。

我正在使用 Font Awesome CDN 提供的自定义 js 链接并将其放在该<head>部分中（我可以将它放在<body>Font Awesome CDN的末尾，但这就是 Font Awesome CDN 要求我放置的地方）。

<script src="https://use.fontawesome.com/mycustomcode.js"></script>

Run Code Online (Sandbox Code Playgroud)

是的，我通过在 Font-Awesome-CDN 上登录我的帐户打开了异步加载。

javascript css pagespeed google-pagespeed font-awesome

Anu*_*pam

2018 03-29

9
推荐指数

2
解决办法

1万
查看次数

如何避免 Google Ads 拖慢我的网站（尤其是移动网站）的速度？

我知道许多网站管理员认为页面速度毫无意义。但是，我相信这个因素是 Google 决定对任何网站进行排名的 TOP 3 因素之一。

我厌倦了看到 Google 自己的服务是如何减慢我的网页速度的。我写干净的代码。当我启动任何网站/应用程序时，它在 GTMetrix 和 Pingdom 上的得分为“A”，在 Google Page Speed（移动）上的得分为 100/100。通常，Google Ads 不会损害桌面版本。

但是，一旦我添加了至少一个 Google 广告，我的排名就会下降到“C”和 60-67/100（移动）。

当然，有人可能会说 Page Speed 不是 SEO 排名因素。好吧，对于 NYT、WSJ、Bustle、HuffPost 等，可能是。但对于任何新网站来说，速度是一个至关重要的因素。

不公平的是谷歌指出了自己的服务，这会拖慢我（和你）的项目，例如：

有 6 个没有远期到期日期的静态组件。

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
https://code.jquery.com/jquery-3.3.1.min.js (not Google)
https://adservice.google.ca/adsid/integrator.js?domain=xxx
https://adservice.google.com/adsid/integrator.js?domain=xxx
https://pagead2.googlesyndication.com/pub-config/r20160913/ca-pub- 
xxx.js
https://fonts.googleapis.com/css? 
family=Open+Sans:400,700|Roboto:700&lang=en

Run Code Online (Sandbox Code Playgroud)

减少 DNS 查找：

pagead2.googlesyndication.com: 6 components, 368.9K (136.4K GZip)
code.jquery.com: 1 component, 86.9K (30.2K GZip)
adservice.google.ca: 1 component, 0.1K (0.1K GZip)
adservice.google.com: 1 component, 0.1K (0.1K GZip)
googleads.g.doubleclick.net: 11 components, 173.4K (45.9K GZip)
fonts.googleapis.com: 1 …

Run Code Online (Sandbox Code Playgroud)

pagespeed google-pagespeed

Ale*_*rdo

2018 12-01

9
推荐指数

1
解决办法

7293
查看次数

如何使用java压缩图像？

从pagespeed我只获得图像链接和可能的字节和百分比优化,如压缩和调整大小https://example.com/...ts/xyz.jpg?036861可以节省212KiB(减少51%).压缩https://example.com/...xyz.png?303584508可以节省4.4KiB(减少21%).

举个例子,我有300kb的图像,对于这个图像,pagespeed显示100kb和30%的缩小.

这仅适用于一张图片,但我相信我会有很多图像用于压缩.那么如何通过将字节或百分比作为参数或使用java中的任何其他计算(通过使用API或图像处理工具)来压缩图像,这样,我可以获得谷歌建议的压缩版图像.

提前致谢.

java image image-processing image-compression google-pagespeed

Dar*_*tel

lucky-day

8
推荐指数

2
解决办法

2万
查看次数

Gatsby.js:在没有渲染阻止的情况下为版式主题加载Google字体

我正在使用Gatsby.js及其带有Irving主题的 Typography插件.

此主题需要Google字体"Exo"和"Yrsa",并<head>在导出的静态html文件部分添加导入:

<link href="//fonts.googleapis.com/css?family=Exo:700|Yrsa:400,700" rel="stylesheet" type="text/css"/>

Run Code Online (Sandbox Code Playgroud)

此导入是渲染阻止内容,如果可能,我会更愿意避免使用这些内容和Google PageSpeed Insights分数.

我尝试使用gatsby-plugin-google-fonts并将以下内容添加到我的gatsby-config.js中:

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Exo\:700`,
      `Yrsa\:400,700`,
    ],
  }
},

Run Code Online (Sandbox Code Playgroud)

然而,这只是添加了第二个导入调用.我应该将它们放在静态目录中吗？即使这样,我如何配置Typography仍然使用这些字体而不单独导入它们？

typography google-font-api google-pagespeed gatsby render-blocking

dou*_*lin

2018 01-23

8
推荐指数

1
解决办法

1642
查看次数

确保在Webfont加载期间文本仍然可见，而Google Pagespeed见解中没有解决该问题

即使在添加font-display: fallback到CSS 之后，也无法确保在webfont加载问题期间文本仍然可见，而在Google Pagespeed Insights报告中也无法解决。

我该如何解决该问题？

@font-face {
  font-family: Jura;
  src: url(../fonts/Jura-Regular.eot);
  src: url(../fonts/Jura-Regular.eot?#iefix) format('embedded-opentype'), url(../fonts/Jura-Regular.woff2) format('woff2'), url(../fonts/Jura-Regular.woff) format('woff'), url(../fonts/Jura-Regular.ttf) format('truetype'), url(../fonts/Jura-Regular.svg#svgFontName) format('svg');
  font-weight: 400;
  font-display: fallback;
}

Run Code Online (Sandbox Code Playgroud)

google-pagespeed

Hir*_*nan

2019 01-21

8
推荐指数

2
解决办法

3616
查看次数

图片中的图像元素没有明确的宽度和高度

PageSpeed Insights 警告我：

在图像元素上设置明确的宽度和高度，以减少布局偏移并提高 CLS。

但是，如果我使用这样的图片标签，我该如何修复它：

<picture>
    <source srcset="https://via.placeholder.com/150.webp" media="(max-width: 768px)" type="image/webp">
    <source srcset="https://via.placeholder.com/150.png x1, https://via.placeholder.com/300.png x2" media="(max-width: 768px)" type="image/png">
    <source srcset="https://via.placeholder.com/500.webp" type="image/webp">
    <source srcset="https://via.placeholder.com/500.png" type="image/png">
    <img src="https://via.placeholder.com/500.png">
</picture>

Run Code Online (Sandbox Code Playgroud)

我不需要在移动版本中使用宽度和高度为500px 的图像标签。我想要响应式图像。

当然，我可以在图像标签中设置属性宽度和高度，值为 500，然后在 css 中使用!import和@media，但我认为这只是无效的规则。

我怎样才能避免这个警告或修复它（如果可能的话）？

html image media-queries google-pagespeed

Vad*_*ich

lucky-day

8
推荐指数

1
解决办法

2661
查看次数