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

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签