网站加载速度是一个优先考虑的整体用户体验,这也是数以百计的SEO排名因素之一。事实是,现在人们没有耐心等待页面加载超过5秒。如果你的网站不是加载速度不够快,你将会失去潜在客户。

 

超过50%的在线流量来自移动设备,每一个人都希望网站加载几乎瞬间。有鉴于此,在本文中,我将向您展示如何设法得分100/100与谷歌PageSpeed见解工具监控桌面和移动的反向链接。

 

的动机

 

我们的网站已经被加载很快,但我们知道总有办法使它更好。

 

一天,当玩PageSpeed工具,我注意到谷歌的网站做了一个可怕的分数为移动设备,59/100。桌面版做得更好在95/100。

 

LLlzIRg.png

也许他们应该使用他们的工具来提高他们的网站,对吧?

 

这就是使我们使我们的网站加载速度更快,证明你可以得到100/100。这不是痴迷,这计划是完美的。

 

我们在87/100开始。

 

这是我们得到的结果实施后的一些技术我要与你分享。

 

WWAYM7w.png

如何让网页加载更快

 

我们之后我开始显示确切的步骤之前,让我告诉你,PageSpeed工具只是一个最佳web表演实践指南。它提供了建议优化你的网站页面加载速度,实现良好的结果取决于你的服务器环境。

 

虽然其中一些步骤需要专业技术,有些则没有。注意,他们可以使用几乎任何内容管理系统(CMS)。

 

步骤# 1:优化图片

 

SA9EugY.png

PageSpeed见解工具建议我们优化我们的图片加载速度降低他们的文件大小。为了解决这个问题,我们做了两个重要的事情:

 

使用工具如压缩机压缩所有图片。io和TinyPNG。这些工具是免费的,而且可以减少图像文件大小超过80%在某些情况下,不降低图像的质量。

减少图片的大小最小尺寸不降低图像质量。例如,如果我们想要在我们的网站上有一幅画在150 x150px,这正是图片大小应该是在我们的服务器上。你不应该比你想让他们呈现较大的图像,也不减少其大小使用CSS或HTML标记。

我们下载的图片,然后手动压缩和大小。优化这些图片之后,最好做一个优化的习惯所有的新图像上传服务器。每一个新的图像应该被压缩和大小。

 

 

谷歌还提供下载的选项你已经优化的图像,你可以将它们上传到您的服务器。你可以做同样的JavaScript和CSS。

 

rPecTD4.png

第二步:贬低CSS和JavaScript

 

zEeAoMe.png

谷歌现在告诉我们,我们不得不贬低我们的JavaScript和CSS文件。

 

缩减过程减少文件的大小通过消除不必要的空格,字符,和评论从您的CSS和JavaScript文件。程序员往往会留下很多空间和评论而编码。这些甚至可以双你的CSS和JavaScript文件的大小。

 

HME9biO.png

为了解决这个问题,我们安装Gulpjs在我们的服务器上。该工具会自动创建一个新的CSS文件并删除所有空格。它还会自动创建一个新的CSS文件为所有的新变化。在我们的例子中,它帮助我们减少我们主要的CSS文件的大小从大约300 kb到150 kb。所有不必要的字符是有区别的。更多的说明如何删除空白,检查谷歌指南。

 

如果你使用Wordpress,我建议你安装插件Autoptimize。

 

你也可以下载从PageSpeed优化文件的工具。这里有一个例子:

 

下面是我们得到的结果在缩减的CSS和JavaScript。

 

V6BCd5T.png

第三步:利用浏览器缓存

 

ZWX6fOV.png

对于许多网站运营商利用浏览器缓存是最具挑战性的部分。

 

为了解决这个问题,我们把每个静文件从我们的网站CDN(内容分发网络)。

 

CDN是一个网络的服务器位于世界各地各个地方。他们能够缓存静态版本的网站,比如图像、CSS和JavaScript文件。CDN存储你的网站的内容在其服务器上的副本,当有人落在你的网站时,从服务器加载静态内容最亲近的人。

 

例如,如果你的网站的主要来自德克萨斯州的服务器,没有一个CDN,游客从阿姆斯特丹必须等待服务器加载网站从美国CDN,你的网站加载位置的接近用户。在这种情况下,这是一个地方接近阿姆斯特丹。因此,网站加载速度更快。

 

这是一个可视化表示的GTmetrix CDN是如何工作的。

 

M7cMb05.png

我们所有图像、JavaScript和CSS文件到CDN,只有我们的主服务器上的HTML文件。托管你的照片在一个CDN会产生很大的不同网站访问者的页面加载速度。

 

我们这么做后,PageSpeed工具仍然恼人地建议我们利用我们对一些第三方资源浏览器缓存。这里有一个截图:

 

xpt5dQ1.png

我们固定的社交媒体提供的脚本问题,更换柜台用一些静态图片托管在CDN上。而不是第三方脚本试图访问数据从Twitter,Facebook,或者Google +粉丝数,我们举办这些和固定问题。

 

比这更令人沮丧的社交媒体脚本问题是谷歌分析代码正在放缓,我们的网站。

 

i7MXiu9.png

为了解决谷歌分析脚本问题,我们做了一些相当困难。我们不想把分析从我们的网站,我们必须找到一个不同的解决方案。

 

谷歌分析代码很少修改每年一次或两次以上。因此,Razvan创建了一个脚本,每8小时来验证分析代码时最后修改。脚本下载分析代码只有在新变化。通过这种方式,我们可以举办分析服务器上的JavaScript代码,而无需在每个访问负载从谷歌服务器。

 

如果没有发生变化,那么分析代码将CDN负载从缓存的版本。

 

当谷歌再次修改它的JavaScript代码,我们的服务器会自动下载和上传新版本的CDN。我们使用这个脚本的所有外部第三方脚本。

 

这是一个从Pingdom工具截图展示一切从CDN负载,包括分析代码。唯一的文件从服务器载入我们的首页文件,这是只有15.5 KB。消除所有第三方脚本大大改善了整个加载速度。

 

h9JmXjG.png

第四步:消除render-blocking资源上面的褶皱

 

FMIAxXZ.png

消除render-blocking是最复杂的部分之一,提高页面加载速度,因为它需要更多的技术知识。我们必须处理的主要问题是移动所有JavaScript代码的头和身体底部的页脚页的网站。

 

如果你使用Wordpress,Autopmize插件我上面建议应该帮助您完成这个任务。检查它的设置,然后取消“力JavaScript在<头>和检查“内联CSS。”

 

第五步:启用压缩

 

zycbOoO.png

实现启用压缩建议可以做简单地在你的服务器的设置。如果你不是非常技术性的,你可以问你的技术支持团队为您的服务器启用GZIP压缩。

 

第六步:优化移动体验

 

移动体验都是关于显示响应手机版对所有不同类型的决议,使用正确的字体,和有一个好的导航系统。

 

RREZqKy.png

你可以测试你的网站看起来如何在不同的移动版本使用Google Chrome。单击汉堡菜单右侧顶部,然后在“更多的工具,开发人员工具。“左边,你可以选择去看你的网站是什么样子在不同手机分辨率。

 

bR5sqwO.png

在我们的例子中,没有很多变化。

 

结论

 

这些是最重要的步骤我们之后进行监控与谷歌反向链接得分100/100的速度的工具。我们没有优化只有主页。我们也优化内部页面,自由的反向链接检查器。

 

ny2zaoB.png

三个最重要的行动可以提高你的网站是:

 

使用一个CDN(内容分发网络)。

修复render-blocking问题。(避免JavaScript编码的体内。你的JavaScript代码应该放置在文件的底部)。

优化图片的大小和压缩。

你的团队为您的网站进行这样一个项目?如果是这样的话,你的结果是什么?

关于FelixProOptimization——我是一个企业家和在线营销。我喜欢写关于社会媒体、搜索引擎优化转化率优化、电子邮件营销、PPC和许多更多。联系我在Twitter上或Google +。

 

流行这样的帖子

为什么现在比以往任何时候都更,SEO不仅仅是谷歌吗

 

你应该知道什么可访问性+ SEO,第一部分:介绍

 

Moz当地行业报告:谁赢无线搜索?