WordPress

WordPress

WordPress建站及WordPress SEO相关话题
Shopify

Shopify

Shopify建站及Shopify SEO相关话题
Google SEO

Google SEO

Google SEO相关话题
SEM

SEM

SEM相关话题
Zoho

Zoho

Zoho SAAS相关产品使用话题讨论
EDM

EDM

讨论Email Marketing相关话题
Symantec SSL

Symantec SSL

讨论Symantec SSL安全相关话题
隽永东方售后服务

隽永东方售后服务

隽永东方售后服务专区

web移动端页面性能优化方案(进阶版)

WordPressLeo 发表了文章 • 2 个评论 • 322 次浏览 • 2018-05-28 16:31 • 来自相关话题

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

20160218103753_24106.jpeg

 
从上图可以看出,上面基本涵盖所有的优化方案了。在这里,只是针对其中几个代表性方案出来探讨。
加载优化
对于移动端的网页来说,加载过程是最为耗时的过程,可能会占到总耗时的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后台登录页Logo和链接

WordPressBob 发表了文章 • 1 个评论 • 434 次浏览 • 2018-05-28 09:58 • 来自相关话题

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系统文件更新是,该修改的内容会被替换,每次更新每次替换,非常麻烦。 查看全部
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系统文件更新是,该修改的内容会被替换,每次更新每次替换,非常麻烦。

网页信噪比

百度SEOJonny 发表了文章 • 1 个评论 • 288 次浏览 • 2018-05-24 11:20 • 来自相关话题

网页信噪比是指一个网页上的文字内容与html代码的比率。从搜索引擎的原理来讲,其抓取系统首先是将整个网页下载下来,然后将里面的文字内容提取出来,经过分析去除html格式,清除噪音,然后分词,最后存入索引库。在这个过程中,搜索引擎也会经过去噪的过程,很明显,网页信噪比越高,搜索引擎抓取的效率就会越高,搜索引擎蜘蛛每天需要处理很多的数据,如何能够快速的提取网页的主题信息是个十分重要的任务。 查看全部
网页信噪比是指一个网页上的文字内容与html代码的比率。从搜索引擎的原理来讲,其抓取系统首先是将整个网页下载下来,然后将里面的文字内容提取出来,经过分析去除html格式,清除噪音,然后分词,最后存入索引库。在这个过程中,搜索引擎也会经过去噪的过程,很明显,网页信噪比越高,搜索引擎抓取的效率就会越高,搜索引擎蜘蛛每天需要处理很多的数据,如何能够快速的提取网页的主题信息是个十分重要的任务。

WordPress文章删除时同时删除文章所包含的图片

WordPressBob 发表了文章 • 1 个评论 • 274 次浏览 • 2018-05-24 10:43 • 来自相关话题

好的网站需要不停的更新内容和图片,才能不断地增加网站的流量,并且提升网站的排名。网站内容的更新不知需要添加,有时候也需要将老的,没有实用性的文章删除,让网站变得更加有吸引力。删除文章的同时也要将其所带的图片一起删除,这样可以节省不少的空间资源。而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文件里面就可以了。 查看全部
好的网站需要不停的更新内容和图片,才能不断地增加网站的流量,并且提升网站的排名。网站内容的更新不知需要添加,有时候也需要将老的,没有实用性的文章删除,让网站变得更加有吸引力。删除文章的同时也要将其所带的图片一起删除,这样可以节省不少的空间资源。而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文件里面就可以了。

instagram内容同步到网站上,点击出现弹框

WordPresslena 发表了文章 • 1 个评论 • 280 次浏览 • 2018-05-23 15:21 • 来自相关话题

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

google adwords质量得分

SEMJonny 发表了文章 • 1 个评论 • 283 次浏览 • 2018-05-22 11:33 • 来自相关话题

通过 4 个“质量得分”状态列,您可以了解当前的质量得分及其各个组成要素的得分,即:质量得分、着陆页体验、广告相关性和预计点击率。

我们还会通过 4 个统计信息列向您显示过往质量得分及其组成要素的历史记录,即:质量得分(历史)、着陆页体验(历史)、广告相关性(历史)和预计点击率(历史)。 查看全部
通过 4 个“质量得分”状态列,您可以了解当前的质量得分及其各个组成要素的得分,即:质量得分、着陆页体验、广告相关性和预计点击率。

我们还会通过 4 个统计信息列向您显示过往质量得分及其组成要素的历史记录,即:质量得分(历史)、着陆页体验(历史)、广告相关性(历史)和预计点击率(历史)。

adwords的广告评级因素

SEMJonny 发表了文章 • 1 个评论 • 272 次浏览 • 2018-05-22 11:32 • 来自相关话题

“广告评级”是一个数值,用于确定您的广告排名(广告在网页上相对于其他广告的展示位置)以及您的广告是否能够展示。在计算广告评级时,我们会考虑您的出价金额、您的竞价时广告质量(包括预计点击率、广告相关性和着陆页体验)、广告评级要求、用户搜索情境(例如用户所在的地理位置、使用的设备、搜索时间、搜索字词的性质、网页上显示的其他广告和搜索结果,以及其他用户信号和属性),以及广告附加信息和其他广告格式的预计影响。
 
 
在估算广告附加信息和广告格式的预计影响时,我们会考虑附加信息或格式在搜索结果页上的相关性、点击率和显眼程度等因素。因此,即使竞争对手的出价比您高,只要您的关键字和广告的相关性更胜一筹,您仍然可能赢得较高的排名。每当您的广告有资格进行展示并通过竞价竞争此展示机会时,系统都会重新计算广告评级。因此,根据当时的竞争情况、用户搜索情境以及广告质量,您的广告排名可能每次都会发生变动。 查看全部
“广告评级”是一个数值,用于确定您的广告排名(广告在网页上相对于其他广告的展示位置)以及您的广告是否能够展示。在计算广告评级时,我们会考虑您的出价金额、您的竞价时广告质量(包括预计点击率、广告相关性和着陆页体验)、广告评级要求、用户搜索情境(例如用户所在的地理位置、使用的设备、搜索时间、搜索字词的性质、网页上显示的其他广告和搜索结果,以及其他用户信号和属性),以及广告附加信息和其他广告格式的预计影响。
 
 
在估算广告附加信息和广告格式的预计影响时,我们会考虑附加信息或格式在搜索结果页上的相关性、点击率和显眼程度等因素。因此,即使竞争对手的出价比您高,只要您的关键字和广告的相关性更胜一筹,您仍然可能赢得较高的排名。每当您的广告有资格进行展示并通过竞价竞争此展示机会时,系统都会重新计算广告评级。因此,根据当时的竞争情况、用户搜索情境以及广告质量,您的广告排名可能每次都会发生变动。

What does Cloudflare Development mode mean?

WordPressLeo 发表了文章 • 1 个评论 • 247 次浏览 • 2018-05-21 11:59 • 来自相关话题

新版本的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,开启即可






  查看全部
新版本的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按钮开启,

1.png


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

2.png


 

分享一些slider以及一些布局上不错的小细节

WordPressLeo 发表了文章 • 1 个评论 • 357 次浏览 • 2018-05-16 17:29 • 来自相关话题

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























































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

1.png


2.png


3.png


4.png


5.png


6.png


7.png


8.png


9.png


10.png


11.png

 

URL中“#” “?” &“”号的作用

Google SEOJonny 发表了文章 • 1 个评论 • 245 次浏览 • 2018-05-14 16:41 • 来自相关话题

1. #
    10年9月,twitter改版。一个显著变化,就是URL加入了"#!"符号。比如,改版前的用户主页网址为http://twitter.com/username改版后,就变成了http://twitter.com/#!/username
    这是主流网站第一次将"#"大规模用于重要URL中。这表明井号(Hash)的作用正在被重新认识。本文根据HttpWatch的文章,整理与井号有关的所有重要知识点。
一、#的涵义
    #代表网页中的一个位置。其右面的字符,就是该位置的标识符。比如,http://www.example.com/index.html#print就代表网页index.html的print位置。浏览器读取这个URL后,会自动将print位置滚动至可视区域。
    为网页位置指定标识符,有两个方法。一是使用锚点,比如<a name="print"></a>,二是使用id属性,比如<div id="print">。
二、HTTP请求不包括#
    #是用来指导浏览器动作的,对服务器端完全无用。所以,HTTP请求中不包括#。
比如,访问下面的网址,http://www.example.com/index.html#print,浏览器实际发出的请求是这样的:
GET /index.html HTTP/1.1
Host: www.example.com
 
三、#后的字符
    在第一个#后面出现的任何字符,都会被浏览器解读为位置标识符。这意味着,这些字符都不会被发送到服务器端。
比如,下面URL的原意是指定一个颜色值:http://www.example.com/?color=#fff,但是,浏览器实际发出的请求是:
GET /?color= HTTP/1.1
Host: www.example.com
 
四、改变#不触发网页重载
    单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页。
比如,从http://www.example.com/index.html#location1改成http://www.example.com/index.html#location2,浏览器不会重新向服务器请求index.html。
 
五、改变#会改变浏览器的访问历史
    每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用"后退"按钮,就可以回到上一个位置。这对于ajax应用程序特别有用,可以用不同的#值,表示不同的访问状态,然后向用户给出可以访问某个状态的链接。值得注意的是,上述规则对IE 6和IE 7不成立,它们不会因为#的改变而增加历史记录。
 六、window.location.hash读取#值
    window.location.hash这个属性可读可写。读取时,可以用来判断网页状态是否改变;写入时,则会在不重载网页的前提下,创造一条访问历史记录。
 七、onhashchange事件
    这是一个HTML 5新增的事件,当#值发生变化时,就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。
     它的使用方法有三种:
window.onhashchange = func;<body onhashchange="func();">window.addEventListener("hashchange", func, false);
     对于不支持onhashchange的浏览器,可以用setInterval监控location.hash的变化。
 八、Google抓取#的机制
    默认情况下,Google的网络蜘蛛忽视URL的#部分。
    但是,Google还规定,如果你希望Ajax生成的内容被浏览引擎读取,那么URL中可以使用"#!",Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。
    比如,Google发现新版twitter的URL:http://twitter.com/#!/username
    就会自动抓取另一个URL:http://twitter.com/?_escaped_fragment_=/username
    通过这种机制,Google就可以索引动态的Ajax内容。
 

 
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。AJAX 是一种用于创建快速动态网页的技术。
 
2. ?
1)连接作用:比如http://www.xxx.com/Show.asp%3F ... e%3D1
2)清除缓存:比如
http://www.xxxxx.com/index.html
http://www.xxxxx.com/index.html?test123123
 
两个url打开的页面一样,但是后面这个有问号,说明不调用缓存的内容,而认为是一个新地址,重新读取。
 
3. &
不同参数的间隔符 查看全部
1. #
    10年9月,twitter改版。一个显著变化,就是URL加入了"#!"符号。比如,改版前的用户主页网址为http://twitter.com/username改版后,就变成了http://twitter.com/#!/username
    这是主流网站第一次将"#"大规模用于重要URL中。这表明井号(Hash)的作用正在被重新认识。本文根据HttpWatch的文章,整理与井号有关的所有重要知识点。
一、#的涵义
    #代表网页中的一个位置。其右面的字符,就是该位置的标识符。比如,http://www.example.com/index.html#print就代表网页index.html的print位置。浏览器读取这个URL后,会自动将print位置滚动至可视区域。
    为网页位置指定标识符,有两个方法。一是使用锚点,比如<a name="print"></a>,二是使用id属性,比如<div id="print">。
二、HTTP请求不包括#
    #是用来指导浏览器动作的,对服务器端完全无用。所以,HTTP请求中不包括#。
比如,访问下面的网址,http://www.example.com/index.html#print,浏览器实际发出的请求是这样的:
GET /index.html HTTP/1.1
Host: www.example.com
 
三、#后的字符
    在第一个#后面出现的任何字符,都会被浏览器解读为位置标识符。这意味着,这些字符都不会被发送到服务器端。
比如,下面URL的原意是指定一个颜色值:http://www.example.com/?color=#fff,但是,浏览器实际发出的请求是:
GET /?color= HTTP/1.1
Host: www.example.com
 
四、改变#不触发网页重载
    单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页。
比如,从http://www.example.com/index.html#location1改成http://www.example.com/index.html#location2,浏览器不会重新向服务器请求index.html。
 
五、改变#会改变浏览器的访问历史
    每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用"后退"按钮,就可以回到上一个位置。这对于ajax应用程序特别有用,可以用不同的#值,表示不同的访问状态,然后向用户给出可以访问某个状态的链接。值得注意的是,上述规则对IE 6和IE 7不成立,它们不会因为#的改变而增加历史记录。
 六、window.location.hash读取#值
    window.location.hash这个属性可读可写。读取时,可以用来判断网页状态是否改变;写入时,则会在不重载网页的前提下,创造一条访问历史记录。
 七、onhashchange事件
    这是一个HTML 5新增的事件,当#值发生变化时,就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。
     它的使用方法有三种:
  1. window.onhashchange = func;
  2. <body onhashchange="func();">
  3. window.addEventListener("hashchange", func, false);

     对于不支持onhashchange的浏览器,可以用setInterval监控location.hash的变化。
 八、Google抓取#的机制
    默认情况下,Google的网络蜘蛛忽视URL的#部分。
    但是,Google还规定,如果你希望Ajax生成的内容被浏览引擎读取,那么URL中可以使用"#!",Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。
    比如,Google发现新版twitter的URL:http://twitter.com/#!/username
    就会自动抓取另一个URL:http://twitter.com/?_escaped_fragment_=/username
    通过这种机制,Google就可以索引动态的Ajax内容。
 

 
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。AJAX 是一种用于创建快速动态网页的技术。
 
2. ?
1)连接作用:比如http://www.xxx.com/Show.asp%3F ... e%3D1
2)清除缓存:比如
http://www.xxxxx.com/index.html
http://www.xxxxx.com/index.html?test123123
 
两个url打开的页面一样,但是后面这个有问号,说明不调用缓存的内容,而认为是一个新地址,重新读取。
 
3. &
不同参数的间隔符