文档章节

10 Quick and Easy Fixes to Reduce Page Weight

mickelfeng
 mickelfeng
发布于 2014/01/23 13:49
字数 1405
阅读 28
收藏 0

Total page weight increased by 32% in 2013 to reach a ludicrous 1.7Mb and 96 individual HTTP requests. That’s an average figure; half of all sites will be larger. Website obesity has become an epidemic and we web developers are to blame. There are no excuses.

An overweight site will adversely affect your bottom line:

  1. The larger the download, the slower the experience. Not everyone has a 20Mb connection and this is especially true in developed western countries with aging copper infrastructures. It doesn’t matter how good your site is: users will not wait.

  2. Mobile web access has increased rapidly to reach almost one in four users. On a typical 3G connection, a 1.7MB page will take almost a minute to appear. Is there any point adopting Responsive Web Design techniques when your site won’t work effectively on those devices?

  3. Google’s page speed algorithms will downgrade your site and harm Search Engine Optimization efforts.

  4. The more code you have, the longer it takes to update and maintain.

I predicted page weight will drop this year — and I hope not to be proved wrong. Fortunately, there are a number of quick fixes which will have an instant effect on site performance. All these techniques are well known, use today’s technologies, do not take considerable time, and can be implemented on an existing codebase without the need for redevelopment.

The first three don’t actually slim your website, but put it in a corset and flattering clothing…

1. Activate GZIP compression

According to W3Techs.com, almost half of all websites do not enable compression. This is normally a server setting which should be enabled by your web host, although it may be possible to configure it yourself.

2. Encourage browser caching

If the browser can easily cache a file, it won’t necessarily need to download it again. Simple solutions include setting an appropriate Expires headerLast-Modified date or adopting ETags in the HTTP header.

You may be able to configure your server to handle this automatically, e.g. here is an Apache .htaccess setting to cache all images for one month:

<IfModule mod_expires.c>
ExpiresActive On

<FilesMatch "\.(jpg|jpeg|png|gif|svg)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>

</IfModule>

3. Use a Content Delivery Network (CDN)

Browsers set a limit of between four and eight simultaneous HTTP requests per domain. If your page has 96 assets loaded from your domain, at best it will take twelve sets of concurrent requests before all appear. (In reality, file sizes differ so it doesn’t happen exactly like that, but the limitation still applies.)

Requesting static files from another domain effectively doubles the number of HTTP requests your browser can make. In addition, the user is more likely to have that file pre-cached because it’s been used on another site elsewhere. Easy options are JavaScript libraries such as jQuery and font repositories, but you could also consider dedicated image hosting.

These first three options help improve page speed but we’ll need to examine your code before we can actively reduce page weight…

4. Remove unused assets

Websites evolve. If you’re no longer using a widget, you can remove the associated CSS and JavaScript. If they’re contained in separate files that’s a simple job. If not, you may need to use tools such as Chrome’s Audit Developer Tool, JSLintDust-Me SelectorsCSS Usageunused-css.com or build tools such asgrunt-uncss.

5. Concatenate and minify CSS

Ideally, you require one CSS file (although a couple may be necessary if you’re using RWD to support old versions of IE). While it may be sensible to build and maintain separate CSS files, you should join them and remove unnecessary whitespace prior to hosting on your production server.

Pre-processors such as SassLESS and Stylus can do the hard work for you. Build tools including Grunt.jsor Gulp can automate your workflow or, if you’d prefer a GUI, Koala provides a free cross-platform application.

If that sounds like too much effort, you can manually concatenate files in your text editor or from the command line, e.g. in Windows:

copy file1.css+file2.css file.css

or Mac/Linux:

cat file1.css file2.css > file.css

The resulting file can be run through an online CSS minifier such as cssminifier.comCSS Compressor & Minifier or CSS Compressor.

Finally, remember to load all CSS in the head so the browser knows how to style the HTML that follows and doesn’t need to redraw the page again.

6. Concatenate and minify JavaScript

The average page loads 18 individual script files. While it’s practical to keep libraries such as jQuery as separate files, your own JavaScript code should be concatenated and minified on your production server. Again, build tools can help or you can use online tools such as the YUI CompressorClosure Compiler or, my personal favorite, The JavaScript CompressorRater which passes your code to multiple engines so you can choose the best.

Admittedly, you need to be slightly more careful since a JavaScript compressor can fail if you have bad code — even a missing semi-colon. However, simply concatenating the files will provide a performance boost because you’re making fewer HTTP requests.

Finally, it’s best to load JavaScript just before the closing HTML body tag. This ensures the scripts don’t block loading of other content and page content is readable before scripts are downloaded and executed.

7. Use the correct image format

Using the wrong image format can bulk up your pages. In general:

  1. use JPG for photographs

  2. use PNG for everything else.

GIF may compress better when you have small graphics with limited color sets — although it’s rare. Some images are also more appropriate as vectors, but we’ll discuss that in a later article.

You’ll need a decent graphics package to convert images but there are plenty of free options available and some such as XnView allow you to batch process files. Remember to play with the settings:

  • JPG is a lossy format with a quality between 0 (poor, smaller file) to 100 (best, larger file). The majority of images will look fine somewhere between 30 and 70 but experiment to find the lowest acceptable value.

  • PNG is available in 256 and 24-bit color varieties. If you don’t need transparency and can limit the color pallet, the 256-color version may compress better.

8. Resize large images

An entry-level smart phone with a 3 mega-pixel camera will produce an image that is too large to display on a web page. Unfortunately, content editors will upload images directly from their camera. A little education and an automated resizing system is recommended.

Image dimensions should never exceed the maximum size of their container. If your template has a maximum space of 800 horizontal pixels, the image will not need a greater width. That said, those using high-density/Retina displays may appreciate a double 1,600 pixel width image, but that’s still smaller than typical camera output.

Resizing images has a significant effect on page weight. Shrinking the image dimensions by 50% reduces the total area by 75% and should considerably reduce the file size.

9. Compress images further

Even if you’ve switched to the correct format and resized the dimensions, it’s possible to shrink image files further using tools that analyze and optimize the graphic. These include OptiPNGPNGOUT,jpegtran and jpegoptim. Most can be installed as standalone executables or integrated into your build process. Alternatively, online tools such as Smush.it can do the work in the cloud.

10. Remove unnecessary fonts

Web fonts have revolutionized design and reduced the need for graphic-based text. However, custom fonts have a cost and may add several hundred kilobytes to your page. If you’re using more than two or three fonts, you’re possibly overdoing it. Your client/boss may love awful handwriting typefaces but, if it’s only used for one title, is it worth downloading a 200KB font file?

I suspect many sites can reduce their weight by 30-50% with a few hours of effort from a non-developer. For the average site, that’s a saving of more than 800Kb and it’ll become noticeably faster. In my next article we’ll discuss more complex optimizations which involve rewriting code.

Reducing Page Weight

http://www.csdn.net/article/2014-01-20/2818201-ten-quick-fixes-reduce-page-weight

本文转载自:http://www.sitepoint.com/ten-quick-fixes-reduce-page-weight/

mickelfeng

mickelfeng

粉丝 237
博文 2802
码字总数 604377
作品 0
成都
高级程序员
私信 提问
HawtIO 1.4.8 发布,应用监控系统

HawtIO 1.4.8 发布,此版本现已提供下载,官方尚无具体说明。 之前版本改进内容如下: HawtIO 1.5 * Hawtio 要求 Java 1.7 及以上 * 当在 WebSphere 运行或者适应 WebSphere 特定证书或者 AP...

oschina
2014/09/01
2.8K
1
C++ Code Editing and Navigation in Visual Studio

C++ Code Editing and Navigation in Visual Studio Visual C++ Team Blog2017-04-2116 阅读 studioNavigationc++ Visual Studio comes packed with a set of productivity tools to make it......

Visual C++ Team Blog
2017/04/21
0
0
zengfeng/PullToRefresh_Gradle

将著名开源库PullToReFresh迁移到gradle。使用时候直接引入作为子项目即可 Pull To Refresh Views for Android This project aims to provide a reusable Pull to Refresh widget for Andro......

zengfeng
2016/02/16
0
0
Mozilla Firefox 68 Beta 7 (Quantum) 发布

Mozilla Firefox 68 Beta 7 (Quantum) 已发布,新版带来了扩展的安全升级,面向 AMD 显卡的 Windows 10 桌面上也开始默认启用 WebRender。 新版还启用了预加载中间 TLS 证书的功能,这可以避...

局长
06/05
1K
3
最棒的 30 个免费的 Bootstrap 模板

大过节的,介绍内容我就不翻译了,有图有真相就够了,亲们,你们说对吗?千万别喷我,要不 @红薯 那家伙又该骂我偷懒了! 1. Blocks Blocks is a light-weight, admin dashboard template i...

小编辑
2014/05/31
250.1K
18

没有更多内容

加载失败,请刷新页面

加载更多

带你了解 Java内存模型

Java内存模型的规定: 1、所有变量存储在主内存中; 2、每个线程都有自己的工作内存,且对变量的操作都是在工作内存中进行; 3、不同线程之间无法直接访问彼此工作内存中的变量,要想访问只能...

linux-tao
14分钟前
3
0
.net c# datetime转string 时间转字符串

.net c# datetime转string 时间转字符串 .net c# datetime转string 时间转字符串 刚开始接触net 时间转换字符串 一搜索出来的全是 字符串转时间,要么就是系统当前时间转字符串 就没有一个指...

青峰Jun19er
15分钟前
3
0
hbase demo

HbaseDao public class HbaseDao {@Testpublic void insertTest() throws Exception {Configuration conf = HBaseConfiguration.create();conf.set("hbase.zookeeper.qu......

Garphy
25分钟前
2
0
IT兄弟连 HTML5教程 HTML5表单 多样的输入类型2

4 range range类型用于包含一定范围内数字值的输入域,跟number一样,我们还可以对数值设置限定,range类型显示为滑动条用法如下: 上述代码使用了range类型输入框,为该类型设置了数值范围为...

老码农的一亩三分地
25分钟前
2
0
对比不同的数据库连接的异同

博主在学习和使用数据库连接时,遇到的问题, 这个几个数据库连接究竟有什么不同? 到底什么时候该使用哪个会更好一点? 带着这个问题我们先去了解常见的数据库连接 1. 常见的数据库连接有哪些?...

理性思考
27分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部