成都网站建设如何运用最新的技术提升网页速度和性能

最近更新了我们的网站，它是经过了设计上的全面验收的。但实际上，作为软件开发者，我们会注重很多技术相关的零碎的东西。我们的目标是控制性能，注重性能，未来可伸展，为网站增添内容是一种乐趣。接着就来告诉你，为什么我们的网站速度比你们的快吧（抱歉，确实是这样的）。

性能设计

在我们的项目中，我们每天都会和设计师和产品负责人讨论关于平衡美观和性能的问题。对于我们自己的网站，这样做是很简单的。简言之，我们认为好的用户体验从快速的内容传输开始，也就意味着 性能 > 美观。

好的内容、布局、图片和交互是吸引用户的重要因素。这每个因素都会影响页面的加载时间和终端用户体验。每一步我们都在探讨如何在获得好的用户体验和保证设计美感的同时，最小化对性能的影响。

内容优先

我们想要把核心内容尽快地呈现给用户，意味着我们要处理好基本的 HTML 和 CSS。每个页面都应该达到基本的目的：传递信息。JS、CSS、网页字体、图片、网站分析等优化都是位居于核心内容之下的。

可控性

给理想网站定义了标准后，我们总结出：要想达到预期效果，就要能对网站各方面的控制都游刃有余。我们选择构建自己的静态站点生成器，包括资源传输，并且由我们自己操控。

静

我们使用 作为那些不支持 或者 JS 的浏览器的后备元素。使用图片的大实例确保了它在后备方案中的可行性。

生成

尽管图片传输方式已经确定了，我们仍需要思考该怎样有效地执行。我喜欢元素的功能，但不喜欢写上面那些代码段，尤其是写内容时必须把它加进去。我们不想做这么费力的事情：每张图片都要写6 个实例，所以优化这些图片并且把它们写在markdown文件的 里面。所以：

生成图片

在构建过程中，原图片的多个实例，包括JPG, PNG和WebP格式，我们使用gulp responsive 来生成。

最小化图片

在markdown文件中写[图片描述](image.jpg).

在构建过程中使用自定义Markdown渲染器来为已经完全成熟的 元素编译传统的markdown图片声明。

SVG动画

我们为自己的网站选择了特定的图标类型，其中SVG插图占了主要地位。这样做有以下几个原因：

• 首先，SVG的图片比位图更小；

• 其二，SVG图片本身就是响应式的，有很棒的伸缩性, 所以不需要图片生成及 元素；

• 最后也是很重要的一点，就是我们可以通过CSS来不断改变它，赋予它新的活力！我们所有的组合页面都有一个自定义的动态SVG图, 可以被概述页面所复用。这张图片作为我们所有组合页面的一种循环风格，使得页面设计一体化，同时又几乎不会对性能造成影响。请看这张动画，看看我们是如何用CSS来改变它的。

自定义网页字体

在深入之前，这里有一个关于在浏览器设置自定义字体的简短介绍。当浏览器发现CSS里面有 @font-face 的定义，但是用户的电脑并不支持该字体时，它会尝试下载该字体文件。在下载时，多数浏览器根本不会用这种字体来展示文本。这种现象称为“不可见文本的闪现” 或者FOIT。如果你有留意，你会发现网页上都有这种情况存在。如果你问我，我会告诉你这会影响用户体验。它延迟了用户读取他们所需内容的时间。我们可以迫使浏览器改变这种行为，变成 “无样式内容闪现” 或者称为FOUT。我们告诉浏览器先使用普通字体，像 Arial 或者 Georgia。当自定义的字体下载完成后，再代替标准字体并且重新渲染。这样，即使自定义字体下载失败，仍然不会影响内容的可读性。然而，有人会认为这是一种妥协的做法，但我们认为自定义字体只是一种优化。尽管没有自定义字体，网页看起来也完好，也能百分百的正常运行。勾选/不勾选复选框来切换我们的网页字体，来自己体验一下：

切换下载的字体类 使用自定义网页字体可以改善我们的用户体验，只要你能够优化他们，并且负责任地为之服务。

字型子集设定

到目前为止，子集设定是改善网页字体性能最快的方式。我将会向每个使用自定义字体的网页开发者推荐它。如果你能完全控制网页内容，并且知道它将要展示哪些特性的话，你可以完全使用子集设定。但是，即使是仅仅把字体设为西方语言，也会对文件大小造成很大的影响。例如，我们的Noto Regular WOFF 字体，默认是246KB，将其设为西方语言后，大小下降到31KB。我们使用Font squirrel webfont, 这种字体真的很易用。

字体监听器

Bram Stein 推出的字体监听器是一个很了不起的脚本，可以帮助检查字体是否已被加载。至于你是如何加载字体的，是通过一个网页字体服务，还是自己上传就不可知了。在这个监听器告诉我们所有自定义的字体已经下载完毕后，我们就可以在 元素上添加一个字体加载完毕的类，我们的页面就会重新用新的字体：

html{font-family:Georgia,serif; }html.fonts-loaded{font- family : Noto, Georgia,serif; }

注意： 为了简短，我没有给上面CSS中的Noto 加上@font-face 的声明。

我们可以设定一个cookie来记住所有的字体已经被加载过，就可以让他们缓存在浏览器里面了。我们使用这个cookie来做重复的浏览，这个我后续会解释。

在不久的将来，我们或许不需要 Bram Stein 的脚本来监听这个行为。CSS开发团队已经提案一个新的@font-face 描述器，也叫font-display。它的属性值控制着一个可下载的字体是如何在还没加载出来时就渲染页面的。这是CSS对 font-display的描述：它将带给我们像上面方法一样的行为效果。你可以读读更多关于font-display 的属性。

JS和CSS懒加载

一般来讲，我们都是尽可能快的加载需要的资源。我们移除一些堵塞的请求来加快页面渲染，优化首屏，用浏览器缓存来处理重复的页面。

JS懒加载

设计上，我们的网站并没有很多JS。我们发展了一个JavaScript工作流来处理我们目前已有的js, 以及未来会用到的js资源。

JS在 块里面渲染，这是我们想要的。JS应该只是用来提高用户体验，不应该是访问者需要的关键。处理JS堵塞渲染的简单方法就是把脚本放在页面的尾部。这样网页就会在整个HTML 渲染完毕后才去加载JS。

另一种可以把脚本放在head 执行的方案是在

我们把这小段脚本放在页面头部，来检测浏览器是否支持原生JavaScript的 document.querySelector 和window.addEventListener 属性。如果支持，我们通过

当前文章：成都网站建设如何运用最新的技术提升网页速度和性能
标题URL：/news17/42117.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站建设等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联