整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一篇《WordPress 网站全方位速度优化：主机篇》讲的是关于WordPress 网站所在主机的设置，这次我们来讲网站内部臃肿导致加载变慢。
还是上一篇那个例子，一个网站首页总大小，如果从3MB下降到1MB。即便是1M 带宽的主机，加载时间也会从25秒下降到8秒，也是很可观的。但是要给网站减肥可不是一件容易的事儿，我尽可能的详细介绍：
访客的浏览器从远程主机上抓取网页，先抓取首页的HTML 文件，然后再从 HTML 文件里提取出 CSS、JS、图片、视频等文件分别加载，有的 JS 和 CSS 里还会加载更多的 CSS、图片、视频。
有一个工具可以看到网页加载过程，比如：文件数量、加载顺序、每个元素的响应时间、明细等信息。谷歌Chrome浏览器自带的“检查”工具，火狐 Firefox 的FireBug 工具都可以完成以上的工作。此外360浏览器，Safari 浏览器，IE 新版本都集成了这个功能。（如图：minify是个 css 文件，大小426KB）
如果是咱们自己写的 HTML、CSS、JS 文件，可以轻易瘦身，自己熟悉代码哪里能优化，但 WordPress 主题的 HTML、CSS、JS 我们是无能为力，只能通过Gzip压缩解决。（如下图，经过 Gzip 压缩，minify 文件 从426KB变成了57KB）
Gzip是服务器或者虚机提供的一种组件服务，简单地说：Gzip开启后，从主机到访客之间传送的文件会被压缩处理，这样就会减小通过网络传输的数据量，提高浏览的速度。比如一个首页150KB，但是经过压缩真实传输大小是25KB。（如下图）
Gzip具体使用方法：主机不同调用方法也不同，有的是写.htaccess，有的是安装个插件，不管是那种，可以到 Chinaz 站长工具里面检测（网址：http://tool.chinaz.com/Gzips/）。比如小红公司的网站：www.jianzhan1.cn的 html 文件是150KB，Gzip 压缩之后变成26KB，然后在火狐里用 FireBug 检查首页果然是25.9KB。双重验证说明 Gzip 生效了。此外Gzip 对 CSS 这类文本类的文件也会压缩，比如有个CSS 文件是426KB，压缩之后是57KB。
上图为 ChinaZ 网站检查结果，我们也可以从其他网站看出Gzip 是否生效，另外也可以用浏览器检查工具检查 header 是否有 Gzip。
通常Gzip只会压缩 HTML 和 TXT 之类的文本文件，不建议用它来压缩图片，因为这样会增加服务器 CPU 的负担，还会增加图片的体积，具体原因大家百度一下。后面会说给图片瘦身。
网站上用的图片大概这么几种：1 头部Slider的背景图和前景图。2 产品和案例的图片。3 其他装饰图片。
不论什么图片，第一步先看宽高尺寸，大小够用就好，切忌贪大，尺寸越大，容量越大，下载越慢，特别是产品图，有的同学直接上传2000px宽的2MB 图片。（很多同学不了解常识）
此外图片还分透明图片和不透明图片：透明图比如说去掉背景的产品图，还有特殊字体的文字也需要做成透明图片，可以把他们放到背景图上。不透明的图片比如说背景图片和产品展示图等。
先说透明图片，常用PNG格式，当然 PNG 图片也有透明和不透明之分，还有8位和24位的区别。总而言之，透明图片我们用 PNG，但是 PNG 图片很大，解决办法是，到 TingPNG 网站优化压缩，网址：https://tinypng.com/，通常可以得到比较好的压缩比，图片质量几乎没变化。因为这种压缩是在线压缩，需要上传和下载，有点麻烦，但是一次麻烦终身受益。
再说经常用到的JPG 图片，通常我们直接在PhotoShop 里修改，裁切大小，另存为 web 格式压缩，jpg 质量60左右。这个大家都会，我再分享个秘籍：“WP Smush”，这是一个 WordPress 插件，每次上传图片时会自动在线压缩，压缩比很高，质量损失很小，速度稍慢，绝对值得，一般人我不告诉他。
PNG 透明图和 JPG 图的究极压缩方法都是在线工具，小而精 小而美，这是他们的独门秘籍，不会轻易外传，在线提供服务也是一种保护。
网站上用的视频通常有两种方式，一种是托管在视频网站，比如优酷，我们在自己网站上引用优酷视频的地址，通常会有优酷的标志或者广告。另外一种方式是把视频存放在本地主机上，我们主要说这种。这种视频往往容量很大，用户下载慢，使用时一定要注意。下面说说如何优化：
以小红建站公司网站首页为例，第一屏有个背景视频，1000kb码率的MP4格式，36秒，5.4MB，严重影响打开速度。压缩成384kb码率的webm格式视频后，变成1.4MB，但画质很粗糙，显得很low。最后把视频剪辑成22秒，压缩成512kb码率的webm是1.4MB，质量好些，在视频上覆盖一层灰色，遮住粗糙的视频，整体显得高档。
这样做还有个问题，IE11浏览器 和 微软Edge浏览器 不支持webm 格式的视频，这需要额外增加mp4格式的视频给微软的浏览器。访客浏览器如果是支持webm视频的谷歌等浏览器，网站直接给他看webm视频；访客如果是 IE 浏览器，网站会给他看 MP4视频。
同样22秒 512k的码率MP4也是1.4MB，但是质量差很多，不得不提升768k码率，视频质量和webm的512k码率类似。吐槽Edge浏览器，播放MP4的质量好差，同样一段视频比IE11差不少，马赛克严重。
以上是对站内HTML，CSS，JS，图片，视频的优化压缩，木桶理论的两块木板“主机提速”和“站内减肥”介绍完了，下集将是最后一集，讲谷歌这个“外患”，还有外链，缓存，调用系统中文字体微软雅黑，。
注：相关网站建设技巧阅读请移步到建站教程频道。
wordpress网站模板主题开发中，我们可能会碰到这样一个问题：wordpress网站前台页面的头部、侧边栏、底部的数据基本上是差不多的，有的甚至是一模一样的，这时，我们还有必要在每一个页面的头部、侧边栏、底部重复添加或修改相同的代码吗？有没有更好的方法。当然是有的，我们可以把这些内容代码相同的部分，分割出来，放到一个公共的模板中，其它页面可以直接引用就可以了。这样的好处是，不需要每个页面模板都重写这些代码，而且在后期的wordpress模板维护修改时，也方便维护修改——在需要修改这几个部位的代码时，只需要修改这几个公共模板就可以了。下面，就随我一起来为wordpress网站模板创建公共模板吧，我们将以头部模板为例来做一下演示。
首先，我们在wordpress网站模板目录下3个创建公共模板文件：header.php（头部模板）、sidebar.php（侧边栏模板）、footer.php（底部模板），这些模板文件的名字是wordpress主题模板默认的模板名。当然，我们也是可以用其它名字的，不过，没有这些文件名方便好用。
在sublime编辑器中打开wordpress模板的index.php首页模板文件，在代码中找到<!DOCTYPE html>和</header>标签（这里的模板是我们前面文章中创建的app模板），然后，把这两个标签之间的代码全部剪切下来，粘贴到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, //最外层标签名。'container_class'=> '','menu_class'=> 'aaa','menu_id'=> '', 'theme_location'=> 'menu_top', //菜单名 。 );wp_nav_menu($menu);?></header>
如下图：
分离出头部的代码后，首页模板index.php文件代码就没有了头部的原始代码了，这时，我们打开wordpress网站前台页面，就会出现页面布局乱了，因为没有了头部，也就没有了CSS样式了。那么，我们怎样在首页模板中引用这个公共的头部模板呢？方法有两种。
方法1：使用PHP函数—— include()来引用头部模板header.php。代码如下：
include("header.php");
通过include()函数引入的方式，有它独特的好处，它可以引入任何名字的.php后缀的文件，也就是说，我们的公共头部模板名不是header.php，也是同样可以方便引入的。
方法2：通过wordpress函数来引入头部模板header.php。代码如下：
get_header();
?这个函数在没有参数的情况下，可以直接引入模板名为header.php的模板文件。这个函数也可以给它添加一个参数，如：get_header("mobile")，这就是要引用wordpress模板文件header-mobile.php。加参数引入公共模板时，这个公共模板的名字必须是以header-作为前缀的。
以上，我们简单介绍了“如何为wordpress添加和调用公共模板header.php”。侧边栏模板和底部公共模板的创建和引用方式也是一样的，只是wordpress自带的调用函数不一样，侧边栏调用函数是get_sidebar()，底部模板调用函数是get_footer()，它们的使用方式跟get_header()函数是一样的，这里就不多说了。
课程介绍】
在这个全球化浪潮汹涌的时代，外贸行业正以前所未有的速度发展，而拥有一个既能吸引国际客户眼球，又能高效优化搜索引擎（SEO）的外贸网站，无疑是通往成功之路的钥匙。今天，就让我们一起踏上这场从0到1的WordPress外贸建站与SEO优化之旅，揭秘如何打造一个让询盘如潮水般涌来的国际电商平台！
WordPress外贸网站不仅将成为一个展示产品、吸引客户的窗口，更将成为一个SEO优化得当、询盘不断的营销利器。记住，外贸建站与SEO优化是一场持久战，需要持续的努力与创新。但只要你坚持下去，成功就在不远处向你招手！
【课程目录】
1-1如何选择适合SEO的域名
2-2域名与服务器购买
3-3域名解析+服务器设置+网站安装
4-4开通免费企业邮箱
5-5wordpress主题与插件安装
6-6wordpress网站主题介绍左侧导航栏1
7-6wordpress后台左侧导航栏介绍2
8-7enfoldchildthemeoption讲解①
9-7enfoldthemeoption讲解②-generalstyling
10-7themeoption讲解③
11-8SEO基础理论
12-9构成网页的主要元素
13-10外贸B2B网站页面布局
14-11关键词调研工具
15-12如何选择最值得做SEO的关键词
16-13SEO工具之谷歌浏览器插件
17-14SEO关键词的种类
18-15关键词的优化布局与checklist
19-如何准备On-PageSEO内容
20-实操课：将搜集到的关键词转化为On-page提纲
21-制作单个产品页面视频实操
22-FORMMAKER插件详解
23-如何找到合适的写手
24-如何利用博客做内容营销
25-制作高转化率的ABOUTUS页面
26-ABOUTUS页面制作实操-1
27-ABOUTUS页面制作实操-2
28-ABOUTUS页面制作实操-3
29-ABOUTUS页面制作实操-4
30-网站名称与链接设置
31-BLOG页面的搭建+通过邮件发布博客
32-Contact页面及Footer信息修改
33-RANKMATH详细设置实操
34-Productcategory页面优化01
35-siteground的替代方案
36-ProductCategory页面优化02
37-ProductCategory页面优化03
38-优化内链和锚文本
39-Homepage设计与优化
40-Homepage搭建与RankMath优化
41-如何给网站加上B2C在线零售功能
42-网站外链建设
43-谷歌部分免费工具介绍
44-如何监测网站转化率
45-网站的维护与推广
46-给网站添加在线聊天功能
47-GA更新后，如何找到原来的UA代码
48-新版Siteground后台操作指南
49-如何绑定多个域名到同一个网站
50-如何去掉enfold主题自带的Layerslider
51-子域名的应用
52-如何新增和安装子域名
53-【网站提速】如何设置CDN加速
54-图片SEO详解
55-单品关键词挑选和上传
56-巧用Attribute
以上只是大概的框架，具体的课程每一个点都会展开来讲，配合视频教程手把手实操，相信跟着学的朋友一定能在学完之后，能够自己做成一个完整的、可以获得询盘的网站。
【课程下载】
第一副业网：https://www.fuye1.cn/16500.html
*请认真填写需求信息，我们会在24小时内与您取得联系。
