如何衡量前端网站的性能

谈到优化过程，新时代的网页设计师几乎不存在。 即使是已经工作十年或更长时间的许多Web设计人员也无法完全理解站点优化的重要性。

长时间后，网站将开始瘫痪。 前端文件可能包含夸大的代码块或锁定的隐藏位。 这在JavaScript文件或图像中最常见。 为用户体验创建一个令人愉悦的网站可能很重要，但如果没有优化的网站，则设计甚至可能没有机会充分吸引不耐烦的用户。

以下提示适用于有兴趣全面优化其页面的初学者和中级Web开发人员。 有许多可用的技术，并且每种技术的行为都会有所不同，具体取决于您的网站所遇到的问题。 尝试浏览一些区域，看看是否可以将这些技术应用到自己的标记中。

HTTP请求

您的网站每次加载时，都会向远程服务器发送HTTP请求。 这种类型的数据传输称为网络协议，专门用于分发和存储纯文本文件。 这些通常包括您的基本前端代码，例如HTML，CSS和JavaScript。

发送请求后，您的浏览器将解析每个页面元素。 根据解析引擎的不同，每个网站将加载不同，并且元素将根据传输速度以不同的顺序显示。 例如，Internet Explorer将呈现与Chrome或Safari不同的网页，并且所有这些页面都运行与Firefox或Opera稍有不同的解析引擎。

必须考虑的是每个文件的请求时间要花费多长时间，以及这种趋势是否持续存在。 考虑一个月内接待10万或100万以上的访客。 浏览器的工作是拼凑每个页面元素并将外部文件加载到内存中。

通常，阻碍网站优化速度参考的因素包括笨拙JavaScript或大型图像文件。 随着Verizon FiOS的普及，互联网速度达到600kbps并不断攀升是很常见的！ 不幸的是，这不是常态，即使使用高速连接，也可能会遇到优化错误。

补救网站性能

在Web开发和前端优化领域，我们并不孤单。 为了完成适当的工作，需要使用某些工具来处理这项工作。

Google发布了一个名为Page Speed的项目，旨在帮助开发人员优化其网站并检查最佳性能。 该项目最初是作为开源Firebug附加组件开始的，现在已被接受为网站测试的第三方参考。

Firebug用户的另一个选择是Yahoo!的YSlow插件 。 该脚本会分析每个网页请求，并提出提高性能的最常用方法。 这些建议基于Yahoo! 开发人员资源，以获取网页设计中的最佳优化实践 。

该程序起初可能有点累，因为它包含了很多信息。 只需坚持基础知识，并遵循简单的文档，便可以轻松完成此过程。

开发人员始终对跳入项目以分解代码感兴趣，因此这应该是毫无道理的。 要获得一些帮助，您可以查看YSlow帮助指南 。

速度技巧

您可以将一些简单的技巧立即应用于您的网站，以提高性能。 第一种也是最简单的方法是分离CSS和JavaScript文件。

CSS代码属于文档的标题。 这很有用，因为在加载DOM时需要解析CSS属性。 网络浏览器在标题中识别出您CSS样式后，将等待完全显示网页，直到加载了所有样式。 同样，用于图标或背景设计的任何图像都需要花费一些时间来加载，因此应该首先加载。

另一方面，将所有JavaScript文件都移至您的网站页脚可能会大大缩短挂断时间。 许多浏览器会阻止并行下载，这意味着在呈现页面之前，用户的网络浏览器可能会停止4秒钟以完全加载外部JS包含的内容。

这并不总是可能的，也不是每个网站都必须的。 如果您的页面加载相同的响应时间相同，而与包含文件的放置位置无关，那么就不要打扰任何播放。

在整个DOM完成之前，无法加载动态内容，但是有时这将返回错误。 测试CSS / JS包含项，看看是否可以返回任何优化好处。

文件大小压缩

压缩大文件已变得非常流行。 现在，它甚至可以在网页中使用，以减少加载时间并保持很小的文件大小。 大多数工作已经完成，并且使用诸如YUI Compressor微型文件之类的工具无需耗电。

网上还有许多其他免费服务可以帮助完成此任务。 Minify CSS具有完整的CSS压缩接口 ， 可简化流程。 同一网站还具有一个自定义JavaScript压缩器 ，该压缩器执行许多相同的任务，但使脚本保持井井有条。

您也可以考虑压缩网页中最大的图像。 可以使用任何照片编辑软件（例如Adobe Photoshop或GIMP）通过简单地以较低分辨率对图像重新采样来完成此操作。 与jpg或TIFF格式相比，PNG图像输出的平均尺寸要小得多。 还有很多在线工具，例如Image Optimizer可以帮助压缩过程。

来源检查和指标

这是Web开发人员不经常使用的例程，可以产生惊人的效果。 通过分析网站中的所有页面元素，您可以了解加载时间最长的页面元素和加载顺序。

最受欢迎的工具Mozilla Firebug是Firefox浏览器的插件。 该应用程序在浏览器底部安装了一个小的工具栏，用于检查每个网站的响应时间，标题信息，页面元素和脚本。 该脚本还已作为Google Chrome的扩展程序移植到Firebug Lite中。

使用mod_pagespeed的Apache

并非所有设置都将运行Apache Web服务器，因此该选项并非始终可用。 该模块与前面提到的Google的Page Speed监视器直接相关。 实际上，mod_pagespeed的代码最初基于Google Code数据库中的许多库。

Apache允许服务器管理员安装称为模块的小型软件包，以增强其服务器的性能。 mod_pagespeed是这些模块之一，可在运行时自动执行优化技术。 尽管有一些主要的应用程序包括即时HTML / CSS / JS压缩和图像缓存，但是有太多的过程要列出。

该项目目前位于Google上 ，并向开发人员开放。 Google一直在与GoDaddy合作，将mod_pagespeed实施到所有运行Apache HTTP服务器的托管帐户中。

尽管可以使用许多其他选项，但是前端开发工作是最艰巨的，尤其是考虑对关键网页进行预优化时。 针对网站标题和大图像进行优化可能是一项非常繁琐而又有意义的任务。

考虑本文介绍的一些技术，并了解如何将这些技术应用于您的Web项目。 通常，开发人员没有足够的时间来欣赏他们的工作并清理旧的代码。 如果您仍渴望获得一些提示，则应阅读我们的终极Web优化指南，以获取有关前端维护和便利的性能增强的指针。

翻译自: https://www.hongkiat.com/blog/how-to-measure-front-end-website-performance/