位置:石家庄网页制作 > 新闻中心 > seo知识 >

石家庄桥西区网站制作公司
2020-12-12 展为网络
石家庄桥西区网站制作公司好吧,布赖恩(Brian)也对此感到好奇,所以他做了一个测试:

打开Sans-本地主机与Google CDN
本地托管的Open Sans与Google CDN托管的Open Sans的比较。(来源:KeyCDN)(大预览)
从本地服务器提供服务时,Open Sans加载需要0.530毫秒。这不是很大的差异,但是显然这不是正确的方向。

那么,结论是什么?好吧,您有一些选择。

您可以使用网络安全字体,并首先避免使用外部托管的字体带来的问题。
您可以使用Google字体,并确保它通过Google的CDN托管。
您可以下载Google字体并将其上载到自己的CDN(如果可以从那里更快地加载它)。
无论哪种方式,从可以更快加载的位置托管字体和图标都可以帮助您优化网站的性能。

Shopify合作伙伴
赚取设计和开发电子商务商店的经常性收入
立即注册
2.停止使用繁琐的设计元素
以下列表是对之前讨论过的主题的重新整理,因此,我不想浪费您的时间来尝试在此处重新创建轮子。但是,我确实认为,删除不必要的设计元素(尤其是较重的设计元素)以优化移动体验的这种策略值得在这里进行总结:

停止页面广告
当我写关于您应该在移动网站上抛弃的元素的文章时,我就大声疾呼广告,这是您可以轻易抛弃的东西之一。我仍然坚持这一信念。

对于初学者,广告是从第三方提供的。每当您必须呼叫另一方的服务器时,您在等待它们将内容传送到页面时,都会进一步增加自己的加载时间。

其次,仅美国就有26%的人口在其设备上使用广告拦截技术,因此他们无论如何也不会看到您的网页上广告。

Statista-广告屏蔽技术数据
有关美国广告拦截技术使用情况的Statista数据(来源:Statista)(大预览)
相反,请使用获利方法将广告从您的网站上移开,增加您自己的现场转化次数,并且不会浪费服务器的资源:

再营销
让您的跟踪像素跟随网络上的访问者,然后在其他人的网站上投放您自己的广告。
PPC
如果您可以在Google中确定按点击付费的广告方式,那就可以赚钱了。
社交媒体广告
如果您的网站定期发布新内容并且您提供了引人注目的产品,则这些广告特别容易运行。
停止弹出窗口
我知道Google表示在某些情况下可以使用移动弹出窗口。但是,如果您正在使用WordPress或其他内容管理系统来构建网站,并且正在使用插件来创建这些弹出窗口,那将会减慢加载时间。可能不会太多,但是您会注意到其中的区别。

ThemeIsle决定对某些插件如何影响WordPress网站速度进行一些分析。当他们测试这些插件对加载时间的影响时,会发生以下情况:

基本加载时间(以秒为单位) 安装后的加载时间(以秒为单位) 在某一方面的变化 %
安全插件 0.93秒 1.13秒 21.50%
备份插件 0.93秒 0.94秒 1.07%
联系表格插件 0.93秒 0.96秒 3.22%
SEO插件 0.93秒 1.03秒 10.75%
电子商务插件 0.93秒 1.22秒 31.10%
当然,某些插件的编码比其他插件更轻巧,但是在加载时间上总会有些不同。根据此数据,差异可能小至.01秒而大至.29秒。

如果您知道弹出式窗口在移动网络上并不是真正的洁净器,那为什么还要加油?取而代之的是,获取促销优惠,Cookie通知或公告,并将其放在您的网页上。

停止繁琐的联系渠道
不要忘记您网站的联系渠道。特别是,您在设计移动表单时必须小心。当然,这部分与用户实际填写一次所需的时间有关。但是,冗长或多页表单对您应该考虑的加载速度也有影响。

通常,您的移动表格应该精简-仅包括绝对必要的内容。

也有另一种思路可供考虑。

您可以完全放弃联系表单,这是我在谈论用聊天机器人替换移动表单的趋势时讨论的内容。有些网站已删除其表单,并留下了诸如常见问题解答,电子邮件地址和电话号码之类的信息,供访客在需要联系时使用。从加载的角度来看,这肯定会减轻负担。我只是不知道对于用户体验是否理想。

红帽-如果您的组织尚未进行数字化转型,那就必须这样做。
红帽
如果您的组织尚未进行数字化转型,则必须到现在为止。
从你所在的地方开始
3.创建一个单页网站
上面的技巧将是更简单,更快的实施方法,因此,如果客户或网站制作开发人员遇到网站速度过慢的问题,则绝对应该从这里开始。但是,如果页面速度测试仍然显示网站加载超过2.5秒,请考虑采用另一种方法重新设计网站以实现速度优化。

正如亚当·海兹曼(Adam Heitzman)在《搜索引擎期刊》(Search Engine Journal)上的一篇文章中所说:

“单页网站通常可以更轻松地转换为移动设备,用户会发现它们易于导航。”
但这是否意味着单页网站的加载总是比多页网站更快?当然不是。但是,大多数专业设计师出于非常特定的目的而选择单页设计而不是多页设计。DevriX有一个很好的图形总结了一下:

DevriX图形-单页网站
DevriX总结了单页网站的局限性。(来源:DevriX)(大预览)
明确地说,我不建议您将网站变成单页应用程序(SPA)。如果您想与服务人员一起提高客户的数字资产,那么PWA是更好的解决方案。(接下来的更多信息。)

相反,我建议您在客户满足某些条件的情况下将多页网站转换为单页网站:

极其狭窄和单一的业务。
不需要太多内容就能表达自己观点的网站。
您需要排名的关键字范围有限。
就是说,如果您要设计一个符合这三个条件(或至少三个条件中的两个条件)的网站,则可以将您的网站实际地移动到更简单的单页设计中。

由于单页网站迫使您事半功倍,有限的内容和功能自然会创建一个轻量级的网站。即使您确实稍微提高了限制,您仍然可以像Tempus一样为移动设备创建加载速度更快的网站:

测试我的网站的Tempus报告
“测试我的网站”报告说Tempus网站将在2.1秒内加载。(来源:Test My Site)(大预览)
这个单页网站的有趣之处在于,它不会漏掉出售豪宅所需的大量图像。而且,它的移动网站仅需2.1秒即可加载。

另一方面,并非所有的单页网站都是以速度为目标的。访问开发人员Davide Marchet的网站:

测试Davide Marchet的“我的网站”报告
“测试我的网站”报告说,Davide Marchet的网站在5.4秒内加载。(来源:Test My Site)(大预览)
由于动画过载,因此页面需要5.4秒才能在移动设备上加载。您甚至可以从Think with Google提供的屏幕截图中看到这一点。在那里看到的图像实际上是在第一个动画加载到背景时出现的消息。

因此,如果您希望使用单页设计来解决网站的性能问题,建议您多加注意。设计必须简单,超级集中且不受脚本和动画效果的束缚,这些脚本和动画效果无法消除将内容缩小到一页的好处。

4.将您的移动网站转换为PWA
根据Google的说法,每个PWA都有以下三个特征:

可靠
快速
参与
速度是渐进式网站制作应用程序的固有部分,这要归功于它们是与之建立在一起的服务人员。由于服务工作者不存在于网站制作浏览器之外,并且不依赖于用户网络的速度,因此他们可以更快地为访问者加载缓存的内容。

我还要说的是,由于PWA的设计与本地移动应用程序(至少是外壳)的设计更为相似,因此这迫使设计本身比移动网站更精简。

如果您在实现所有应有的传统性能优化后仍在努力加快网站的速度,那么现在是将移动网站转变为PWA的好时机。

让我告诉你为什么:

想象一下,您正计划与一位朋友一起前往芝加哥。您在酒吧或咖啡馆讨论行程时,然后意识到自己不知道该住哪里。因此,您可以在其中一部智能手机上搜索“芝加哥市中心的酒店”。

您尚未考虑购买房间;您只想研究您的选择。因此,您单击网站链接即可找到Google为您提供的两个热门列表。

这是Best Western River North Hotel的渐进式网站制作应用程序:

西北河酒店PWA
贝斯特韦斯特北河酒店PWA的主页。(来源:贝斯特韦斯特河北酒店)(大预览)
这是芝加哥市中心附近的酒店Palmer House Hilton的网站:

帕默之家希尔顿酒店网站
Palmer House Hilton网站的主页。(来源:帕尔默之家希尔顿酒店)(大预览)
对于初学者来说,PWA的外观更好看,并且更易于在智能手机上浏览,因此它将在当地赢得许多要点。还有速度问题:

测试我的网站的网站速度比较
“测试我的网站”比较了两家竞争酒店的加载速度。(来源:Test My Site)(大预览)
北河酒店在移动设备上的加载时间为2.4秒,而希尔顿竞争对手的加载时间为4秒。(您实际上可以在Hilton屏幕快照中看到该网站尚未完全加载。)这是访问者一定会注意到的差异。

即使我们没有在竞争网站之间进行并排比较,River North Hotel的PWA也会将其以前的移动网站从水里捞出来。

为他们开发PWA的机构Brewer Digital Marketing分享了他们进行转换后的情况。通过PWA预订的酒店的收入增加了300%,住宿数增加了500%。

5.将您的网站或博客转换为AMP
感谢Google为移动网络提供另一种快速的设计技巧。简称为“加速移动页面”或AMP。

更初,AMP发行是为了帮助发布者精简博客或新闻页面,以便更快地将其加载到移动设备上。但是,AMP是一个网站制作组件框架,可用于设计整个网站或仅设计网站的特定部分(如博客文章)。一旦实现,页面几乎可以从搜索中立即加载。

为什么AMP加载这么快?原因有很多:

使用AMP,您只能在网站上加载异步JavaScript和内联CSS,这意味着您的代码不会阻止或延迟页面渲染。

图像也是载入时间变慢的另一个原因。但是,AMP通过在资源(例如图像,广告等)之前自动加载页面布局来解决该问题,可以将其视为延迟加载的一种形式。

还有更多的东西,但是基本思想是,它消除了倾向于拖累网站的元素,并迫使设计师主要依靠轻量级HTML来构建其页面。

如果您想看到一个实际的例子,可以浏览几乎所有领先的数字杂志或新闻网站。如果您不熟悉AMP内容,只需在Google搜索中查找出现在网页名称旁边的闪电图标即可。像这样:

搜索中的AMP闪电符号
使用Google AMP创建带有可识别的闪电符号的页面。(来源:Google AMP)(大预览)
Gizmodo是AMP内容的一个很好的例子:

Gizmodo放大器
这个Gizmodo AMP页面几乎从搜索结果中立即加载。(来源:Gizmodo)(大预览)
实际上,当Gizmodo在2016年过渡到AMP时,其性能得到了极大提升。它的页面速度提高了300%,因此页面印象增加了50%。

如果您真的想充分利用AMP速度,Mobify建议将AMP与PWA配对。这样,您就可以为访问者快速加载网页:

AMP的首页加载
网站百分比 加载时间(秒)
10% 0.3
20% 0.5
50% 1.1
60% 1.4
80% 2.2
90% 3.4
95% 5.2
用Mobify报告AMP的加载时间(来源:Mobify)

然后,使用PWA维持那些快速加载时间:

PWA上的后续页面加载
网站百分比 加载时间(秒)
10% 0.6
20% 0.8
50% 1.4
60% 1.8
80% 3.0
90% 4.5
95% 6.2
Mobify报告PWA的加载时间(来源:Mobify)</>

小心AMP和PWA。

查看上面的表格,您会看到一些网站已经实施了这些快速的设计策略,但它们仍然没有超过Google的2.5秒移动加载基准。仅仅因为两者都有更快的加载速度,这并不一定意味着您的网站会自动快速运行。

包起来
随着Google通过台式机奖励移动网站的更多努力,这不是您可以花更长的时间解决的问题。网站的所有版本(尤其是移动版本)都必须针对用户体验进行优化。

这意味着必须对其设计,代码,内容以及其内部和周围的所有其他内容进行优化。一旦开发人员采取了传统的性能优化措施以加快网站速度,设计人员便应自行进行一些更改。在某些情况下,简单的更改(如通过网站提供字体的方式)会有所帮助。在其他情况下,可能需要考虑更激烈的事情,例如将网站重新设计为PWA。

首先,考虑客户网站的加载速度。然后,检查导致移动设备更大问题的原因。一点一点地整理脂肪,看看您可以作为设计师做什么,以补充开发人员的技术速度优化。

返回列表

13933871212