Blog

Blog

PHODAL

UX与网站速度优化——博客速度优化小记

承认过去打开首页的速度很慢很慢 ,过去可能需要6秒对于用户来说有点长,但是现在。。Page Load Time: 1.71 Seconds

其中的一个利器便是:

对于UX来说优化速度是重中之一,没有优化好的结果,便是用户在还没打开网页的时候就close了。

PageSpeed Insights for Chrome

PageSpeed Insights Chrome扩展是由Google官方开发的一款可以分析页面载入的各个方面,包括资源、网络、DOM以及时间线等等信息的插件,安装以后会附加到Developer Tools(开发者工具)中。

安装 PageSpeed Insights for Chrome

Chrome商店中下载

分析

Suggestion Summary

Click on the rule names to see suggestions for improvement.

Reduce blocking resources 
(L)Inline Small JavaScript
Minimize payload 
(M)Minify JavaScript, (L)Minify HTML
Minimize delay in page load 
(L)Avoid bad requests, (L)Put CSS in the document head, (L)Specify image dimensions
Other 
(L)Defer parsing of JavaScript, (L)Specify a cache validator, (L)Specify a Vary: Accept-Encoding header

上面给的建议都很具体,我们需要去优化些什么。实际上对于大部分成型的CMS来说,不需要做太多的优化,大多数情况下他们已经做得足够的好了。

PageSpeed Insights会告诉你优化完后有什么后果。

Minify JavaScript for the following resources to reduce their size by 28.4KiB (53% reduction).
Minifying http://www.phodal.com/.../Markdown.Converter.js could save 9.1KiB (67% reduction) after compression. See optimized content
 Minifying http://www.phodal.com/.../Markdown.Editor.js could save 9.0KiB (48% reduction) after compression. See optimized content

网站速度优化

常用的几个如下,只是我觉得合适的。

  • 利用浏览器缓存你的 js 和 CSS 文件
  • 把你的 .js 库文件地址替换成 Google CDN的地址
  • 精简和优化你的 js 和 CSS
  • GZIP 压缩你的 JS 和 CSS 文件

nginx GZIP 压缩文件

对于gzip来说在nginx下应该是


            gzip on;
        gzip_min_length  1k;
        gzip_buffers     4 16k;
        gzip_http_version 1.0;
        gzip_comp_level 2;
        gzip_types       text/plain application/x-javascript text/css application/xml;
        gzip_vary on;

ngxin缓存 js 和 CSS 文件

对于django来说便是下面这点配置


    location /static/ {
        alias /home/www/MK_dream/static;
        if ($query_string) {
            expires max;
        }
        expires 30d;
    }
    location ~* ^.+.(cur|jpg|png|ttf|otf|js|css|mpg|avi|mp3|swf|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|txt|tar|mid|midi|wav|rtf|mpeg)$ {
        root  /home/www/MK_dream/;
        expires 30d;
        access_log off;
    }

CDN

然而,真实的问题是这些库总是很大,特别是我在设计新的首页的时候把这些都放弃了。 使用CDN固然有很好的优化效果,然而你真的需要这些么?

网站速度优化

于是我放弃了绝大多数的JS,直到我意识到今天的访问量低了,我才意思到我把Google Analytics的代码也删了,最后首页只剩下这样一个问题:

Specify a cache validator

By specifying a cache validator - a Last-Modified or ETag header - you ensure that the validity of cached resources can efficiently be determined.
Learn more

Suggestions for this page

The following resources are missing a cache validator. Resources that do not specify a cache validator cannot be refreshed efficiently. Specify a Last-Modified or ETag header to enable cache validation for the following resources:
http://fonts.googleapis.com/css?family=Tangerine

来自Google 字体的问题。

对于优化来说,最好的便是删去不需要的功能。

1.刚开始以为是DNS的问题。

2.然后便开始以为是数据库的问题。

3.渐渐地发现JS起了一定的影响。

4.难道真的要生成静态页面么?

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

InfoQ社区编辑,CSDN前端博客专家

毕业于西安文理学院电子信息工程专业

长期活跃于开源软件社区 GitHub,专注于物联网和前端领域。

著有《自己动手设计物联网》(电子工业出版社)、曾作为技术专家审阅英国 Packt 出版社的物联网书籍《Learning IoT》、《Smart IoT》等书。

在 GitHub 开源有《Growth:全栈增长工程师指南》等六本电子书,并译有《物联网实战指南》。

联系我: h@phodal.com

标签

最近的一些事