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

我的书《自己动手设计物联网》开卖了

本书从自己动手打造一个物联网出发,旨在教会读者如何从系统级别、架构级别去设计物联网,从而掌握打造物联网系统的全过程。本书在讲解的过程中遵循循序渐进的思想。首先,设计一个基于文本文件的物联网系统,向读者展示一个基本的物联网体系。然后,实现以互联网为基础的物联网系统,即以HTTP协议与Web编程为基础的物联网系统。最后,打造一个能结合多个物联网协议的物联网系统。

在这个过程中,读者还将学会如何打造物联网的相关应用——手机APP、温度趋势、网页端控制等,以及如何打造智能、安全的物联网系统的相关内容。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

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

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

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

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

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

联系我: h@phodal.com

标签

最近的一些事