站点速度和利用浏览器缓存

Question

我有一个网站在 GTmetrix pagespeed 测试中得分为 88% (89 Google)，总页面大小为 343kb，页面加载时间为 1.4s，但在测试时显示需要时间和年龄（约 20 秒）

该站点由 Go daddy 托管，我相信这可能是问题所在，但它正在证明这一点。

这是一个 plesk 托管帐户，我正在尝试启用杠杆浏览器缓存，我已将 .htaccess 文件添加到包含以下内容的根目录中：

# BEGIN Expire headers

<ifModule mod_expires.c>

ExpiresActive On
ExpiresDefault "access plus 1 week"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 604800 seconds"
ExpiresByType application/xhtml+xml "access plus 1200 seconds"

</ifModule>

# END Expire headers

我仍然收到需要启用利用浏览器缓存的错误消息，知道这是如何完成的吗？

是否有任何其他好的 speed/network 测试可以帮助解决页面显示缓慢的问题？

Answer 1

如果您在浏览器中启动开发人员工具并查看其中一个 HTTP 请求，它看起来不像 Expires header 设置正确。

如果我重新加载页面，它会发出另一个完整请求，我会收到 200 响应。您的 htaccess 文件看起来没问题，但您是否尝试过另一个示例，本文中的示例看起来像完整包：

https://paulund.co.uk/set-expire-headers-in-htaccess

您可能还需要添加：

Header append Cache-Control "public"

到您的 htaccess 文件。

Answer 2

你的问题是icomoon.tff。
字体文件被认为是 CSS.
在将所有 CSS 加载到 DOM.

之前，浏览器无法开始呈现页面

页面实际上在紫色条纹（DOM 已加载）开始的大约 1.6 处开始呈现。

解析完jQuery后，DOM几乎在1.563完成。

遇到字体文件时，从 1.6 到 1.85 的所有渲染都被废弃，浏览器重新启动。

如您所见，icomoon.tff 开始于第一次绘制和开始渲染之间的 1.863。

将字体文件 link 在页眉中上移或添加。更好，不要使用它。

缓存是另一个问题。 Expires 不是缓存控制。
在 HTTP Response Header Cache 控件中看起来像这样：

Cache-Control: max-age=31536000, public

您需要在.htaccess 或服务器配置中设置缓存控制

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|svg|swf|mp3|vtt|)(\.gz)?$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

jQuery 让你付出代价。如果要正确地进行页面设计，请不要使用jQuery。此页面上没有任何内容需要 jQuery 才能呈现。没有它可以很容易地完成。事实上，当我禁用 JavaScript 时，页面看起来呈现相同。

CSS 可能会更好。耗时约 1.5 秒。
考虑到此页面可能会在大约 0.500 秒或更短的时间内加载，它会花费您 3 倍的页面加载时间。

如果您要高效地完成 CSS 而不是使用其他人的东西，CSS 将很适合 HTML <head><style> 并且此页面将开始在 0.400 之前渲染。

把它放在一个好的服务器上，GoDaddy 很烂，你的页面加载可能低于 0.300。 AWS 在性能和价格方面难以匹敌。使用 GoDaddy，您付出的代价太大了。

以下时间来自webpagetest.org

domElements' => 115,
pageSpeedVersion' => '1.9',
title' => 'Trinitas Designs',
titleTime' => 877,
loadEventStart' => 2646,
loadEventEnd' => 2652,
domContentLoadedEventStart' => 1563,
domContentLoadedEventEnd' => 1808,
lastVisualChange' => 2680,
browser_name' => 'Google Chrome',
browser_version' => '50.0.2661.94',
server_count' => 1,
server_rtt' => 139,
base_page_cdn' => '',
adult_site' => 0,
fixed_viewport' => 1,
score_progressive_jpeg' => 0,
firstPaint' => 1852,
docCPUms' => 1653.611,
fullyLoadedCPUms' => 1887.612,
docCPUpct' => 61,
fullyLoadedCPUpct' => 36,
isResponsive' => -1,
browser_process_count' => 9,
browser_main_memory_kb' => 50872,
browser_other_private_memory_kb' => 71108,
browser_working_set_kb' => 121980,
domInteractive' => 1563,
date' => 1462831114,
SpeedIndex' => 2278,
visualComplete' => 2680,

icomoon.tff

full_url' => 'http://www.trinitasdesigns.com/fonts/fonts/icomoon.ttf?2ym5un',
score_progressive_jpeg' => -1,
load_end' => 2638,
ttfb_start' => '1863',
ttfb_end' => 2033,
download_start' => 2033,
download_end' => 2638,
download_ms' => 605,
all_start' => '1863',
all_end' => 2638,
all_ms' => '775',

站点速度和利用浏览器缓存

Site speed and Leverage browser caching

html

performance

.htaccess

caching

pagespeed