...

2024如何优化网站速度达到满分?

How to optimize website speed

在2024年网站速度优化将更加重要。网站速度是影响用户体验的关键因素之一。一个加载速度慢的网站会让用户失去耐心,导致跳出率上升,最终影响网站的流量和转化率。

网站速度由网站自身优化,CDN,服务器三大因素影响。

现在我跟大家分享如何把网站移动端,电脑端优化到谷歌检测满分。

网站自身优化

图片优化

网站加载速度过慢一部分原因是由于照片过大导致需要额外的网络加载。以下是一些优化网站照片大小的技巧:

1. 选择正确的图片格式

  • JPEG: 适合保存照片,尤其是包含大量颜色的照片。
  • PNG: 适合保存带有透明背景的图片或图标。在此推荐Removebg好用到想付费!
  • SVG: 适合保存矢量图形,如图标、徽标等。在谷歌直接搜品牌名+SVG,如果是做自己LOGO的SVG可以用AI等软件转格式。
  • Webp: 文件大小更小,加载速度更快 支持透明度和动画 可以被搜索引擎索引。

2. 调整图片尺寸

3. 压缩图片

  • 使用在线图片压缩工具TinyPNG进行压缩。

    Webp格式照片单独编辑有些困难,我们可以在JPG格式编辑好的基础上,使用Accelerator插件把照片全部转化成Webp格式。需要注意的是,并非所有浏览器都支持WebP格式。

    我们可以使用代码提供退回方案,需要代码可以私信我。

    Accelerator插件安装

    Accelerator 插件是优化网站速度的有效工具之一。它可以帮助您轻松实现以下优化:

    • 缓存静态资源:Accelerator 可以将网站的静态资源,例如图片、CSS 和 JavaScript 文件,缓存到浏览器中。这样,当用户再次访问网站时,浏览器可以直接从本地加载这些资源,从而提高网站加载速度。
    • 压缩资源:Accelerator 可以压缩网站的 HTML、CSS 和 JavaScript 文件,从而减少文件大小,提高加载速度。
    • 优化图片:Accelerator 可以自动优化网站的图片,例如压缩图片大小、调整图片尺寸等,从而提高图片加载速度。
    • 延迟加载:Accelerator 可以延迟加载非必要的资源,例如广告、评论等,从而提高网站加载速度。

    使用 Accelerator 插件优化网站速度的步骤如下:

    1. 安装 Accelerator 插件。
    • 去官网下载Accelerator,在WordPress后台下载的是基础版只有缓存功能,其他功能没有开放。

    How to optimize website speed (1)

    • 选择左上角Begin Setup Wizard,开始定制你的Accelerator然后选择全部功能。

    • 检测需要关闭哪些功能,才能开始使用。一般是关闭Elementor的Lazy Load Background Images和Speed Optimizer的Dynamic Caching。注意Accelerator需要搭配Speed Optimizer一起使用。

    • 继续设置

    Which optimization mode do you need?

    Always up-to-date content

    What is the performance of the site’s hosting?

    选择High或者Medium,如果服务器性能很好可以选择High,如果服务器只有一个网站不确定性能好不好则可以选择Medium。

    Is the layout of the site universal for all types of devices (is it necessary to separate the processing of mobile and other devices)?

    universal or adaptive

    1. 在插件设置中选择要优化的选项。

    在Cache and it’s revalidation把general cache打开。如果图片需要WebP格式保持打开,建议保持100%的质量,降低到80%画质会变模糊。

    1. 点击 “保存” 按钮。

    在Manager中可以查看每个网页的缓存情况,出现绿色则表示缓存成功黑色需要等待。

     

    优化到这里,你的网站基本能在3秒之内打开了(请用浏览器的无痕模式测试)。可你会问,为什么我VPN换到英国的时候网站打开速度变慢了?

    我们的网站在服务器如果是在美国,从英国访问到美国有很长一段距离,需要额外的加载时间。

    这也是为什么你明明用美国节点很快而英国节点打开速度慢的原因。这个时候我们可以使用CDN来解决这个问题。

    CDN设置

    CDN可以在世界各地的服务器上缓存网站的内容,用户可以从离他们最近的服务器访问网站,从而更快地获取网站内容,提高全球访问性。

    Cloudflare是全球领先的CDN提供商之一,拥有超过200个数据中心,遍布全球100多个国家和地区。

    Cloudflare CDN具有以下优点:

    1. 性能卓越

    Cloudflare CDN可以显著提高网站的加载速度,减少页面加载时间,并改善用户体验。Cloudflare CDN使用以下技术来提高性能:

    • 缓存静态内容:Cloudflare CDN会在全球范围内缓存静态内容,当用户请求这些内容时,Cloudflare CDN会从离用户最近的服务器上提供内容,从而减少延迟。
    • 优化网络路由:Cloudflare CDN会根据用户的网络位置和当前的网络状况,选择最佳的路由路径来传输内容。
    • 压缩内容:Cloudflare CDN可以压缩HTML、CSS和JavaScript文件,以减少文件大小并加快加载速度。(不推荐打开这个功能,很容易造成网页排版Bug)

    2. 安全可靠

    Cloudflare CDN可以帮助网站抵御各种网络攻击,例如DDoS攻击、SQL注入攻击和跨站脚本攻击。

    3. 易于使用

    Cloudflare CDN易于设置和使用。Cloudflare CDN提供免费套餐,可满足大多数网站的需求。

    如何在服务器上面链接Cloudflare

    How to optimize website speed (5)

    • 我们会得到CF的NS记录值,来到域名注册网更改NS数值。

    可能你会问,我的NS值是对应服务器的,更改到了CF的网站不会停机吗?

    答案是:不会的。CF的DNS设置正确,网站的流量将被路由到 Cloudflare 的服务器,然后 Cloudflare 将请求代理到您的服务器上。网站是能够正常打开。

    • 更改服务器的DNS值

    How to optimize website speed (7)

    例如我使用的是Siteground,在控制面板中将它们更新为指向 Cloudflare 提供的A 记录和 CNAME 记录。到这一步不太懂可以寻找你服务器客服寻求帮助。

    • 优化选项

    我们可以参考官方文档,里面详细介绍了每个选项的功能。请注意不要打开自动缩小源代码的文件大小,这会导致网页排版错误。

    服务器选择

    服务器主要分为共享主机和云主机,但它们在性能、可扩展性和价格方面存在差异。

    共享主机

    共享主机是一种将一台物理服务器的资源分配给多个用户的虚拟主机服务。这种方式的优势是价格便宜,易于使用,适合小型网站或个人博客。著名的共享主机服务商有SiteGround, Bluehost, A2 Hosting.

    云主机

    云主机是一种基于云计算技术的虚拟主机服务。它可以提供更高的性能、可扩展性和可靠性,但价格也相对较高。著名的云主机服务商有DigitalOcean, Cloudways.

    共享主机和云主机的比较

    特性 共享主机 云主机
    价格 便宜 昂贵
    性能
    可扩展性
    可靠性
    易用性 易于使用 较难使用

    共享主机和云主机各有优势,具体取决于您的需求。如果想一步到位建议还是直接上云主机。

    How to optimize website speed (8)

    做完以上步骤,你的网站速度能够在三秒以内打开,基本满足客户的访问需求了。在新的一年里祝各位早日实现询盘自由。

    联系作者

    你可以扫二维码添加我微信,请注明来意。

    微信
    Seraphinite AcceleratorOptimized by Seraphinite Accelerator
    Turns on site high speed to be attractive for people and search engines.