expiresdefault "access plus 1 month"   3.使用cdn   浏览器限制了每个域中可同时处理的并发http请求数量:4至8个。如果你的网页需要从域中加载96个资源,那浏览器最多可设置12组并发请求。(因为文件大小并不同,这种情况实际上并不会发生,但该限制仍然适用。)   如若从另一个域中请求静态文件,则可使浏览器处理的http请求数量加倍。此外,一个文件被调用后就会产生一个缓存文件,以供下一个调用它的网站使用。我们可选用javascript库(如jquery)和字体库,同时你也可以考虑专用的图片托管。   前面提到的三条建议可以加快网站的加载速度,下面的建议将帮助我们检查网站代码,以高效地减少网站重量。   4.删掉没用的资源   网站一直在变革之中。如果你不再使用某组件,那就删掉与之关联的css和javascript。如果它们包含在一个单独文件中,处理起来就会很简单。否则,你需要借助一些工具,如chrome的audit开发工具、jslint、 dust-me selectors、 css usage、 unused-css.com,也可构建 grunt-uncss此类的工具。   5.合并和压缩css   理想的情况是只拥有一个css文件(如果你使用rwd以支持ie的老版本,那就需要两个css文件。)构建并维护几个单独的css文件也算合理,但在部署到产品服务器之前,你应该将它们集合在一起,并删掉那些不必要的空白区域。   saas、less和stylus等预处理器可帮你完成这些痛苦的工作。 grunt.js、 gulp等工具可自动化你的工作流。如果你更喜欢gui,可借助koala提供的免费跨平台应用。   如果你觉得这些比较麻烦,也可手动通过命令行工具将css文件集中在一起,如在windows中,可使用如下代码: 1 copy file1.css file2.css file.css   在mac/linux中,可使用如下代码: 1 cat file1.css file2.css > file.css   最终文件经过在线css压缩工具(如 cssminifier.com、 css compressor & minifieror等)压缩后即可运行。   最后,请记住在头部(head)加载所有css,以便浏览器展示接下来的html元素,同时也可避免浏览器下次再重绘页面元素。   6.压缩并合并javascript   平均每个页面需加载18个javascript文件,所以我们要将自己编写的javascript代码进行合并和压缩。我们可以自己构建压缩工具,也可以使用在线工具,如 yui compressor、 closure compiler及compressorrater。   使用javascript压缩工具进行压缩,必须十分谨慎。你的代码有一点小问题,即便丢失了一个分号,压缩过程也可能会失败。无论如何,对javascript文件进行压缩,可减少http请求数量,从而提高网站性能。   最好在之前加载javascript,这样可确保该脚本不会阻碍其它内容的加载,同时在该脚本被下载和执行之前,页面的内容已加载完毕,并可阅读了。   7.使用正确的图片格式   错误地使用图片格式会增加网页的负载。图片格式通常有以下使用原则: 照片使用jpg格式; 其他的使用png格式。   当你有一些小图像,它们仅包含有限的几种色彩集,采用gif格式,其压缩效果可能更好。本文暂不讨论向量图。   现在有大量免费的图形软件包,可用来转换图片的格式。其中像xnview允许你批处理这些文件。请记住下面两条原则:   jpg为一种有损压缩格式,其质量介于0(质量很差、更小的文件)至100(质量最好,更大的文件)之间。介于30至70之间的大部分图片显示效果比较好。   png支持256颜色表和24位的真彩色。如果你不需要透明,并能控制调色板,那256的png图像颜色模式可能压缩得更好。   8.重整大图片的尺寸   即便是最入门级的智能手机上的照片机(三百万像素),其拍出来的照片往往太大而不适合在网站上显示。但大部分内容编辑者往往将图片直接从相机中直接上传到网站上。因此,我们需要一个可以自动调整图片尺寸的系统。   图片的尺寸永远不能超过它所在容器的最大值。如果网站模板的宽度最大为800px,那图片的宽度就不能超过该值。一些高分辨率、retina显示屏,可显示宽度为1600px的图片,但这仍比从相机中直接输出的图片要小。   在减轻网页重量方面,图片尺寸的调整起着重要的作用。将图片尺寸缩小50%,可节省75%的总空间,相当于减少了文件大小。   9.进一步压缩图片   即便已将图片调整为正确的格式和尺寸,你仍可使用一些分析和优化图像的工具进一步压缩图片。这些工具包括 optipng、 pngout、 jpegtran和 jpegoptim。大部分工具可独立安装,也可整合入你构建的过程中。另外,还有一些在线工具,如smush,它可以工作于云上。   10.去掉不必要的字体   web字体对设计进行了重大改革,减少了基于图像的字体的使用。但是,使用传统字体后,网页的代码量往往会增加数百kb。所以网站中这种字体的使用尽量控制在两、三种以内。   利用以上提到的方法,大部分网站可以将减去30~50%的重量。对于一般的网站,可以减掉800kb的代码量,访问速度可获明显提升。(编译:陈秋歌)   内容来自:10 quick and easy fixes to reduce page weight"/>

优化准则:网站减负的十大建议 -亚博电竞官方网址

7,708views
no comments

共计 3323 个字符,预计需要花费 9 分钟才能阅读完成。

网站快速加载,是提供良好用户体验的前提。然而,网站功能的不断增多,程序包的不断臃肿,导致网站访问时较大的下载量,最终影响了响应速度。没有一个用户喜欢等待,如何减少代码量,为网站减去过多负担,craig buckler 在 sitepoint 网站发表了一篇文章《》,分享为网站减负的十个建议。下面为该文的编译内容。

2013 年,网站页面的重量增加了 32%,竟然达到了 1.7mb,包含 96 个独立 http 请求。这只是一个平均数值,其中近一半的网站已经超过了这个数值。网站的过度臃肿正趋于流行,其中很大的责任在于 web 开发者。

过于笨重的网站将严重影响网站的最终体验,主要表现在以下四个方面:

  • 更大的下载量,导致更慢的用户体验。并不是每个人都拥有 20m 的网络连接,尤其是对于那些不发达地区。不管你的网站多么优秀,用户永远不希望等待。
  • 移动 web 访问正迅速发展,移动网民几乎占到所有网民的 1 /4。在典型的 3g 网络连接下,一个 1.7mb 的网站加载需要近一分钟。如果你的网站无法高效工作于这些移动设备,那采用响应式 web 设计技术又有什么用呢?
  • 网站加载速度已被谷歌加入排名算法中。加载缓慢会降低网站排名,同时也会影响搜索引擎优化。
  • 网站包含的代码越多,更新和维护它所花费的时间就会越长。

craig buckler 预言,2014 年网页的重量将会下降。那如何精简代码,为网站减负呢?craig buckler 给出了十条建议。这些建议中涉及到的技术均是大家熟知的。

1. 启用 gzip 压缩

根据  上的数据显示,近一半的网站都未进行过压缩。在 web 主机上,通过简单的服务器设置即可开启 gzip 压缩。

2. 支持浏览器缓存

如果浏览器能容易地缓存一个文件,那它就无需反复下载该文件了。实现该功能的一个亚博电竞官方网址的解决方案,就是在 http 头中设置合适的 、上一次修改时间或采用的 。

你可通过配置服务器来自动完成以上工作。下面是 apache 中的.htaccess 文件,其中的代码实现了“将所有图片缓存一个月”的功能。

1
2
3
4
5
6
7
8
expiresactive on
 
expiresdefault "access plus 1 month"

3. 使用 cdn

浏览器限制了每个域中可同时处理的并发 http 请求数量:4 至 8 个。如果你的网页需要从域中加载 96 个资源,那浏览器最多可设置 12 组并发请求。(因为文件大小并不同,这种情况实际上并不会发生,但该限制仍然适用。)

如若从另一个域中请求静态文件,则可使浏览器处理的 http 请求数量加倍。此外,一个文件被调用后就会产生一个缓存文件,以供下一个调用它的网站使用。我们可选用 javascript 库(如 jquery)和字体库,同时你也可以考虑专用的图片托管。

前面提到的三条建议可以加快网站的加载速度,下面的建议将帮助我们检查网站代码,以高效地减少网站重量。

4. 删掉没用的资源

网站一直在变革之中。如果你不再使用某组件,那就删掉与之关联的 css 和 javascript。如果它们包含在一个单独文件中,处理起来就会很简单。否则,你需要借助一些工具,如 chrome 的 audit 开发工具、、、、,也可构建  此类的工具。

5. 合并和压缩 css

理想的情况是只拥有一个 css 文件(如果你使用 rwd 以支持 ie 的老版本,那就需要两个 css 文件。)构建并维护几个单独的 css 文件也算合理,但在部署到产品服务器之前,你应该将它们集合在一起,并删掉那些不必要的空白区域。

saas、less 和 stylus 等预处理器可帮你完成这些痛苦的工作。、 等工具可自动化你的工作流。如果你更喜欢 gui,可借助 koala 提供的免费跨平台应用。

如果你觉得这些比较麻烦,也可手动通过命令行工具将 css 文件集中在一起,如在 windows 中,可使用如下代码:

1
copy file1.css file2.css file.css

在 mac/linux 中,可使用如下代码:

1
cat file1.css file2.css > file.css

最终文件经过在线 css 压缩工具(如 、or 等)压缩后即可运行。

最后,请记住在头部(head)加载所有 css,以便浏览器展示接下来的 html 元素,同时也可避免浏览器下次再重绘页面元素。

6. 压缩并合并 javascript

平均每个页面需加载 18 个 javascript 文件,所以我们要将自己编写的 javascript 代码进行合并和压缩。我们可以自己构建压缩工具,也可以使用在线工具,如 、 及 。

使用 javascript 压缩工具进行压缩,必须十分谨慎。你的代码有一点小问题,即便丢失了一个分号,压缩过程也可能会失败。无论如何,对 javascript 文件进行压缩,可减少 http 请求数量,从而提高网站性能。

最好在 之前加载 javascript,这样可确保该脚本不会阻碍其它内容的加载,同时在该脚本被下载和执行之前,页面的内容已加载完毕,并可阅读了。

7. 使用正确的图片格式

错误地使用图片格式会增加网页的负载。图片格式通常有以下使用原则:

  • 照片使用 jpg 格式;
  • 其他的使用 png 格式。

当你有一些小图像,它们仅包含有限的几种色彩集,采用 gif 格式,其压缩效果可能更好。本文暂不讨论向量图。

现在有大量免费的图形软件包,可用来转换图片的格式。其中像 xnview 允许你批处理这些文件。请记住下面两条原则:

jpg 为一种有损压缩格式,其质量介于 0(质量很差、更小的文件)至 100(质量最好,更大的文件)之间。介于 30 至 70 之间的大部分图片显示效果比较好。

png 支持 256 颜色表和 24 位的真彩色。如果你不需要透明,并能控制调色板,那 256 的 png 图像颜色模式可能压缩得更好。

8. 重整大图片的尺寸

即便是最入门级的智能手机上的照片机(三百万像素),其拍出来的照片往往太大而不适合在网站上显示。但大部分内容编辑者往往将图片直接从相机中直接上传到网站上。因此,我们需要一个可以自动调整图片尺寸的系统。

图片的尺寸永远不能超过它所在容器的最大值。如果网站模板的宽度最大为 800px,那图片的宽度就不能超过该值。一些高分辨率、retina 显示屏,可显示宽度为 1600px 的图片,但这仍比从相机中直接输出的图片要小。

在减轻网页重量方面,图片尺寸的调整起着重要的作用。将图片尺寸缩小 50%,可节省 75% 的总空间,相当于减少了文件大小。

9. 进一步压缩图片

即便已将图片调整为正确的格式和尺寸,你仍可使用一些分析和优化图像的工具进一步压缩图片。这些工具包括 、、 和 。大部分工具可独立安装,也可整合入你构建的过程中。另外,还有一些在线工具,如 smush,它可以工作于云上。

10. 去掉不必要的字体

web 字体对设计进行了重大改革,减少了基于图像的字体的使用。但是,使用传统字体后,网页的代码量往往会增加数百 kb。所以网站中这种字体的使用尽量控制在两、三种以内。

利用以上提到的方法,大部分网站可以将减去 30~50% 的重量。对于一般的网站,可以减掉 800kb 的代码量,访问速度可获明显提升。(编译:陈秋歌)

内容来自:

正文完
 
亚博电竞官方网址 copyright notice: our original article, by 西安seo 2014-08-18 publish, total 3323 words.
转载说明:除特殊说明外本站文章皆由cc-4.0协议发布,转载请注明出处。
comment(no comments)
网站地图