您现在的位置是:主页 > 网站建设 > 网站建设

[转译]提高网站 怎么做网站优化速度给力网站优化

邢台网站优化h-5321网站优化(68)互联网8秒原则(1)提高网速(1)人已围观

简介网站打开速度直接关系到网站的用户体验,之前在互联网八秒钟原则中我们讲过关于网速对优化的重要性。为了更好

网站打开速度直接关系到网站的用户体验,之前在互联网八秒钟原则中我们讲过关于网速对优化的重要性。为了更好的做好网站优化工作,提高网站速度是非常重要的。今天邢台网站建设要分享的该篇文章就是告诉大家通过一些优化技术可以有效的提高网站速度。大家不妨一起来学习一下吧!

首先,做好优化HTML结构是提高网站速度必须。

1、引用JavaScript和CSS文件底部;

2、处理了无样式的flash内容(FOUC);

3、内联CSS和JavaScript;

4、服务器配置。

然后我们要浏览器缓存的缓存情况。

1、文件应该被缓存多长时间;

2、如何覆盖缓存;

3、数据压缩。

在应用所有这些优化我的网站,我能够得到一个完美的(100/100)PageSpeed见解分数为移动和桌面web性能的分析。

第一,优化网站HTML结构

很长一段时间,我们以为外部CSS和JavaScript引用应该在<head>头部标签。开始时引用JS和CSS资源等等HTML文档的意义,因为我需要这个东西来设计网页外观和功能正常。但是有script和link网站元素的HTML文档可以阻止页面的呈现,这意味着浏览器不会处理和显示任何随后的HTML元素,直到资源被下载和处理。

很多JavaScript文件,特别是写听记住异步编程经常是不需要内部的引用<head>头部标签,可以在HTML文档加载这样他们不阻止浏览器渲染页面内容。HTML文档的引用CSS文件末有点棘手,这是因为当你加载CSS文件的文档,用户可能会看到页面内容没有任何风格,因为外部样式表中的样式规则还没有被加载并处理。这种情况被称为flash了无样式内容(FOUC)。

1、引用JavaScript和CSS文件底部。每当有可能的话,我们应该引用外部资源底部的文档,就在关闭之前body标签。

<html>
      <head>... </head>
  <body>  ... <!-- script and link elements ideally go here --> </body>
    </html>

2、处理了无样式的Flash内容。FOUC地址,给我所做的一切body元素内联样式属性的0%的不透明度。

<body style=opacity:0>

然后,在外部样式表我重置body元素回到100%的不透明度。

body {  opacity: 1 !important; }

外部样式表已经加载和处理时,将显示的内容。这种方法的问题是如果有一个服务器故障,防止CSS文件被下载,用户就会看到一个空白页,因为内联样式属性的body元素。

3、内联CSS和JavaScript。您还可以包括CSS样式规则<style>在标签和JS脚本<script>标签在你的HTML文档。这提高了页面速度,因为浏览器不需要请求和下载外部资源呈现web页面。然而,这是只适合少量的CSS和javascript。否则HTML文档将增加文件大小和JS和CSS不会从浏览器缓存中获益。

多年来,我们不内联CSS和javascript因为它使我们更难模块化项目、规模和维护。然而,现在有许多构建工具可以处理这些问题。现在推荐你内联CSS和javascript渲染所必须折叠线上面内容等提高感知到的页面性能。在下面的一个脚本中,该脚本内联样式规则从外部样式表??这是基于一个例子PageSpeed见解文档中找到。这种方法内联CSS样式规则的问题是你的样式规则不会呈现如果用户已禁用JavaScript。

<html>
        <head> ... </head>
      <body>  ...
        <script>
          var cb = function() {
            var l = document.createElement('link'); l.rel = 'stylesheet';
            l.href = 'css/semeano.min.css';
            var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
          };
          var raf = requestAnimationFrame || mozRequestAnimationFrame ||
            webkitRequestAnimationFrame || msRequestAnimationFrame;
          if (raf) raf(cb);
          else window.addEventListener('load', cb);
        </script>
       </body>
    </html>

4、服务器配置。如果你有访问你的服务器配置,有几件事你可以做什么来提高网站速度:浏览器缓存和数据压缩。

第二,浏览器缓存

很赞哦! ()

文章评论

站点信息

  • 建站时间:2018年04月24日
  • 微信公众号:扫描二维码,关注我们
  • 站点地图:xml地图/html地图