如何优化HTML5在移动设置上的性能表现，首先我们需要明确以下几个原则：
1、PC优化手段在Mobile侧同样适用。
2、在Mobile侧我们提出三秒种渲染完成首屏指标。
3、基于第二点，首屏加载3秒完成或使用Loading。
4、基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB。
5、Mobile侧因手机配置原因，除加载外渲染速度也是优化重点。
6、基于第五点，要合理处理代码减少渲染损耗。
7、基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置。
8、加载完成后用户交互使用时也需注意性能。
 
我们可以先看下面的一张图片：





 
从上图可以看出，上面基本涵盖所有的优化方案了。在这里，只是针对其中几个代表性方案出来探讨。
加载优化
对于移动端的网页来说，加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点，当然，手机站的其他前端要素优化也是不能忽略的。


1、减少HTTP请求
 因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个，
（1）、合并CSS、JavaScript
（2）、合并小图片，使用雪碧图（简单说：就是一张png透明背景图片，上面有很多其他图片，然后通过css的背景图片定位属性定到所需图片，这样就不用一张张图片的请求了，请求一张雪碧图即可，这样大大减少请求数）
 
2、缓存
 使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）。
（1）、缓存一切可缓存的资源
（2）、使用长Cache（使用时间戳更新Cache）
（3）、使用外联式引用CSS、JavaScript（所以千万别写内联这些了）
 
3、压缩HTML、CSS、JavaScript
减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip。
（2）、压缩（例如，多余的空格、换行符和缩进）
（3）、启用GZip
 
4、无阻塞
写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾部或使用异步方式加载。
 
5、压缩图片
图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示。（关于srcset 属性可以狠狠地点击查看）
（  !important 过度压缩图片大小影响图片显示效果。）
 
6、减少Cookie，Cookie会影响加载速度，所以静态资源域名不使用Cookie。
 
7、异步加载第三方资源
第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源，当然最好还是本地化！
 
脚本执行优化
脚本处理不当会阻塞页面加载、渲染，因此在使用时需要注意以下几点：

1、CSS写在头部，JavaScript写在尾部或异步。
2、避免图片和iFrame等的空Src，空Src会重新加载当前页面，影响速度和效率。
 
CSS优化

1、尽量避免写在HTML标签中写Style属性。
2、避免CSS表达式，CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式。
3、移除空的CSS规则，空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则。
4、正确使用Display的属性，Display属性会影响页面的渲染，因此建议各位要合理使用。
    （1）、display:inline后不应该再使用width、height、margin、padding以及float
    （2）、display:inline-block后不应该再使用float
    （3）、display:block后不应该再使用vertical-align
    （4）、display:table-*后不应该再使用margin或者float
至于为什么，可以网上查看一下w3c，举例，inline-block是行内块级元素，如果你再使用float又变成浮动元素；
inline是行内元素，是没有宽高的，自然就没有办法设置内外间距
5、不滥用Float，Float在渲染时计算量比较大，尽量减少使用。
6、不滥用Web字体，Web字体需要下载，解析，重绘当前页面，尽量减少使用，所以字体要本地化。
7、不声明过多的Font-size，过多的Font-size引发CSS树的效率。
8、值为0时不需要任何单位，为了浏览器的兼容性和性能，值为0时不要带单位，举例padding:0 而不是0px。
9、标准化各种浏览器前缀
    （1）、无前缀应放在最后。
    （2）、CSS动画只用（-webkit- 无前缀）两种即可。
    （3）、其它前缀为“-webkit- -moz- -ms-无前缀”四种（-o-Opera浏览器改用blink内核，所以淘汰）。
10、避免让选择符看起来像正则表达式。（不过一般来说我们不会将css选择器写的过于复杂）
 
JavaScript执行优化
1、减少重绘和回流
    （1）、避免不必要的Dom操作（如果套模板，没有用到的千万记得删除）
    （2）、尽量改变Class而不是Style，使用classList代替className（举例，jquery改变一个节点的属性，最好是通过addClass，而不是直接改变css属性）
    （3）、避免使用document.write
    （4）、减少drawImage
2、缓存Dom选择与计算，每次Dom选择都要计算，缓存他。
3、缓存列表.length，每次.length都要计算，用一个变量保存这个值。
4、尽量使用事件代理，避免批量绑定事件。（事件冒泡、事件补货了解一下，一次使用终生受益）
5、尽量使用ID选择器，ID选择器是最快的。
6、TOUCH事件优化，使用touchstart、touchend代替click，因快影响速度快，但应注意Touch响应过快，易引发误操作。
 
渲染优化
HTML文档是以包含文档编码信息的数据流方式在网络间传输，页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明，客户端浏览 器只有在确定了页面编码后才能正确的渲染页面，所以在绘制页面或执行任何的javascript代码前，大部分的浏览器（ie6、ie7、ie8除外）都 会缓冲一定字节的数据来从中查找编码信息，不同的浏览器当中预缓冲的字节数是不一样的。


1、HTML使用Viewport
Viewport可以加速页面的渲染，请使用以下代码：
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
2、减少Dom节点
Dom节点太多影响页面的渲染，应尽量减少Dom节点。（html也要精简，减少不必要的节点）

3、动画优化
（1）、尽量使用CSS3动画。
（2）、合理使用requestAnimationFrame动画代替setTimeout。
（3）、适当使用Canvas动画5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）。


4、高频事件优化
 Touchmove、Scroll事件可导致多次渲染（尽量不要用）。
（1）、使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染。
（2）、增加响应变化的时间间隔，减少重绘次数。

5、GPU加速
CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用。

另外，过渡使用会引发手机过耗电增加。

HTML5只是一种方法和手段，并不是万能的，思考怎么符合移动端设备特别是没错，但前提务必要基于PC站框架结构和内容。
  查看全部

Wordpress后台登录页面通常带有一个指向WordPress官网的 Logo 图片和链接，如果是使用WordPress来搭建自己的网站，将后台登录页面的logo和URL替换成自己的，会更显得专业一点。
 
方法一：
 
修改后台登录页Logo链接
需要我们我做的事情非常简单，我们在主题目录下面找到functions.php文件，将下面的代码复制在文件的最下面：function custom_loginlogo_url($url) {
return 'http://yourdomain.com';
}
add_filter( 'login_headerurl', 'custom_loginlogo_url' );
修改后台登录页Logo图片
和上面修改链接的方法一致，在functions.php的最下面添加一下代码：function my_custom_login_logo() {
echo '<style type="text/css">
.login h1 a {
background-image:url("/wp-content/themes/yourzhuti/images/logo.png") !important;
height: 60px;
width: 186px !important;
-webkit-background-size: 186px;
background-size: 186px;
}
</style>';
}
add_action('login_head', 'my_custom_login_logo');
代码里面的样式可根据自己logo图片的宽高进行修改。
 
方法二：
如果以上步骤感觉麻烦，可以直接替换系统文件中的图片和URL：
 
第一、更换logo图片
事先将我们logo图片重新另存一份，命名为wordpress-logo.png，在Wordpress根目录wp-admin/images文件夹中找到wordpress-logo.png覆盖替换成我们自己图片即可。
 
第二、自定义logo链接地址
在Wordpress根目录下的wp-login.php文件，打开该文件后查找$login_header_url，将其后面的链接地址替换成自己想要的链接即可。
 
以上两种方法建议采用第一种，第二种是当WordPress系统文件更新是，该修改的内容会被替换，每次更新每次替换，非常麻烦。 查看全部

function custom_loginlogo_url($url) {

    return 'http://yourdomain.com';

}

add_filter( 'login_headerurl', 'custom_loginlogo_url' );

function my_custom_login_logo() {

    echo '<style type="text/css">

        .login h1 a {

            background-image:url("/wp-content/themes/yourzhuti/images/logo.png") !important;

        height: 60px;

        width: 186px !important;

        -webkit-background-size: 186px;

        background-size: 186px;

        }

    </style>';

}

add_action('login_head', 'my_custom_login_logo');

好的网站需要不停的更新内容和图片，才能不断地增加网站的流量，并且提升网站的排名。网站内容的更新不知需要添加，有时候也需要将老的，没有实用性的文章删除，让网站变得更加有吸引力。删除文章的同时也要将其所带的图片一起删除，这样可以节省不少的空间资源。而WordPress在删除图片的同时，默认是不会删除文章所带有的图片，简单的方法就是安装WordPress插件来删除图片。还有一种方法就是在主题functions.php函数文件里面添加一段代码：/* 删除文章时删除图片附件 */
/* 定义函数名称 */
function delete_post_and_attachments($post_ID) {
global $wpdb;
//删除文章特色图片
$thumbnails = $wpdb->get_results( "SELECT * FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
foreach ( $thumbnails as $thumbnail ) {
wp_delete_attachment( $thumbnail->meta_value, true );
}
//删除文章的图片附件
$attachments = $wpdb->get_results( "SELECT * FROM $wpdb->posts WHERE post_parent = $post_ID AND post_type = 'attachment'" );
foreach ( $attachments as $attachment ) {
wp_delete_attachment( $attachment->ID, true );
}
$wpdb->query( "DELETE FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
}
add_action('before_delete_post', 'delete_post_and_attachments');只要将这段代码放在主题的functions.php文件里面就可以了。 查看全部

/* 删除文章时删除图片附件 */

/* 定义函数名称 */

function delete_post_and_attachments($post_ID) {

global $wpdb;

//删除文章特色图片

$thumbnails = $wpdb->get_results( "SELECT * FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );

foreach ( $thumbnails as $thumbnail ) {

wp_delete_attachment( $thumbnail->meta_value, true );

}

//删除文章的图片附件

$attachments = $wpdb->get_results( "SELECT * FROM $wpdb->posts WHERE post_parent = $post_ID AND post_type = 'attachment'" );

foreach ( $attachments as $attachment ) {

wp_delete_attachment( $attachment->ID, true );

}

$wpdb->query( "DELETE FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );

}

add_action('before_delete_post', 'delete_post_and_attachments');

之前发布的这个方法​https://lightwidget.com/，有点弊端，客户点击图片时会跳到​instagram的网站，这样的话不利于引流。​​WD Instagram Feed这个插件很好，当客户点击图片​就会出现弹框，里面有短代码，可以放在任意地方。 查看全部

新版本的wp-rockets插件，对于cloudflare有了三个设置，
那么我这边就讲下开发者模式
What does Cloudflare Development mode mean?
所谓开发者模式，顾名思义，就是适合开发人员的模式；作为网站开发者，我们对于cloudflare，说实话，真的是又爱又恨，好处是增加全球网络节点，坏的是修改网站很麻烦，往往我们改一个样式就要清一次缓存，这样严重影响我们开发者的效率。
好在新版wp-rockets推出了针对cloudflare开发者模式，只需我们开发者在对网站进行修改的时候，开启按钮即可，而且默认三小时后会关闭按钮，这样我们就不用重复去清除cloudflare缓存了，大大提升了我们的效率。
彩蛋：另外针对之前图片的attachment页面问题，老版本yoast seo是在Advanced里面Redirect attachment URLs to parent post URL按钮开启，






其实新版本的yoast seo也有相关设置，search appearance里面的media，开启即可






  查看全部

http://demo.wponlinesupport.com/slick-slider-demo/?utm_source=hp&event=demo  首先可以通过这个链接，打开，然后点击一个菜单图标的按钮，可以看到右侧有很多插件可供选择，插件可以直接用，当然主要还是我们可以参考一些不错的小细节。
由于插件比较多，这边就列部分效果截图























































  查看全部

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#post-<?php the_ID(); ?>" data-theVideo="视频连接">VIDEO</a>
<div class="modal fade" id="post-<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<div>
<iframe width="100%" height="350" src=""></iframe>
</div>
</div>
</div>
</div>
</div>


autoPlayYouTubeModal();
//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
function autoPlayYouTubeModal() {
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-theVideo"),
videoSRCauto = videoSRC + "?autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
} 查看全部

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#post-<?php the_ID(); ?>" data-theVideo="视频连接">VIDEO</a>

<div class="modal fade" id="post-<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-body">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                <div>

                    <iframe width="100%" height="350" src=""></iframe>

                </div>

            </div>

        </div>

    </div>

</div>





  autoPlayYouTubeModal();

  //FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG

  function autoPlayYouTubeModal() {

      var trigger = $("body").find('[data-toggle="modal"]');

      trigger.click(function () {

          var theModal = $(this).data("target"),

              videoSRC = $(this).attr("data-theVideo"),

              videoSRCauto = videoSRC + "?autoplay=1";

          $(theModal + ' iframe').attr('src', videoSRCauto);

          $(theModal + ' button.close').click(function () {

              $(theModal + ' iframe').attr('src', videoSRC);

          });

      });

  }

首先提及一下子目录和二级域名的优劣势：
 
二级域名： 首先，二级域名的权重大于子目录的，二级域名在搜索引擎看来和主域名是两个独立的网站，主域名在很多时候会传递一小部分信任度给二级域名（是信任度不是PR）。所以，很多做SEO的人都知道二级域名天生就比子目录具有更高的权重和更好的排名。 
子目录： 首先要知道一点，子目录其实是主站的一部分，正如上面所说，权重天生就比二级域名低，但个人还是建议以子目录建立子站，原因主要是： ①、二级域名和主域名是两个相互独立的站，要优化的话，需要分别优化两个站，并且在外链的建设过程中，网站的权重会被这些独立的网站分散。主域名通过外链的建设获得高权重，并不意味者二级域名就能获得高权重。 ②、二级域名的变多，会使分离出来的二级网站变小。 ③、子目录则相反，子目录的增多会使主网站变大，随着网站的变大，主站的收录量，权重，信任度也将提升。
 
 
最后这边重点提及一下，用子目录做二级网站，我们必须要更改的.htaccess规则
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /es/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /es/index.php [L]
</IfModule>
# END WordPress
 
 
以上加粗斜体就是我们必须要更改的规则，默认是没有/es/的，举例，如果你的子目录是以es命名，那么这边就要更改为/es/,否则除了首页，所有页面点击之后都会跳转到主站对应的页面。
  查看全部