<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Web on 疯狂的键盘</title><link>https://jidzhang.github.io/categories/web/</link><description>Recent content in Web on 疯狂的键盘</description><generator>Hugo</generator><language>zh-cn</language><lastBuildDate>Mon, 23 Mar 2015 00:00:00 +0000</lastBuildDate><atom:link href="https://jidzhang.github.io/categories/web/index.xml" rel="self" type="application/rss+xml"/><item><title>PHP 启用 Gzip 压缩加速网页加载</title><link>https://jidzhang.github.io/posts/php-enable-compression/</link><pubDate>Mon, 23 Mar 2015 00:00:00 +0000</pubDate><guid>https://jidzhang.github.io/posts/php-enable-compression/</guid><description>&lt;h2 id="为什么启用-gzip"&gt;为什么启用 Gzip&lt;/h2&gt;
&lt;p&gt;Gzip 压缩可将 HTML/CSS/JS 等文本内容压缩 60%-80%，显著减少传输量，加快页面加载速度。&lt;/p&gt;
&lt;h2 id="方法一wordpress-插件"&gt;方法一：WordPress 插件&lt;/h2&gt;
&lt;p&gt;在插件市场搜索 &lt;code&gt;gzip&lt;/code&gt;，安装 Gzip Compression 相关插件即可。最简单但会多一个插件。&lt;/p&gt;
&lt;h2 id="方法二修改主题-functionsphp无需插件"&gt;方法二：修改主题 functions.php（无需插件）&lt;/h2&gt;
&lt;p&gt;在 &lt;code&gt;wp-content/themes/你的主题/functions.php&lt;/code&gt; 末尾添加：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-php" data-lang="php"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cm"&gt;/* 启用 Gzip 压缩 */&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nx"&gt;add_action&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;init&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;&amp;#39;enable_gzip&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;enable_gzip&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;ob_start&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;ob_gzhandler&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;原理：&lt;code&gt;ob_gzhandler&lt;/code&gt; 是 PHP 内置的输出缓冲回调函数，会自动检测浏览器是否支持 Gzip 并启用压缩。&lt;/p&gt;
&lt;h2 id="方法三apache-配置推荐"&gt;方法三：Apache 配置（推荐）&lt;/h2&gt;
&lt;p&gt;如果服务器启用了 &lt;code&gt;mod_deflate&lt;/code&gt;，直接在 &lt;code&gt;.htaccess&lt;/code&gt; 中添加：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-apache" data-lang="apache"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nt"&gt;&amp;lt;IfModule&lt;/span&gt; &lt;span class="s"&gt;mod_deflate.c&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nb"&gt;AddOutputFilterByType&lt;/span&gt; DEFLATE text/html text/plain text/xml
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nb"&gt;AddOutputFilterByType&lt;/span&gt; DEFLATE text/css application/javascript
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nb"&gt;AddOutputFilterByType&lt;/span&gt; DEFLATE application/json
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nt"&gt;&amp;lt;/IfModule&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;这是最高效的方式，压缩在 Web 服务器层完成，不经过 PHP。&lt;/p&gt;
&lt;h2 id="验证效果"&gt;验证效果&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Firefox + Firebug（Network 标签）查看响应头中的 &lt;code&gt;Content-Encoding: gzip&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;或使用 &lt;a href="https://pagespeed.web.dev/"&gt;PageSpeed Insights&lt;/a&gt; 检测&lt;/li&gt;
&lt;/ul&gt;</description></item><item><title>使用 Google Analytics 追踪 404 页面</title><link>https://jidzhang.github.io/posts/google-analytics-track-404-page/</link><pubDate>Thu, 19 Mar 2015 00:00:00 +0000</pubDate><guid>https://jidzhang.github.io/posts/google-analytics-track-404-page/</guid><description>&lt;h2 id="为什么追踪-404"&gt;为什么追踪 404&lt;/h2&gt;
&lt;p&gt;404 页面意味着用户访问了不存在的 URL。追踪这些请求可以：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;发现损坏的内部链接&lt;/li&gt;
&lt;li&gt;了解用户想找什么内容（可能值得补充）&lt;/li&gt;
&lt;li&gt;找到哪些外部网站链到了你已删除的页面&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="实现方法"&gt;实现方法&lt;/h2&gt;
&lt;p&gt;在 404 页面的 Google Analytics 追踪代码中，将页面路径改为包含请求 URL 的自定义路径：&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;新版 GA（gtag.js）：&lt;/strong&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-html" data-lang="html"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;script&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nx"&gt;gtag&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;config&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;&amp;#39;GA_MEASUREMENT_ID&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;page_path&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="s1"&gt;&amp;#39;/404?page=&amp;#39;&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pathname&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;search&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="s1"&gt;&amp;#39;&amp;amp;from=&amp;#39;&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;referrer&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;script&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;旧版 GA（analytics.js）：&lt;/strong&gt;&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-html" data-lang="html"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;script&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nx"&gt;ga&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;send&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;&amp;#39;pageview&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;&amp;#39;/404?page=&amp;#39;&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pathname&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;search&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="s1"&gt;&amp;#39;&amp;amp;from=&amp;#39;&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;referrer&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;script&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="查看报告"&gt;查看报告&lt;/h2&gt;
&lt;p&gt;在 Google Analytics 中查看 &lt;strong&gt;行为 → 网站内容 → 所有页面&lt;/strong&gt;，搜索 &lt;code&gt;/404&lt;/code&gt;，即可看到：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;哪些 URL 触发了 404&lt;/li&gt;
&lt;li&gt;来源页面（&lt;code&gt;from&lt;/code&gt; 参数）&lt;/li&gt;
&lt;li&gt;访问频率和趋势&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;根据这些信息修复损坏链接或补充缺失内容。&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;&lt;em&gt;参考：&lt;a href="http://www.williamlong.info/archives/2699.html"&gt;月光博客&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;</description></item></channel></rss>