前言
說到 Wordpress，大家往往想到的是博客，其實，如今的 WordPress 已經成為全球使用量最多的開源 CMS 系統。并且，如果你有一定的技術基礎稍加改動，就可以搭建出新聞網站、企業網站、電影網站，甚至是商城系統等。據維基百科兩年前的統計，已經有超過 2 千萬的網站使用了 Wordpress 搭建自己的系統。
Wordpress 官網上有這么一句話：WordPress is both free and priceless at the same time。
說到價格無法衡量，有這么個真實的笑話：南非政府投入了四千萬南非蘭特（約合人民幣 2740 萬）重新設計政府網站，與一位承包商簽署了三年合同，最后得到了一個 WordPress 網站+ 40 美元主題。
本文主要向大家介紹如何快速大家 Wordpress 網站以及對WordPress 網站前端頁面性能監控優化的方法。
干貨滿滿，誠意十足！
一.快速搭建 Wordpress 站點
下載安裝 XAMPP （傻瓜式安裝，安裝時找一個自己能定位得到的文件夾）；
-
啟動 Apache 和 Mysql ，如下圖所示，然后在瀏覽器中輸入：http://localhost/phpmyadmin/ ， 進入數據庫管理界面，點擊「數據庫」，輸入數據庫名：wordpress（可自定義），數據庫格式選擇：「utf8 _ general _ ci」，鏈接校對選擇：utf8 _ unicode _ ci，然后創建數據庫。
快速搭建 Wordpress 站點
快速搭建 Wordpress 站點 下載 Wordpress，然后解壓至 XAMPP 安裝目錄下的 「htdocs」 文件夾下，將 wordpress/wp-config-sample.php 重命名為 wordpress/wp-config.php，然后用記事本打開，進行如下三處修改：修改數據庫名稱 「database _ name _ here」為你的數據庫名，在本例中是 wordpress，修改數據庫用戶名「username _ here」為 root，修改數據庫密碼為空，就是把「password _ here」刪除，然后保存
-
在瀏覽器中輸入：http://localhost/wordpress/ ，你應該可以看到如下設置頁面！
快速搭建 Wordpress 站點 -
在這個設置頁面設置站點標題，登陸用戶名，密碼即可，保存之后進入 Wordpress 登錄界面，登陸成功進入 Wordpress 管理界面
這樣，一個最基本的 Wordpress 站點就部署成功了，下面給大家介紹一個對于 Wordpress 模板的站點非常適用的性能監控工具——「Browser Insight」。
二.Wordpress 性能監控工具重點功能介紹
沒錯，本文的主題確實是打廣告！但是小編并不覺得羞恥，好的東西為什么不推薦給大家？大家有需求就去試下，有什么壞處么？用著開心的話，付不付費再說，推薦給朋友不過分吧？
閑話少說，我們繼續看······
1.主題優化
Wordpress 的一大特色就是具有豐富的主題，不同的主題頁可能導致頁面的加載時間不一致，其原因是每個主題都使用了大量的 JS 、圖片或者 css 文件等，如果你懷疑主題導致了性能問題，可對該主題進行性能測試。
WordPress 的好處之一也就在于其可編輯，Browser Insight 可以幫助前端人員分析 頁面資源加載耗時，就像下圖這樣的，會大大的方便前端優化人員的工作。
2.DNS、TCP耗時
DNS、TCP 耗時是大多數網站都比較關心的問題，Browser Insight 為使用者提供 TCP 耗時以及 DNS 資源監控，并且之后還會繼續深化這個功能。
CDN 資源監控還有很詳細的設備監控以及各種統計，值得各位嘗試下。
3.多維度的統計分析
除了上面圖中看到的 PV 統計之外，Browser Insight 還為使用者提供了多個維度的統計分析。
首先是從多個角度查看的頁面響應時間分布圖，畢竟一個網站沒有必要達到每次響應都盡善盡美，盡可能多的保證用戶體驗就可以了。
然后從用戶特性角度講，Browser Insight 提供了豐富的維度，從訪客地域一直到訪問設備等多個角度。
各個網站對于其下的不同域名的重視也在 Browser Insight 的考慮范圍內，訪問域名功能能讓使用者對自己站點下的不同域名的響應時間、吞吐量、時間百分比一目了然，進而進行定向的優化。
4.支持多個訪問的接入方式
我們都知道，現在大多數的訪問以移動端為主，例如：微信、移動端瀏覽器等。Browser Insight 不但能可以采集 PC 端的數據，還支持微信頁面、安卓 webview 以及移動端瀏覽器的頁面。
這樣的工具，難道你不心動？！
三.Wordpress 部署 Browser Insight 方法
那么問題來了，如此多維度契合 Wordpress 甚至大部分前端頁面的工具，如何部署到 Wordpress 主題上面呢？
登錄 OneAPM Browser Insight，創建一個賬號，如下圖。
在Bi界面中點擊右上角添加，輸入您想取的任何應用名字，然后復制生成的代碼。
-
登錄 Wordpress 管理界面，找打「外觀」、「編輯」，如下圖位置，進入主題編輯功能
Wordpress 網站搭建及性能監控方法詳解！ -
在外觀編輯頁面的右側找到頁眉，如下圖，然后點擊進入頁眉代碼頁
Wordpress 網站搭建及性能監控方法詳解！ -
如下圖所示，將上面復制的 Bi 代碼粘貼到頁眉的相應位置就可以了
Wordpress 網站搭建及性能監控方法詳解！
接下來，您就可以登錄 OneAPM 的 Browser Insight 查看上面介紹過的各個數據啦~
而且，Browser Insight 正在做插件部署方法哦，這個之后也會介紹給大家~
四.總結
現代的網站服務器與網站不斷發展，越來越多地依賴于諸多組件，WordPress 因為其特點被廣泛應用于各種網站、博客之中，所以對其有優化需求的用戶也非常之多。
本篇文章主要向大家介紹 Browser Insight 這款工具，確實是有打廣告的嫌疑，但是將好的東西分享給大家，小編問心無愧。衷心希望本文能幫助讀者創建速度更快、響應更迅速的 WordPress 網站。
Browser Insight 是一個基于真實用戶的 Web 前端性能監控平臺，能夠幫大家定位網站性能瓶頸，網站加速效果可視化；支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術文章，請訪問 OneAPM 官方技術博客。
本文轉自 OneAPM 官方博客
