关注前端开发
关注用户体验

10个技巧助您提高网站访问速度

网站的访问速度和性能对用户体验来说是非常重要的。如果你的网站访问非常的慢,你不仅会失去用户,而且更可怕的是你会失去潜在的客户。像Google这样的互联网巨头也会把网站访问速度作为排名的一个参数。因此当你需要优化网站速度时,你需要考虑方方面面,每个毫秒。这里对改进网站性能提出一些基础和普遍的建议。

1、如果可能的话,延迟加载一些内容

可以使用Ajax来按需加载部分内容。比如一个相册,可以在用户浏览页面时先出缩略图,当用户点击了,然后异步请求原图并展示,这样用户如果只需要看几张图片,就不需要等待所有图片都加载下来。这种开发模式叫做延迟加载。
Ajax/Web开发类库如jQuery,Prototype,与及MooTools可以使得延迟加载更容易实现。

2、使用外部JS和CSS文件

当用户第一次加载网页时,浏览器会缓存住外部的CSS和JavaScript文件,所以将javascript和CSS放到外部文件比内联的会好。
使用内联CSS还会增加网页的渲染时间,让所有样式都定义在你的主CSS文件中使得浏览器渲染页面时少做一些工作,因为它一开始就知道所有需要应用的样式规则。另外使用外部javascript和css文件也有助于维护代码。

3、使用缓存系统

如果你发现网站总是连接数据库来查询产生出同样的结果,可能就需要使用缓存系统了。使用缓存的话,只需要生成一次特定的内容而不需要用户每次访问的时候都去生成。缓存系统也会根据配置周期性的刷新缓存。你可以生成静态HTML页,以减小服务器脚本执行的开消,或者使用数据库和服务端脚本缓存系统,比如PHP的加速器,memcached等。

4、避免在html中改变图片大小

如果一张图片原本是1280*900px的,但是你需要它显示为400*280px的,你应该用图片编辑器,如Photoshop来改变它的大小,而不是使用HTML的width和height属性。

5、不要使用图片来展示文字

图片中的文字不但对用户不友好(无法复制等),对SEO也没有好处,而且使用图片来显示文字会增加页面加载时间。如果你需要在网站中使用很多自定义的字体,可以考虑使用CSS的@font-face特性去更有效率地展现特定字体。

6、使用正确的文件格式来优化图片大小

通过选择正确的力图片格式,你可以在不损失图片质量的情况下优化图片大小。例如,除非你需要PNG提供的图片透明,否则JPG一般来说可以在较小的文件情况下逼真地显示图片。

7、优化写代码的方式

查看你的源代码,看看是否所有标签都是需要的,或是可不可以用CSS来代替。有效的书写代码不但减小HTML和CSS文件的大小,也能方便维护。

8、在文档的最后加载javascript

所有scripts都在页面最后加载会比一开始就加载好,它可以让浏览器在加载javascript前渲染所有东西。浏览器在javascript下载完之前阻塞下面的内容的加载。如果可以的话,尽量将javascript放在紧挨着body结束标签的地方。

9、使用内容分发网络(Content Delivery Network,CDN)

网站的速度和用户相对于服务器的位置有很大的关系。将内容分发到不同的地理位置可能可以缓解这个问题。使用CDN可能会增加费用,但是收益也是很明显的。

10、优化网页缓存

既然使用了缓存系统,你应该使用尽可能多的缓存技术。网页缓存是浏览器端对文件做的缓存,然后供用户之后的访问。浏览器可以缓存的内容包括CSS文件,javascript文件和图片。

除了把多个页面都用到的CSS和javascript放在一个外部文件以外,还有很多方法来保证文件缓存起到最大的作用。例如你可以设置HTTP响应头为Expires和Last-Modified来减少用户重新访问你网站时特定文件重新下载的次数。

源:http://sixrevisions.com/web-development/site-speed-performance/

赞(0)
未经允许不得转载:大前端 » 10个技巧助您提高网站访问速度
分享到: 更多 (0)

评论 24

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #23

    Looks realy great! Thanks for the post.

  2. #22

    Nice post! Thank you.

  3. #21

    Thanks for this nice post. …

  4. #20

    Nice post! Thank you.

  5. #19

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

  6. #18

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

  7. #17

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

  8. #16

    Nice post! Thank you.

  9. #15

    Looks realy great! Thanks for the post.

  10. #14

    Nice post! Thank you.

  11. #13

    Enjoyed the post.

  12. #12

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

  13. #11

    Having read this I thought it was really informative. I appreciate you spending some time and energy to put this content together. I once again find myself spending a lot of time both reading and posting comments. But so what, it was still worthwhile!

  14. #10

    Enjoyed the post.

  15. #9

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    zzp1周前 (04-10)回复
  16. #8

    I really like it when folks get together and share thoughts. Great website, continue the good work!

    Apex Legends3周前 (03-31)回复
  17. #7

    J’admire cette diapositive toutefois j’en ai deja vu bien d’autres de meilleures qualifications:

  18. #6

    I have been exploring for a little bit for any high quality articles or blog posts on this kind of area . Exploring in Yahoo I finally stumbled upon this web site. Studying this information So i am happy to convey that I have a very excellent uncanny feeling I discovered exactly what I needed. I most definitely will make certain to don’t put out of your mind this web site and provides it a glance a relentless basis.

    Orlando Blommer1个月前 (03-11)回复
  19. #5

    嗯!我连看都是不是很明白!没学识啊!

    无觅购7年前 (2012-05-25)回复
  20. #4

    否则JPG一般来说可以在较小的文件情况下逼真地显示图片。 这是第六点的后面一句话

    我想问下能不能直接告诉我如何才能将JPG在较小的文件情况下保真地显示图片,本人在网上找过很多方法一直没能实现,先在此谢过

    yjsart8年前 (2011-08-18)回复
    • 一般网页上用的jpg格式的都是web存储后质量50-60,60为佳

      浩子8年前 (2011-08-18)回复
  21. #3

    这个学习了~哈哈~最近在浏览大前端的老文章~也学到不少东西啊哈

    qixun8年前 (2011-05-08)回复
  22. #2

    最后一个优化网页缓存,不是很了解

    蜜瓜8年前 (2011-02-06)回复
  23. #1

    有些是用到了,有些不知道怎么用,要是有比较详细的教材就好了。。

    菜心8年前 (2011-01-29)回复

themebetter 国内更好的WordPress主题服务商

立即前往