使网站加载速度更快
我有 8 MB 的 PNG 文件,但问题是我无法再解压缩它们,我尝试了每个 png 压缩器。也许代码中还有一些东西?因为该网站需要永远加载。有没有办法可以压缩 javascript 或 html 等?
只需看一下源代码,也许我可以做一些事情来加快速度?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
您的页面上有无数的 http 请求。尝试使用 spritesheet 以及内联 css 和 javascript 来减少请求数量。
我发现您的菜单也在使用图像?尝试通过 @font-face 指令使用字体。 (当您将鼠标悬停在菜单项上时,这也会阻止您看到的闪光)
并尝试使用 jpeg(因为它们通常可以更好地压缩照片)进行幻灯片放映。使用 png 作为框架边框以实现透明度。这也将提供更大的灵活性,因为如果有更多照片要添加到杂耍中,您不必在 Photoshop 中手动添加边框。
您还可以做很多其他事情来提高速度。您应该尝试遵循现代网络行业的一些最佳实践。
一些对您有用的资源:
推动网络前进
HTML5 样板
There's like a zillion http-requests on your page. Try reducing the number of requests by using spritesheets and inlining css and javascript.
I see you are also using images for your menu? Try to use a font for that, with the @font-face directive. (this will also prevent the flash you are seeing, when you hover over the menu-items)
And try to use jpegs (as they allow much better compression for photographs in general) for the slideshow. Use a png for the frameborder to allow for transparency. This would also allow much more flexibility, since you don't have to manually add the frameborder in photoshop, should there be more photos to add to the sideshow.
There's like a ton of other stuff you could do to improve your speed. You should try to conform to some of the best practices in the modern web-industry.
Some useful resources for you:
Move the Web Forward
HTML5 Boilerplate
您是否使用 Photoshop 来创建 PNG?如果是这样,您是否使用了“文件”>“保存为 Web 来保存图像吗?这将大大减少 PNG 的大小。
Did you use Photoshop to create your PNGs? If so, did you use File > Save for Web to save the images? That will reduce the size of your PNGs by a ton.
尝试在 Firefox 中运行 YSlow 插件。
YSlow 根据 Yahoo! 的高性能网站规则来分析网页及其缓慢的原因。
https://addons.mozilla.org/en-US/firefox/addon/ yslow/
Try running the YSlow addon in Firefox.
YSlow analyses webpages and why they're slow based on Yahoo!'s rules for high performance web sites.
https://addons.mozilla.org/en-US/firefox/addon/yslow/
使页面加载速度更快的方法:
放在body
的末尾 - this确保初始 css 和 html 在任何 JavaScript 之前渲染
已加载。
透明度,不需要png。
Things to do to make your page load faster:
<scripts>
at the end of thebody
- thisensures that initial css and html is rendered before any JavaScripts
is loaded.
transparency, there is no need for png.
安装 Chrome 和 Firefox 的页面速度,它会测量您的速度并对其进行评级,并为您提供有关如何提高页面速度的建议。
http://code.google.com/speed/page-speed/
注意:您必须在 Chrome 上接受
实验性扩展 API
并安装适用于 Firefox 的 Firebug。享受!
Install page speed for Chrome and Firefox, which measures your speed and rates it and gives you suggestions on how to improve your page's speed.
http://code.google.com/speed/page-speed/
N.B: You must accept
Experimental Extension Apis
on Chrome and install Firebug for Firefox.Enjoy!