标签: pagespeed

/var/www/html/My_project_folder 是我的项目的路径。我没有找到 .htaccess 文件。我想粘贴我编辑过的 .htaccess 文件。但我不确定我需要放在哪个位置？我的 htaccess 文件代码是——

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.php$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.php [L]
 <IfModule mod_expires.c>

 # Enable expirations
 ExpiresActive On

 # Default directive
 ExpiresDefault "access plus 1 month"

 # My favicon
 ExpiresByType image/x-icon "access plus 1 year”

 # Images
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/jpg "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"

 # CSS …

我的网站上有 Matt Willcox 出色的自适应图像。它是这样工作的：

• 服务器提供 800 像素的图像。
• 自适应图像重定向到不大于您的分辨率宽度的图像

问题是 BootStrap 在桌面和平板电脑和移动设备的全宽中以列显示图像。因此，从技术上讲，与较小的视口相比，自适应应该为桌面提供较小的图像。Google PageSpeed 为此向我猛烈抨击我。我有 800 像素的图像缩小到大约 150 像素左右。

我做了很多研究，但似乎找不到可行的解决方案。我应该破解自适应图像以查看分辨率宽度以外的功能以提供正确的图像吗？是否有不同的库可以解决此问题？

我一直在寻找一种优化图像以获得更好性能的解决方案。

在尝试了一些解决方案（例如Sharp和imagemin，这导致文件永远不会更小，有时更大）之后，我现在正在尝试尝试 Google 的 pagespeed。不幸的是，pagespeed 似乎只支持 Apache 和 Nginx，我不想将其添加到我的堆栈中只是为了图像优化（另外，我更喜欢在上传时进行优化，而不是在服务器请求时进行优化，即使缓存）。

我将非常感谢任何可能帮助我在本机 Node.js 中实现这一点的信息，以及任何其他（有效！）图像优化建议。

我希望能够使用 PageSpeedInsights测试需要用户名和密码的受保护 URL 。

我尝试使用http(s)://user:password@server但它看起来不起作用！

是否可以？任何的想法？
谢谢！

在我自己的网站上工作时，我的网站图标面临延迟加载时间（基于水流）。我尝试了很多方法来减少水流延迟，但未能成功。花了3个多小时后，我想出了这个解决方案，像魔术一样解决问题！！

第 1 步：将 favicon 转换为数据 URI（您可以从此处创建） 第 2 步：将现有的 favicon 替换为以下代码（在 function.php 或子函数中使用它）

function add_favicon() {
	echo '<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAICAAAAAAIACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAgBAAAAAAAAAAAAAAAAAAAAA.......=" />';
}

add_action('wp_head', 'add_favicon');

Google 提供了许多 polyfill 库，用于测量和跟踪分析平台上的首次输入延迟 (FID) 和交互时间 (TTI)。然而，这个指标不是 GA 的标准。

然而，domInteractive 是一个指标，您可以使用 GA 进行开箱即用的跟踪。

有什么不同？我找到的对竞争性交互指标的唯一解释是一个模糊的论坛帖子，解释说 TTI 可能会提供更复杂的交互延迟外观，但没有太多细节。

如果我担心影响转换的输入延迟，我是否最好跟踪我的用户的 TTI，或者我可以坚持使用 domInteractive？

Google PageSpeed ?? 在移动设备上向我显示“正确大小的图像”错误。

它加载了错误的链接（仅限移动设备）： wp-content/uploads/2019/07/od-nave-yaad-1024x1024.jpg

我究竟做错了什么？

<picture width="150" height="150" class="attachment-thumbnail size-thumbnail">
<source type="image/webp" sizes="(max-width: 150px) 100vw, 150px" srcset="wp-content/uploads/2019/07/od-nave-yaad-150x150.jpg.webp, wp-content/uploads/2019/07/od-nave-yaad-1024x1024.jpg.webp 1024w, wp-content/uploads/2019/07/od-nave-yaad.jpg.webp 300w">
<img src="wp-content/uploads/2019/07/od-nave-yaad-150x150.jpg" alt="" sizes="(max-width: 150px) 100vw, 150px" srcset="wp-content/uploads/2019/07/od-nave-yaad-150x150.jpg 150w, wp-content/uploads/2019/07/od-nave-yaad-1024x1024.jpg 1024w, wp-content/uploads/2019/07/od-nave-yaad.jpg 300w">
</picture>

在我的一些网站上，Google 的 Search Console 工具和 PageSpeed 在我的主页上显示移动设备上的最大首次输入延迟 300 秒和 PC 上的 900 秒。

奇怪的现象，因为即使在我禁用所有 javascript 和 css 代码的开发环境中，结果也不会改变。

此外，我在我的网站上安装了以下由 Google 开发的脚本：https : //github.com/GoogleChromeLabs/first-input-delay

它允许您通过 FID 将数据发送到 Google Analytics。在我的网站上，我在代码中添加了一行，以便浏览器控制台返回 FID ( console.log(delay);)。

结果并不奇怪：当您单击页面上的任何位置时，浏览器的响应时间不到 5 毫秒，在某些情况下为 10 毫秒。

所以我认为 google 并没有在页面上做简单的点击来计算 FID。顺便说一下，我也知道 FID 是由 Google Chrome 上的真实用户计算的，机器人无法完成。

但是在这种情况下，您如何识别可能需要半秒甚至一整秒才能让浏览器响应的元素？

尽管我在互联网上对此主题进行了长时间的研究，但都给出了相同的解释来做出诊断，但这对我的问题没有帮助。

当我收到网站报告时，我在“性能”部分下看到了 Google Analytics 的问题。 有办法解决吗？现在，如果用户代理包含 Google 机器人，我所做的只是关闭 GA 加载。

if (/googlebot|lighthouse/i.test(navigator.userAgent)) {
    window.ga=function(){};
} else {
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
}

我最近注意到 Google 更新了 PageSpeed Insight 报告页面。有一个“起源摘要”。

它到底是什么意思？为什么它与现场数据略有不同？