忍耐是美德但对许多人来说,这往往是一个难以实践的概念。这对于访问一个需要很长时间加载的网站的网络用户来说尤其如此。用户喜欢快速的网站,而当一个网站响应缓慢时,访问者就会失去耐心,回访的可能性也会降低。
提高你的网站的速度不仅对用户很重要,而且对搜索引擎排名也去年4月,谷歌宣布他们现在在他们的搜索排名算法中加入了网站速度。虽然这个排名不像谷歌的其他排名信号那么重要,但它仍然是你在规划网站SEO时应该考虑的事情。
你需要监控你的网站是如何加载的,并弄清楚为什么装得这么慢如果它是。以下是一些减少网页加载时间的提示。
1.检查网站当前运行速度
您要做的第一件事是分析当前的页面速度。这允许您跟踪您的改进,并确保您所做的任何更改都积极地改善了页面加载时间。有很多免费的工具可以用来检查你的网站加载需要多长时间。
以下是其中一些:
- Pingdom提供了一个易于使用的网站速度测试,模仿网页在浏览器中加载的方式。
- 页面速度是一个开源的Firefox插件,可以帮助你评估网页的性能。它还提供了如何修复性能问题的建议。
- Web页面测试是另一个伟大的工具,显示您的网站在不同的浏览器的速度和性能。
2.优化你的图片
知道什么时候使用合适的图片文件格式。更改为不同的文件格式可以大大减少图像的文件大小。
- GIF是理想的图像很少的颜色,如徽标。
- JPEG非常适合有很多颜色和细节的图片,比如照片。
- PNG是在需要高质量透明图像时的选择。
查看这些资源,了解更多关于优化图像的信息:
3.不要缩小图片
避免使用比您需要的更大的图像,因为您可以设置宽度
而且高度
的属性< img >
在HTML元素。如果你需要一个100x100px的图片,而你已经有了一个700x700px的图片,使用像Photoshop之类的图片编辑器基于网络的图像编辑器将图像的大小调整到所需的尺寸。这降低了图像的文件大小,从而有助于减少页面加载时间。
4.压缩和优化你的内容
压缩网站内容的任务对减少加载时间有很大的影响。当使用HTTP压缩时,所有的网页数据都发送在一个较小的文件中,而不是一个充满了许多不同的文件的请求。要了解更多信息,请参阅Wikipedia上的这篇文章HTTP压缩.
您还可以通过组合JavaScript和CSS文件并缩小源代码来优化和压缩它们。
5.将样式表引用放在顶部
将样式表引用移动到< >头
HTML文档的帮助您的页面感觉加载更快,因为这样做允许您的页面逐步呈现样式。另外,它不会伤害到你这是W3C的标准.
6.把脚本引用放在底部
浏览器只能同时为每个主机名下载两个组件。如果您将脚本添加到顶部,那么在初始加载页面时,它将阻止任何低于它的内容。这会让页面加载速度变慢。
为了避免这种情况,将脚本引用放置在HTML文档尽可能靠下的位置,最好是在结束之前身体< >
标签。
7.将JavaScript和CSS放在外部文件中
如果JavaScript和CSS直接位于HTML文档中,则每次请求HTML文档时都会下载它们。这样就不能利用浏览器缓存,并且会增加HTML文档的大小。始终将CSS和JavaScript放在外部文件中;这是一个最佳实践,可以使您的站点更容易维护和更新。
8.减少HTTP请求
当访问一个新的网页时,大部分的页面加载时间花费在下载该页面的组件(例如图像,样式表和脚本)。通过将网页需要发出的请求数量最小化,它将加载得更快。
要减少对图像的HTTP请求,您可以做的一件事是使用CSS精灵组合多个图像。如果您有多个样式表和JavaScript库,可以考虑将它们组合起来以减少HTTP请求的数量。
9.缓存你的网页
如果你使用内容管理系统动态生成你的网页,你应该静态缓存你的网页和数据库查询,这样你可以减少你的服务器的压力,并加快页面呈现时间。当您缓存页面时,它将保存一个静态版本以呈现给用户,而不是在每次请求时重新创建它。为WordPress,请查看WP超级缓存而且w3total Cache(也读这WordPress优化/缓存WordPress的代码条目).
Drupal核心有本地缓存。
10.减少301重定向
每次使用301重定向时,它都会迫使浏览器转向一个新的URL,从而增加页面加载时间。如果可能的话,避免使用301重定向。
结论
如果您关心提供最佳用户体验,那么网页速度是一个不应该忽略的指标。你应该不时地将其作为基准,然后参考你的基准,以确保它不断提高。你可以通过自定义报告.
这些建议是通用的,但可以帮助您的网站的速度,无论您是一个船的经销商或者在餐厅,所以你应该在它们身上找到用处。想要更多关于减少网站页面加载时间的信息?读谷歌的页面速度部分,它提供了有关网站速度的工具、文章和社区反馈。
祝你好运,优化快乐!
相关内容
- 优化WordPress搜索引擎
- 网页设计师指南的PNG图像格式
- 评估网页设计的7个非常有用的工具
- 相关类别:Web开发而且网页设计