图像速度很慢,文档加载完成后不会出现在页面上
Nal*_*roc 16 html loading image-loading
目标:所有图像在首次加载时出现.
当前:如果幸运的话,第一次加载时会出现两三张图像; 需要页面引用才能查看所有图像.
这是我的第一个手工编写的网站.客户是设计师,所以高质量的图像很重要.性能和速度对我来说很重要,因为现在我的投资组合中,我不能接受部分功能的网站作为我的工作.
这是一个示例页面:
http://elisamantovani.com/pages/book_design.html
查看其他页面.同样的问题.
更新:
许多人建议缩小图像文件大小.不管怎样,只有少数图像很大,但现在它们都很好.没有图像大于200kb,大多数图像检查<100kb.问题依然存在.
谷歌建议阻止页面呈现的其他原因,例如渲染阻止JS/CSS.CSS应该阻止渲染直到加载,但不应该花费很长时间来加载.如果jQuery可以等到HTML/CSS渲染之后我想要它.
刚进入缓存控制.已将此添加到.htaccess提高性能一点点,但这只是将有助于后第一次加载,但需要的是对第一负载.
# One year for image files
<filesMatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>
# One month for css and js
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>
Kru*_*ter 13
如果您想测量脚本/图像加载速度的速度,那么您可以做的很简单.
转到Web检查器(或右键单击元素并单击"检查元素"),然后单击名为"timeline"的选项卡.现在重新加载您的页面.它将为您提供一个加载所需时间的度量.
在我的电脑上,您的网站需要3.40秒才能加载.不错.你似乎很高兴.
另外,如果你的图像加载速度很慢,那么图像可能不是脚本.确保你回去并在photoshop中重新压缩它们,以便它们是最高质量/最低文件大小
这是一个截图
这是你今天的加载时间的SS.这似乎是托管问题.
在Google洞察中运行网址表明您必须压缩和优化图片> = 60%
developers.google上有很好的写作,你可能会发现它对你的下一个项目也很有用!
您的图像加载速度缓慢的原因有多种!
一些建议:
- 缩小和压缩SVG资产
- 喜欢矢量格式
- 选择最佳光栅图像格式
- 删除不必要的图像元数
- 调整服务器上的图像大小,并确保"显示"大小尽可能接近图像的"自然"大小
- 投资自动化工具和基础设施,确保您的所有图像资产始终得到优化.
主要问题是图像的大小,你应该注意上传比你网站真正需要的图像大得多的图像.第一次加载速度要慢得多,因为图片不在您的浏览器缓存中...
如果您查看图像,您将看到:对于此页面,您需要一个图像,300x279并且您正在为1281x1192像素gif充电.然后,如果你看一下时间,你的图像正在加载~6s.这是真正的问题.因此请调整图像大小并重试.如果要清除浏览器缓存,Ctrl+F5.
有一些网页工具,如http://quickthumbnail.com/,你可以裁剪你的图像大小,或者你可以使用像Photoshop一样的图像编辑器,...