如何解决 Octopress 博客打开网页巨慢的尴尬

前言

如果你依照Octopress官方网站的说明文档,并已经成功搭建成功的话。 当你兴奋地打开你的网站,你一定会发现,为何网页完全加载完成会这么慢,极其的慢。 就我个人而言,我打开一个网页的整个时间平均在10s上下,10s,说实话,我自认为我还是一个耐心不错的人,10s的加载周期也让我有种抓狂的冲动。

那么,这篇博文将会帮助你提升访问速度。

第一步,修改_config.yml配置文件

打开_config.yml配置文件,这里有相关配置需要关闭,其中涉及到的服务因为是国外的,特别是谷歌的(被墙),会影响到访问速度。

1.去除Github仓库展示

1
2
3
4
5
#Github repositories
#github_user: androidyue
#github_repo_count: 11
#github_show_profile_link: true
#github_skip_forks: true

2. 去除Twitte

1
2
3
# Twitter
#twitter_user:
#twitter_tweet_button: true

3.去除Google+相关服务

1
2
3
4
5
6
7
8
# Google +1
#google_plus_one: true
#google_plus_one_size: medium

# Google Plus Profile
# Hidden: No visible button, just add author information to search results
#googleplus_user:
#googleplus_hidden: false

4.去除Pinboard服务

1
2
3
# Pinboard
#pinboard_user:
#pinboard_count: 3

5.去除Facebook Like

1
2
# Facebook Like
#facebook_like: true

6.去除disqus

注意:去除后,你嵌入的disqus评论系统就没有了
1
2
3
4
5
6
7
# Delicious
#delicious_user:
#delicious_count: 3

# Disqus Comments
#disqus_short_name: weiwosuoaigithubio
#disqus_show_comment_count: true

第二步,替换Octopress博客中依赖的资源

Octopress博客有很多依赖于Google的库和资源,正因为如此,才会导致你的博客访问速度巨慢无比。下面我们需要做的就是将这些资源替换成国内的资源:

1.替换ga.js

对于使用Google Analytics用户来说,加载ga.js这个文件巨慢无比,我们需要将其替换成 http://droidyue-tools.qiniudn.com/ga.js
修改source/_includes/google_analytics.html

1
2
3
4
5
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'http://droidyue-tools.qiniudn.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

2.替换fonts.googleapis.com依赖

Octopress博客需要用到google的字体,这里我们将其替换成360的字体库,将 fonts.googleapis.com 替换成 fonts.useso.com

修改文件/source/_includes/custom/head.html

1
2
3
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.useso.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.useso.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

3.替换ajax.googleapis.com依赖

ajax.googleapis.com 替换成 ajax.useso.com

修改source/_includes/head.html

1
2
3
4
5
6
7
8
<link rel="canonical" href="">
<link href="/favicon.png" rel="icon">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href="" rel="alternate" title="" type="application/atom+xml">
<script src="/javascripts/modernizr-2.0.js"></script>
<script src="//ajax.useso.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="/javascripts/libs/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>

总结

总而言之,导致博客打开页面的罪魁祸首是加载了一些国外服务器的资源和依赖。

文章有帮助到您?不妨打赏博主一碗拉面或一杯咖啡的小费吧 :-D!