Question

我的网站在GTmetrix网页速度测试中得分为88％（89 Google），总页面大小为343kb，页面加载时间为1.4秒，但测试时显示的时间和年龄（约20秒）< / p>

该网站由Go daddy托管，并相信这可能是问题，但它证明了这一点。

这是一个plesk托管帐户，我正在尝试启用Leverage浏览器缓存，我已将.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

我仍然会收到需要启用Leverage浏览器缓存的错误消息，知道如何做到这一点？

如果有任何其他良好的速度/网络测试来帮助解决慢速页面显示问题吗？

Answer 1

你的问题是icomoon.tff 字体文件被认为是CSS 在将所有CSS加载到DOM之前，浏览器无法开始呈现页面。

页面实际上开始在大约1.6处渲染，其中紫色条纹（DOM Loaded）开始。

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

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

正如您所见，icomoon.tff在First paint和Start Render之间的1.863处开始。

在标题中移动字体文件链接或添加它。更好，不要使用它。

缓存是另一个问题。过期不是缓存控制在HTTP响应标头缓存控件中如下所示：

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',

Answer 2

如果您在浏览器中启动开发人员工具并查看其中一个HTTP请求，则看起来似乎没有正确设置Expires标头。

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

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

您可能还需要添加：

Header append Cache-Control "public"

到您的htaccess文件。

网站速度和杠杆浏览器缓存

2 个答案: