-
Notifications
You must be signed in to change notification settings - Fork 0
/
pagespeed-insights-optimize-blog.html
420 lines (278 loc) · 15.2 KB
/
pagespeed-insights-optimize-blog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
<!DOCTYPE html>
<html lang="zh-Hans,default">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
<link rel="mask-icon" href="/images/logo.svg" color="#222">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<script id="hexo-configurations">
var NexT = window.NexT || {};
var CONFIG = {"hostname":"www.mak-blog.com","root":"/","scheme":"Muse","version":"7.7.1","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
</script>
<meta name="description" content="因为经常在Google AdSense那里看到说我的网站状况只有两点评分，一直提示我的网页速度效果不好，然后点进去用PageSpeed看了一下，发现只有68的评分，尼玛，折腾的动力一下就有了，用了一个上午的时间，把分数提升到90的评分。下面是折腾的过程：主要是说我有两个红色感叹号的问题，不修正相应问题会对网页性能产生实质影响。然后那两个问题分别是启用压缩和使用浏览器缓存。">
<meta property="og:type" content="article">
<meta property="og:title" content="根据PageSpeed Insights优化博客">
<meta property="og:url" content="http://www.mak-blog.com/pagespeed-insights-optimize-blog.html">
<meta property="og:site_name" content="Songtao Mai">
<meta property="og:description" content="因为经常在Google AdSense那里看到说我的网站状况只有两点评分，一直提示我的网页速度效果不好，然后点进去用PageSpeed看了一下，发现只有68的评分，尼玛，折腾的动力一下就有了，用了一个上午的时间，把分数提升到90的评分。下面是折腾的过程：主要是说我有两个红色感叹号的问题，不修正相应问题会对网页性能产生实质影响。然后那两个问题分别是启用压缩和使用浏览器缓存。">
<meta property="article:published_time" content="2013-10-09T08:37:52.000Z">
<meta property="article:modified_time" content="2020-02-21T09:32:08.918Z">
<meta property="article:author" content="Songtao Mai">
<meta property="article:tag" content="启用压缩">
<meta property="article:tag" content="浏览器缓存">
<meta name="twitter:card" content="summary">
<link rel="canonical" href="http://www.mak-blog.com/pagespeed-insights-optimize-blog.html">
<script id="page-configurations">
// https://hexo.io/docs/variables.html
CONFIG.page = {
sidebar: "",
isHome: false,
isPost: true
};
</script>
<title>根据PageSpeed Insights优化博客 | Songtao Mai</title>
<noscript>
<style>
.use-motion .brand,
.use-motion .menu-item,
.sidebar-inner,
.use-motion .post-block,
.use-motion .pagination,
.use-motion .comments,
.use-motion .post-header,
.use-motion .post-body,
.use-motion .collection-header { opacity: initial; }
.use-motion .site-title,
.use-motion .site-subtitle {
opacity: initial;
top: initial;
}
.use-motion .logo-line-before i { left: initial; }
.use-motion .logo-line-after i { right: initial; }
</style>
</noscript>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div class="container use-motion">
<div class="headband"></div>
<header class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-container">
<div class="site-nav-toggle">
<div class="toggle" aria-label="Toggle navigation bar">
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
</div>
</div>
<div class="site-meta">
<div>
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">Songtao Mai</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
</div>
<div class="site-nav-right"></div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section"><i class="fa fa-fw fa-home"></i>Home</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>Archives</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>Tags</a>
</li>
<li class="menu-item menu-item-about">
<a href="/about/" rel="section"><i class="fa fa-fw fa-user"></i>About</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="back-to-top">
<i class="fa fa-arrow-up"></i>
<span>0%</span>
</div>
<main class="main">
<div class="main-inner">
<div class="content-wrap">
<div class="content">
<div class="posts-expand">
<article itemscope itemtype="http://schema.org/Article" class="post-block " lang="zh-Hans">
<link itemprop="mainEntityOfPage" href="http://www.mak-blog.com/pagespeed-insights-optimize-blog.html">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="Songtao Mai">
<meta itemprop="description" content="记录，分享，交流的空间">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Songtao Mai">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
根据PageSpeed Insights优化博客
</h1>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2013-10-09 16:37:52" itemprop="dateCreated datePublished" datetime="2013-10-09T16:37:52+08:00">2013-10-09</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-check-o"></i>
</span>
<span class="post-meta-item-text">Edited on</span>
<time title="Modified: 2020-02-21 17:32:08" itemprop="dateModified" datetime="2020-02-21T17:32:08+08:00">2020-02-21</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">In</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/%E7%AB%99%E7%82%B9%E7%9B%B8%E5%85%B3/" itemprop="url" rel="index">
<span itemprop="name">站点相关</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>因为经常在Google AdSense那里看到说我的网站状况只有两点评分，一直提示我的网页速度效果不好，然后点进去用PageSpeed看了一下，发现只有68的评分，尼玛，折腾的动力一下就有了，用了一个上午的时间，把分数提升到90的评分。下面是折腾的过程：主要是说我有两个红色感叹号的问题，不修正相应问题会对网页性能产生实质影响。然后那两个问题分别是启用压缩和使用浏览器缓存。</p>
<a id="more"></a>
<ol>
<li>启用压缩，使用gzip或deflate压缩资源可以减少通过网络发送的字节数。为以下资源启用压缩可将其传送大小减少133.7KiB（64%）。<br>google了一下，启用压缩的方法五花百门，有的通过php里面的库来压缩，有的直接把代码加进去压缩。不过我这种又想修改尽量少，又想实现得尽量合理。就选取了httpd里面的<code>mod_deflate</code>模块实现。<br>先说一下我的环境：亚马逊的Amazon Web Services的AMI服务器。httpd和php之类的全部都用yum命令自动装上的，貌似都是挺新的版本，所以可以本来就自带deflate模块，配置文件的路径可能不大一样。<br><code>sudo vi /etc/httpd/conf/httpd.conf</code><br>找到<code>LoadModule</code>这一行，确定没有被注释掉，如果前面有一个#就要把#删掉。<br><code>LoadModule deflate\_module modules/mod\_deflate.so</code><br>然后在<code>LoadModule</code>的后面添加下面的语句，设置压缩比例，压缩的文件类型。<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">DeflateCompressionLevel 6</span><br><span class="line">AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css text/javascript application/xml application/x-httpd-php</span><br><span class="line">AddOutputFilter DEFLATE html htm xml php css js</span><br></pre></td></tr></table></figure>
第一个问题这样就可以解决掉。</li>
<li>使用浏览器缓存，在 HTTP 标头中为静态资源设置过期日期或最长存在时间，可指示浏览器从本地磁盘中加载以前下载的资源，而不是通过网络加载。 这个问题更加简单 进入worldpress根目录，编辑<code>.htaccess</code><br>添加以下语句<br><code>Header set Cache-Control "max-age=864000"</code><br>表示如果是<code>css|gif|jpg|jpeg|png|ico|js</code>这些文件类型的话，就缓存864000秒，就是10天。<br>搞定，收工。</li>
</ol>
</div>
<footer class="post-footer">
<div class="post-tags">
<a href="/tags/%E5%90%AF%E7%94%A8%E5%8E%8B%E7%BC%A9/" rel="tag"># 启用压缩</a>
<a href="/tags/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98/" rel="tag"># 浏览器缓存</a>
</div>
<div class="post-nav">
<div class="post-nav-item">
<a href="/sfbuy.html" rel="prev" title="SFBuy海购丰运-海淘经历">
<i class="fa fa-chevron-left"></i> SFBuy海购丰运-海淘经历
</a></div>
<div class="post-nav-item">
<a href="/thunderex-e-channel-nexus5.html" rel="next" title="风雷速递E渠道海淘Nexus5">
风雷速递E渠道海淘Nexus5 <i class="fa fa-chevron-right"></i>
</a></div>
</div>
</footer>
</article>
</div>
</div>
<script>
window.addEventListener('tabs:register', () => {
let activeClass = CONFIG.comments.activeClass;
if (CONFIG.comments.storage) {
activeClass = localStorage.getItem('comments_active') || activeClass;
}
if (activeClass) {
let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
if (activeTab) {
activeTab.click();
}
}
});
if (CONFIG.comments.storage) {
window.addEventListener('tabs:click', event => {
if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
let commentClass = event.target.classList[1];
localStorage.setItem('comments_active', commentClass);
});
}
</script>
</div>
<div class="toggle sidebar-toggle">
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
</div>
<aside class="sidebar">
<div class="sidebar-inner">
<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc">
Table of Contents
</li>
<li class="sidebar-nav-overview">
Overview
</li>
</ul>
<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
</div>
<!--/noindex-->
<div class="site-overview-wrap sidebar-panel">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
<p class="site-author-name" itemprop="name">Songtao Mai</p>
<div class="site-description" itemprop="description">记录，分享，交流的空间</div>
</div>
<div class="site-state-wrap motion-element">
<nav class="site-state">
<div class="site-state-item site-state-posts">
<a href="/archives/">
<span class="site-state-item-count">126</span>
<span class="site-state-item-name">posts</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<span class="site-state-item-count">19</span>
<span class="site-state-item-name">categories</span>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags/">
<span class="site-state-item-count">173</span>
<span class="site-state-item-name">tags</span></a>
</div>
</nav>
</div>
</div>
</div>
</aside>
<div id="sidebar-dimmer"></div>
</div>
</main>
<footer class="footer">
<div class="footer-inner">
<div class="copyright">
©
<span itemprop="copyrightYear">2020</span>
<span class="with-love">
<i class="fa fa-user"></i>
</span>
<span class="author" itemprop="copyrightHolder">Songtao Mai</span>
</div>
<div class="powered-by">Powered by <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> v4.2.0
</div>
<span class="post-meta-divider">|</span>
<div class="theme-info">Theme – <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> v7.7.1
</div>
</div>
</footer>
</div>
<script src="/lib/anime.min.js"></script>
<script src="/lib/velocity/velocity.min.js"></script>
<script src="/lib/velocity/velocity.ui.min.js"></script>
<script src="/js/utils.js"></script>
<script src="/js/motion.js"></script>
<script src="/js/schemes/muse.js"></script>
<script src="/js/next-boot.js"></script>
</body>
</html>