整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
一篇《WordPress 網(wǎng)站全方位速度優(yōu)化：主機篇》講的是關(guān)于WordPress 網(wǎng)站所在主機的設(shè)置，這次我們來講網(wǎng)站內(nèi)部臃腫導(dǎo)致加載變慢。
還是上一篇那個例子，一個網(wǎng)站首頁總大小，如果從3MB下降到1MB。即便是1M 帶寬的主機，加載時間也會從25秒下降到8秒，也是很可觀的。但是要給網(wǎng)站減肥可不是一件容易的事兒，我盡可能的詳細介紹：
訪客的瀏覽器從遠程主機上抓取網(wǎng)頁，先抓取首頁的HTML 文件，然后再從 HTML 文件里提取出 CSS、JS、圖片、視頻等文件分別加載，有的 JS 和 CSS 里還會加載更多的 CSS、圖片、視頻。
有一個工具可以看到網(wǎng)頁加載過程，比如：文件數(shù)量、加載順序、每個元素的響應(yīng)時間、明細等信息。谷歌Chrome瀏覽器自帶的“檢查”工具，火狐 Firefox 的FireBug 工具都可以完成以上的工作。此外360瀏覽器，Safari 瀏覽器，IE 新版本都集成了這個功能。（如圖：minify是個 css 文件，大小426KB）
如果是咱們自己寫的 HTML、CSS、JS 文件，可以輕易瘦身，自己熟悉代碼哪里能優(yōu)化，但 WordPress 主題的 HTML、CSS、JS 我們是無能為力，只能通過Gzip壓縮解決。（如下圖，經(jīng)過 Gzip 壓縮，minify 文件 從426KB變成了57KB）
Gzip是服務(wù)器或者虛機提供的一種組件服務(wù)，簡單地說：Gzip開啟后，從主機到訪客之間傳送的文件會被壓縮處理，這樣就會減小通過網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量，提高瀏覽的速度。比如一個首頁150KB，但是經(jīng)過壓縮真實傳輸大小是25KB。（如下圖）
Gzip具體使用方法：主機不同調(diào)用方法也不同，有的是寫.htaccess，有的是安裝個插件，不管是那種，可以到 Chinaz 站長工具里面檢測（網(wǎng)址：http://tool.chinaz.com/Gzips/）。比如小紅公司的網(wǎng)站：www.jianzhan1.cn的 html 文件是150KB，Gzip 壓縮之后變成26KB，然后在火狐里用 FireBug 檢查首頁果然是25.9KB。雙重驗證說明 Gzip 生效了。此外Gzip 對 CSS 這類文本類的文件也會壓縮，比如有個CSS 文件是426KB，壓縮之后是57KB。
上圖為 ChinaZ 網(wǎng)站檢查結(jié)果，我們也可以從其他網(wǎng)站看出Gzip 是否生效，另外也可以用瀏覽器檢查工具檢查 header 是否有 Gzip。
通常Gzip只會壓縮 HTML 和 TXT 之類的文本文件，不建議用它來壓縮圖片，因為這樣會增加服務(wù)器 CPU 的負(fù)擔(dān)，還會增加圖片的體積，具體原因大家百度一下。后面會說給圖片瘦身。
網(wǎng)站上用的圖片大概這么幾種：1 頭部Slider的背景圖和前景圖。2 產(chǎn)品和案例的圖片。3 其他裝飾圖片。
不論什么圖片，第一步先看寬高尺寸，大小夠用就好，切忌貪大，尺寸越大，容量越大，下載越慢，特別是產(chǎn)品圖，有的同學(xué)直接上傳2000px寬的2MB 圖片。（很多同學(xué)不了解常識）
此外圖片還分透明圖片和不透明圖片：透明圖比如說去掉背景的產(chǎn)品圖，還有特殊字體的文字也需要做成透明圖片，可以把他們放到背景圖上。不透明的圖片比如說背景圖片和產(chǎn)品展示圖等。
先說透明圖片，常用PNG格式，當(dāng)然 PNG 圖片也有透明和不透明之分，還有8位和24位的區(qū)別。總而言之，透明圖片我們用 PNG，但是 PNG 圖片很大，解決辦法是，到 TingPNG 網(wǎng)站優(yōu)化壓縮，網(wǎng)址：https://tinypng.com/，通常可以得到比較好的壓縮比，圖片質(zhì)量幾乎沒變化。因為這種壓縮是在線壓縮，需要上傳和下載，有點麻煩，但是一次麻煩終身受益。
再說經(jīng)常用到的JPG 圖片，通常我們直接在PhotoShop 里修改，裁切大小，另存為 web 格式壓縮，jpg 質(zhì)量60左右。這個大家都會，我再分享個秘籍：“WP Smush”，這是一個 WordPress 插件，每次上傳圖片時會自動在線壓縮，壓縮比很高，質(zhì)量損失很小，速度稍慢，絕對值得，一般人我不告訴他。
PNG 透明圖和 JPG 圖的究極壓縮方法都是在線工具，小而精 小而美，這是他們的獨門秘籍，不會輕易外傳，在線提供服務(wù)也是一種保護。
網(wǎng)站上用的視頻通常有兩種方式，一種是托管在視頻網(wǎng)站，比如優(yōu)酷，我們在自己網(wǎng)站上引用優(yōu)酷視頻的地址，通常會有優(yōu)酷的標(biāo)志或者廣告。另外一種方式是把視頻存放在本地主機上，我們主要說這種。這種視頻往往容量很大，用戶下載慢，使用時一定要注意。下面說說如何優(yōu)化：
以小紅建站公司網(wǎng)站首頁為例，第一屏有個背景視頻，1000kb碼率的MP4格式，36秒，5.4MB，嚴(yán)重影響打開速度。壓縮成384kb碼率的webm格式視頻后，變成1.4MB，但畫質(zhì)很粗糙，顯得很low。最后把視頻剪輯成22秒，壓縮成512kb碼率的webm是1.4MB，質(zhì)量好些，在視頻上覆蓋一層灰色，遮住粗糙的視頻，整體顯得高檔。
這樣做還有個問題，IE11瀏覽器 和 微軟Edge瀏覽器 不支持webm 格式的視頻，這需要額外增加mp4格式的視頻給微軟的瀏覽器。訪客瀏覽器如果是支持webm視頻的谷歌等瀏覽器，網(wǎng)站直接給他看webm視頻；訪客如果是 IE 瀏覽器，網(wǎng)站會給他看 MP4視頻。
同樣22秒 512k的碼率MP4也是1.4MB，但是質(zhì)量差很多，不得不提升768k碼率，視頻質(zhì)量和webm的512k碼率類似。吐槽Edge瀏覽器，播放MP4的質(zhì)量好差，同樣一段視頻比IE11差不少，馬賽克嚴(yán)重。
以上是對站內(nèi)HTML，CSS，JS，圖片，視頻的優(yōu)化壓縮，木桶理論的兩塊木板“主機提速”和“站內(nèi)減肥”介紹完了，下集將是最后一集，講谷歌這個“外患”，還有外鏈，緩存，調(diào)用系統(tǒng)中文字體微軟雅黑，。
注：相關(guān)網(wǎng)站建設(shè)技巧閱讀請移步到建站教程頻道。
wordpress網(wǎng)站模板主題開發(fā)中，我們可能會碰到這樣一個問題：wordpress網(wǎng)站前臺頁面的頭部、側(cè)邊欄、底部的數(shù)據(jù)基本上是差不多的，有的甚至是一模一樣的，這時，我們還有必要在每一個頁面的頭部、側(cè)邊欄、底部重復(fù)添加或修改相同的代碼嗎？有沒有更好的方法。當(dāng)然是有的，我們可以把這些內(nèi)容代碼相同的部分，分割出來，放到一個公共的模板中，其它頁面可以直接引用就可以了。這樣的好處是，不需要每個頁面模板都重寫這些代碼，而且在后期的wordpress模板維護修改時，也方便維護修改——在需要修改這幾個部位的代碼時，只需要修改這幾個公共模板就可以了。下面，就隨我一起來為wordpress網(wǎng)站模板創(chuàng)建公共模板吧，我們將以頭部模板為例來做一下演示。
首先，我們在wordpress網(wǎng)站模板目錄下3個創(chuàng)建公共模板文件：header.php（頭部模板）、sidebar.php（側(cè)邊欄模板）、footer.php（底部模板），這些模板文件的名字是wordpress主題模板默認(rèn)的模板名。當(dāng)然，我們也是可以用其它名字的，不過，沒有這些文件名方便好用。
在sublime編輯器中打開wordpress模板的index.php首頁模板文件，在代碼中找到<!DOCTYPE html>和</header>標(biāo)簽（這里的模板是我們前面文章中創(chuàng)建的app模板），然后，把這兩個標(biāo)簽之間的代碼全部剪切下來，粘貼到header.php這個公共頭部模板中，代碼如下：
< !DOCTYPE html>< html>< head>< meta charset="UTF-8"> < title>< ?php wp_title(" - ",true,right); bloginfo("name"); echo " - "; bloginfo("description"); ?> </title>< link rel="stylesheet" href="< ?php bloginfo("stylesheet_directory"); ?>/style.css"> < ?php wp_head(); ?></head>< body> < header>< ?php $menu=array( 'container'=> false, //最外層標(biāo)簽名。'container_class'=> '','menu_class'=> 'aaa','menu_id'=> '', 'theme_location'=> 'menu_top', //菜單名 。 );wp_nav_menu($menu);?></header>
如下圖：
分離出頭部的代碼后，首頁模板index.php文件代碼就沒有了頭部的原始代碼了，這時，我們打開wordpress網(wǎng)站前臺頁面，就會出現(xiàn)頁面布局亂了，因為沒有了頭部，也就沒有了CSS樣式了。那么，我們怎樣在首頁模板中引用這個公共的頭部模板呢？方法有兩種。
方法1：使用PHP函數(shù)—— include()來引用頭部模板header.php。代碼如下：
include("header.php");
通過include()函數(shù)引入的方式，有它獨特的好處，它可以引入任何名字的.php后綴的文件，也就是說，我們的公共頭部模板名不是header.php，也是同樣可以方便引入的。
方法2：通過wordpress函數(shù)來引入頭部模板header.php。代碼如下：
get_header();
?這個函數(shù)在沒有參數(shù)的情況下，可以直接引入模板名為header.php的模板文件。這個函數(shù)也可以給它添加一個參數(shù)，如：get_header("mobile")，這就是要引用wordpress模板文件header-mobile.php。加參數(shù)引入公共模板時，這個公共模板的名字必須是以header-作為前綴的。
以上，我們簡單介紹了“如何為wordpress添加和調(diào)用公共模板header.php”。側(cè)邊欄模板和底部公共模板的創(chuàng)建和引用方式也是一樣的，只是wordpress自帶的調(diào)用函數(shù)不一樣，側(cè)邊欄調(diào)用函數(shù)是get_sidebar()，底部模板調(diào)用函數(shù)是get_footer()，它們的使用方式跟get_header()函數(shù)是一樣的，這里就不多說了。
課程介紹】
在這個全球化浪潮洶涌的時代，外貿(mào)行業(yè)正以前所未有的速度發(fā)展，而擁有一個既能吸引國際客戶眼球，又能高效優(yōu)化搜索引擎（SEO）的外貿(mào)網(wǎng)站，無疑是通往成功之路的鑰匙。今天，就讓我們一起踏上這場從0到1的WordPress外貿(mào)建站與SEO優(yōu)化之旅，揭秘如何打造一個讓詢盤如潮水般涌來的國際電商平臺！
WordPress外貿(mào)網(wǎng)站不僅將成為一個展示產(chǎn)品、吸引客戶的窗口，更將成為一個SEO優(yōu)化得當(dāng)、詢盤不斷的營銷利器。記住，外貿(mào)建站與SEO優(yōu)化是一場持久戰(zhàn)，需要持續(xù)的努力與創(chuàng)新。但只要你堅持下去，成功就在不遠處向你招手！
【課程目錄】
1-1如何選擇適合SEO的域名
2-2域名與服務(wù)器購買
3-3域名解析+服務(wù)器設(shè)置+網(wǎng)站安裝
4-4開通免費企業(yè)郵箱
5-5wordpress主題與插件安裝
6-6wordpress網(wǎng)站主題介紹左側(cè)導(dǎo)航欄1
7-6wordpress后臺左側(cè)導(dǎo)航欄介紹2
8-7enfoldchildthemeoption講解①
9-7enfoldthemeoption講解②-generalstyling
10-7themeoption講解③
11-8SEO基礎(chǔ)理論
12-9構(gòu)成網(wǎng)頁的主要元素
13-10外貿(mào)B2B網(wǎng)站頁面布局
14-11關(guān)鍵詞調(diào)研工具
15-12如何選擇最值得做SEO的關(guān)鍵詞
16-13SEO工具之谷歌瀏覽器插件
17-14SEO關(guān)鍵詞的種類
18-15關(guān)鍵詞的優(yōu)化布局與checklist
19-如何準(zhǔn)備On-PageSEO內(nèi)容
20-實操課：將搜集到的關(guān)鍵詞轉(zhuǎn)化為On-page提綱
21-制作單個產(chǎn)品頁面視頻實操
22-FORMMAKER插件詳解
23-如何找到合適的寫手
24-如何利用博客做內(nèi)容營銷
25-制作高轉(zhuǎn)化率的ABOUTUS頁面
26-ABOUTUS頁面制作實操-1
27-ABOUTUS頁面制作實操-2
28-ABOUTUS頁面制作實操-3
29-ABOUTUS頁面制作實操-4
30-網(wǎng)站名稱與鏈接設(shè)置
31-BLOG頁面的搭建+通過郵件發(fā)布博客
32-Contact頁面及Footer信息修改
33-RANKMATH詳細設(shè)置實操
34-Productcategory頁面優(yōu)化01
35-siteground的替代方案
36-ProductCategory頁面優(yōu)化02
37-ProductCategory頁面優(yōu)化03
38-優(yōu)化內(nèi)鏈和錨文本
39-Homepage設(shè)計與優(yōu)化
40-Homepage搭建與RankMath優(yōu)化
41-如何給網(wǎng)站加上B2C在線零售功能
42-網(wǎng)站外鏈建設(shè)
43-谷歌部分免費工具介紹
44-如何監(jiān)測網(wǎng)站轉(zhuǎn)化率
45-網(wǎng)站的維護與推廣
46-給網(wǎng)站添加在線聊天功能
47-GA更新后，如何找到原來的UA代碼
48-新版Siteground后臺操作指南
49-如何綁定多個域名到同一個網(wǎng)站
50-如何去掉enfold主題自帶的Layerslider
51-子域名的應(yīng)用
52-如何新增和安裝子域名
53-【網(wǎng)站提速】如何設(shè)置CDN加速
54-圖片SEO詳解
55-單品關(guān)鍵詞挑選和上傳
56-巧用Attribute
以上只是大概的框架，具體的課程每一個點都會展開來講，配合視頻教程手把手實操，相信跟著學(xué)的朋友一定能在學(xué)完之后，能夠自己做成一個完整的、可以獲得詢盤的網(wǎng)站。
【課程下載】
第一副業(yè)網(wǎng)：https://www.fuye1.cn/16500.html
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
