提高页面速度的10种基础方法

更新日期: 2020-07-17阅读: 2k标签: seo

如今,Page Speed(页面速度)的意义非凡。自从Google改变Googlebot's的算法以高度支持快速,适合移动设备的网站以来,拥有快速网站变得越来越重要。如果这还不够好,用户通常会花更少的时间,转化率也会更低,你的网站体验越慢,用户的转化率就越低。


什么是Page Speed

Page Speed是将内容完全加载到网页上所花费的时间。

对于任何给定的用户来说,页面缓慢的原因可能有很多,你的用户可能正在火车上,通过信号弱的隧道,或者他们的互联网速度很慢。

通过遵循最佳实践,我们至少可以通过确保我们已经做了最好的工作来缓解问题。

现在你知道它是什么了,下面我就来教你如何提高页面速度。

注意:这些是按难度顺序列出的。在某个时候,你将需要开发人员来帮助优化你的网站。


1.使用CDN

CDN是内容传输网络的缩写。使用CDN可以让你有效地访问全球数百台小服务器,这些服务器为你提供网站的副本,大大减少了你的网站获取时间。如果你没有使用CDN,你的网站的每一个请求(包括图片、css和JavaScript)都会被缓慢地传送到你的服务器上。

根据HTTPArchive中的4.68亿个请求,48%的请求不是来自CDN。那是超过2.24亿的请求,如果他们花几分钟的时间给自己的网站添加一个CDN,速度可能会超过50%。

一定要检查你的CDN配置是否正确——在你的CDN中缓存丢失意味着CDN必须向你的源服务器请求资源,这就违背了使用CDN的初衷!所以,你的CDN必须要有一个正确的配置。

2.启用GZIP压缩

在一些CDN上,GZIP压缩只是一个标有 "启用压缩 "的复选框。这大概会减少一半的文件大小,你的用户需要下载文件才能使用你的网站,你的用户会因此而喜欢你。


3.使用较小的图像

这意味着既要降低分辨率(例如,摄像头的输出从4000x3000像素减少到网络的1000x750),又要通过压缩文件来减小尺寸。

如果你的网站使用WordPress,则有一些插件会在你上传图片时自动为你执行此操作。

在撰写博客文章时,我个人使用TinyJPG压缩图像。


4.减少页面发出的请求数

目标是减少加载页面顶部部分所需的请求数量。

这里有两种思维方式,你可以:

  • 通过删除花哨的动画或不能改善网站体验的图像,减少整个页面上的请求数量。
  • 或者,你可以通过使用延迟加载来推迟优先级不高的加载内容。


5.尽可能避免重定向

重定向会大大降低网站速度。使用响应式CSS并从一个域为你的网站提供服务,而不是为移动用户提供特殊的子域。

有些重定向是不可避免的,比如 www-> 根域 或 根域 ->www,但你的大部分流量不应该经历重定向来查看你的网站。


6.减少到第一个字节的时间

到第一个字节的时间是指你的浏览器在发出资源请求后,从服务器接收到第一个字节的数据所花费的时间。

有两个部分:

  • 在服务器上花费的时间
  • 发送数据所花费的时间

你可以通过优化你的服务器端渲染、数据库查询、api调用、负载平衡、你的应用程序的实际代码以及服务器的负载本身(特别是如果你使用的是廉价的虚拟主机——这将影响你的网站的性能),来改善你在服务器上花费的时间。

你可以使用CDN大大减少发送数据所花费的时间。


7.减少并删除阻止渲染的JavaScript

外部脚本(特别是那些用于营销的外部脚本)往往会写得很差,会阻止你的页面加载,直到它运行完毕。

你可以通过将外部脚本标记为异步来减少这种影响:

<script async src="https://example.com/external.js"></script>

你还可以延迟加载市场营销脚本,直到用户开始滚动为止:

window.addEventListener(
  'scroll',
  () =>
    setTimeout(() => {
      // 在此插入营销片段
    }, 1000),
  { once: true }
);


8.缩小CSS和JS

Minifying是指使用工具来删除空格、换行符和缩短变量名。通常情况下,这将作为构建过程的一部分自动完成。

要缩小JavaScript,请查看UglifyJS

要缩小CSS,请查看cssnano


9.删除未使用的CSS

自Chrome 59(2017年4月发布)以来,在Chrome DevTools中可以看到未使用的JS和CSS。

要看这个,打开DevTools,显示控制台抽屉(就是点击Esc时出现的那个烦人的东西),点击左下角的三个小点,打开 "Coverage",就可以看到。

点击带有重新加载图标的按钮将刷新页面,并审核CSS和JS的使用情况。


10.定期跟踪网站速度

在你的网站速度变慢的瞬间,修复网站速度问题就会容易得多。除此之外,如果你把检查网站速度作为一种习惯,那么修复网站速度慢的问题就会变成一件小得多的事情。

有免费的工具可以监视你网站的速度,其中最受欢迎的两个是WebPageTestGoogle Lighthouse。这些工具的缺点是你需要记住在进行更改之前和之后都必须运行它们。

PerfBeacon是一项服务(由本文的作者创建),该服务定期运行Google Lighthouse,并让你随时跟踪网站的速度。

来源:https://dev.to/rozenmd,作者:Max Rozen,翻译:公众号《前端全栈开发者》


链接: https://fly63.com/article/detial/9545

Seo学习心得:作为前端开发需要了解的Seo优化技能

前端开发seo的学习心得,通过seo优化可以提高我们的网站搜索排名,减低运营成本的同时,增强网站的曝光率,提高网站的可信度,作为前端开发需要掌握哪些seo优化技能呢?

要想做好SEO优化,前端技巧不可忽略

在优化行业,有大批站长工作经验丰厚,然而在前端优化技巧方面还存在较差,从优化的层面来看,SEO思维虽说很很关键,不过没有一个精准的前端把控,网站优化方面还是存在好多的不足。

robots.txt站点文件_详解网站的robots.txt限制指令怎么编写

robots.txt是一个纯文本文件,是爬虫抓取网站的时候要查看的第一个文件,一般位于网站的根目录下。这篇文章主要介绍:robots.txt是什么?robots.txt中的参数含义。robots.txt写法大全和robots.txt语法的作用,robots.txt编写注意事项

网站流量指标的结构_uv和ip、vv、pv详解

网站流量指标的结构:PV即Page View,网站浏览量,指页面浏览的次数,用以衡量网站用户访问的网页数量。UV即独立访客数,指一天内访问某站点的人数,以cookie为依据。IP即独立IP数,指一天内使用不同IP地址的用户访问网站数量,同一IP无论访问了几个页面,独立的IP数均为1

网站的权重提高_如何优化锚文本提高网站的权重?

锚文本,也称锚文本链接,就是把关键词做一个链接,指向别的网页,用来引导读者访问你网站上的其他页面。在Google看来,清晰、简洁以及与链接页面内容密切相关的锚文本可以加强两个网页间的关联性

郑州网站建设告诉你移动端网站关键词怎么优化

现在人人都要用手机,手机已经成为我们生活中不可或缺的一部分,随着互联网的发展,移动端也越来越重要了。移动端网站关键词怎么优化?用户体验优化、移动端内容优化、移动页面细节优化、移动端代码优化

网站SEO优化:写好网页标题对网站排名的重要性

与大家分享下网站SEO优化的一些技巧。谈到网站优化,首先要注意的就是网站标题的写法。每一个做SEO优化的人,都会重视网站标题和描述的优化,其中网站标题是参与关键词排名竞争的重要因素。标题一般控制在35个字左右,描述控制在80个字左右

SEO提高网站排名快速见效的方法

SEO如何提升网站排名?seo中文名称搜索引擎优化,是提升网站排名的一种技术手段,常用的手段就是优化标签,内链外链等等,最核心的优化方向,“关键词”。最常见的表现形式就是软文,但是有的时候就算你做了很多,也不见得有效果?

新网站怎么提升流量和权重?

任何流量网站都需要长期的SEO优化和维护,大多数网站管理员也是通过网站来获得一定的流量和转换,但是SEO的朋友们知道,获得大量流量的最好方法是获得高排名,但通常需要很长时间才能通过SEO获得一个新网站的排名

网站优化定时更新文章的3大优势

提及SEO优化,很多人第一时间想到的就是针对网站做优化,今天就和大家聊聊网站优化中内容优化应该注意哪些技巧?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!