承认过去打开首页的速度很慢很慢 ,过去可能需要6秒对于用户来说有点长,但是现在。。Page Load Time: 1.71 Seconds
其中的一个利器便是:
对于UX来说优化速度是重中之一,没有优化好的结果,便是用户在还没打开网页的时候就close了。
PageSpeed Insights Chrome扩展是由Google官方开发的一款可以分析页面载入的各个方面,包括资源、网络、DOM以及时间线等等信息的插件,安装以后会附加到Developer Tools(开发者工具)中。
到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
常用的几个如下,只是我觉得合适的。
对于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;
对于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固然有很好的优化效果,然而你真的需要这些么?
于是我放弃了绝大多数的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 Idea墙, 也许,你会遇到心仪的项目