标签: pagespeed
CSS/HTML:在图像上使用max-height是否有助于HTML渲染？
我刚读完YSlow建议总是定义图像尺寸(高度/宽度)以提高HTML渲染性能.
但是,我不知道我连接的图像尺寸.
我所知道的是,height永远不会超过200px,width永远不会超过300px
如果我定义(CSS),我会是一个好处:
img {max-height: 200px; max-width: 300px}
对于HTML性能渲染？
推荐指数
解决办法
查看次数
如何压缩HTTP响应头？
在Velocity 2010大会上,Google称头压缩可以带来巨大收益:
Hölzle注意到处理网页标题时效率低下,网页标题提供有关用户IP地址,浏览器和其他会话数据的信息.平均网页对不同的资源进行44次调用,其中许多请求包括重复的标头数据.Holzle表示,压缩标题会使一些领先站点的页面负载增加88%.
如何确保Web服务器发送的响应标头被压缩？这对今天的技术来说甚至可能吗？
推荐指数
解决办法
查看次数
利用浏览器缓存
我想利用浏览器缓存来提高页面速度.听起来像max-age和last-modified是很好的选择,但我不清楚如何确定我应该为它实现哪些文件.一般来说,我对如何实际执行此操作以及代码在我的htaccess中的外观感到困惑.我想我希望得到更明确的帮助或者展示一些例子.或者也许有人可以指导我参加这方面的课程/教程,像我这样的新手可以理解,我没有找到任何运气.任何了解更多关于max-age和last-modified的人的任何帮助都可以帮助告诉我如何做到这一点将不胜感激.我真的迷失了,并会付钱帮助我.谢谢.
推荐指数
解决办法
查看次数
HTML ETag和Github页面
我正在Udacity学习一门课程,我们正在学习ETag提供的缓存系统:
我正在使用GitHub页面,并在论坛中的答案:
我有一个明显的想法,我不能使用ETag来优化我的页面的加载速度.
这是真的？如果没有,我该怎么办？我完全迷失在这里,并希望得到任何可能的帮助!
推荐指数
解决办法
查看次数
PageSpeed Insights低分.1阻止CSS资源
我在PageSpeed Insights中收到以下错误.我进入Minify"手动"模式并添加了以下CSS.但谷歌仍然抱怨CSS.我只有64/100的分数.请帮忙.
您的页面有1个阻止的CSS资源.这会导致呈现页面的延迟.在不等待加载以下资源的情况下,无法呈现页面上的上述内容.尝试推迟或异步加载阻止资源,或直接在HTML中内联这些资源的关键部分.优化以下内容的CSS交付:https: //www.northfloridacricket.com/wp-content/cache/minify/000000/4799b/default.include.4feacd.css
推荐指数
解决办法
查看次数
如何使用 rel="preload" as="style" 或 as="script" 或更好的页面速度方法
我正在努力减少网页加载时间。当我搜索时，我来到了预加载 css 和 javascript 的阶段。
所以我试图在我的 html 页面中实现这个，请在实现之前和之后查看我的 html 代码
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" rel="stylesheet" type="text/css"> ...........
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js" type="text/javascript"></script>
</body>
</html>
实施后我像这样改变
<html>
<head>
<link rel="preload" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" as="style">
<link rel="preload" href="assets/js/jquery-1.12.4.min.js" as="script">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700">
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js"></script>
</body>
</html>
但我没有注意到速度有任何增加。所以请帮助以正确的方式做到这一点
我读了下面的文章
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content 。
但我想不通。请帮忙 。
或者有没有更好的方法来提高页面速度？
推荐指数
解决办法
查看次数
何时使用 rel="preload"？为什么预加载 fonts/FontAwesome 是个好主意？
我在 Google Pagespeed 中得到了这个推荐：
“了解更多”链接会导致 404。我试图弄清楚为什么这应该为我节省 7.08 秒，但找不到它。
我认为在页面上加载 10 个图标将是最后的优先事项？！图像、其他字体和脚本不是更重要吗？
或者以某种方式拖延某些事情，导致这些字体未加载？
我可以在我的网络选项卡中看到，如果我这样加载字体：
<link rel="preload" href="css/fontawesome.css" as="style" onload="this.rel='stylesheet'">
...这（确实如此）成为优先事项并在任何其他事情之前被加载。但我真的想要这样吗？
更新
我知道这可以解释为 SEO 问题，因为它源自 Google Pagespeed。但事实并非如此。这是一个“如何建立一个好的网站”的问题。在谷歌上的排名并不重要。网站上的体验很重要。
推荐指数
解决办法
查看次数
我应该以正确的大小提供 SVG，还是应该缩小它们并让浏览器调整它们的大小？
SVG 是矢量，因此可以在不损失任何质量的情况下调整大小。
知道这一点后，我的脑海中浮现出为什么我要使用正确大小的 SVG。在我看来，相同尺寸的 SVG 100px x 100px 的尺寸比 10px x 10px 的尺寸要大得多。
那么问题是我应该选择较小的文件大小并让浏览器调整图像大小，还是以正确的大小提供图像更好，这样浏览器就不必进行任何重新缩放（在许多情况下接受这一点）由于响应性，它必须以任何一种方式执行此操作）。
我知道这可能属于微优化的范畴，但似乎我的许多 SVG 可能要小得多，这可能有助于提高 Google 页面速度分数。
performance svg pagespeed google-pagespeed pagespeed-insights
推荐指数
解决办法
查看次数
为内嵌图像添加宽度和高度是否会增加页面加载性能？
为内嵌图像添加宽度和高度是否会增加页面加载性能？
<img id="moon" height="200" width="450"
src="http://www.domain.com/moon.png" alt="moon image" />
与此相比
<img id="moon" src="http://www.domain.com/moon.png" alt="moon image" />
推荐指数
解决办法
查看次数
压缩所需的外部js文件
我Gtmetrix用来测试我的页面加载时间.我gzip通过添加代码在我的网站上启用了压缩.htaccess
.htaccess代码:
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
但Gtmetrix仍显示以下警告
压缩http://s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js可以节省453.6KiB(减少71%).这是一个外部js文件.我怎么压缩这个？
推荐指数
解决办法
查看次数
标签 统计
pagespeed ×10
css ×3
html ×3
performance ×3
compression ×2
etag ×1
frontend ×1
github ×1
gzip ×1
header ×1
http ×1
javascript ×1
optimization ×1
svg ×1
xhtml ×1
yslow ×1