动态页面抓取超级指南_减少页面重量的完整指南

动态页面抓取超级指南

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.

2013年 ， 页面总重量增加了32％，达到可笑的1.7Mb和96个单独的HTTP请求。 这是一个平均数字； 所有网站的一半将更大。 网站肥胖症已成为一种流行病，我们的网站开发人员应对此负责。 没有任何借口。

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.

   下载越大，体验越慢。 并非每个人都有20Mb的连接，在铜基础设施老化的发达西方国家尤其如此。 您的网站的好坏并不重要： 用户不会等待 。

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?

   移动Web访问已Swift增加 ，达到了几乎四分之一的用户。 在典型的3G连接上，需要1.7MB的页面才能显示几乎一分钟。 当您的站点无法在这些设备上有效工作时，采用响应式Web设计技术是否有意义？

3. Google’s page speed algorithms will downgrade your site and harm Search Engine Optimization efforts.
   Google的页面速度算法会降级您的网站并损害搜索引擎优化的工作。
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. Later on I’ll move on to more advanced techniques, then outline some tools to help you measure your success.

我预计今年的页面重量将下降 -我希望不要被证明是错误的。 幸运的是，有许多快速修复程序将对站点性能产生即时影响。 所有这些技术都是众所周知的，使用当今的技术，不需要花费大量时间，并且可以在现有代码库上实现，而无需重新开发。 稍后，我将继续介绍更高级的技术，然后概述一些工具来帮助您评估成功。

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

前三个实际上并没有使您的网站变瘦，而是将其放在紧身胸衣和讨人喜欢的衣服中……

1.激活GZIP压缩 (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.

根据W3Techs.com ，几乎所有网站中的一半都未启用压缩功能。 这通常是服务器设置， 应该由您的Web主机启用，尽管可以自行配置。

2.鼓励浏览器缓存 (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 header, Last-Modified date or adopting ETags in the HTTP header.

如果浏览器可以轻松地缓存文件，则不一定需要再次下载它。 简单的解决方案包括设置适当的Expires标头 ， Last-Modified日期或在HTTP标头中采用ETag 。

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:

您可能可以将服务器配置为自动处理，例如，这是一个Apache .htaccess设置，用于将所有图像缓存一个月：

<IfModule mod_expires.c>
ExpiresActive On

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

</IfModule>

3.使用内容传送网络(CDN) (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.)

浏览器为每个域设置了四个到八个同时HTTP请求的限制。 如果您的页面从您的域中加载了96个资产，那么最多将需要十二套并发请求才能全部出现。 (实际上，文件大小有所不同，因此不会完全一样，但是限制仍然适用。)

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.

从另一个域请求静态文件实际上使浏览器可以发出的HTTP请求数量增加了一倍。 此外，由于该文件已在其他位置的其他站点上使用，因此用户更有可能预先缓存该文件。 简单的选项是JavaScript库，例如jQuery和字体存储库，但您也可以考虑使用专用的图像托管。

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

前三个选项有助于提高页面速度，但在主动减少页面权重之前，我们需要检查您的代码…

4.删除未使用的资产 (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, JSLint, Dust-Me Selectors, CSS Usage, unused-css.com or build tools such as grunt-uncss.

网站不断发展。 如果您不再使用小部件，则可以删除关联CSS和JavaScript。 如果它们包含在单独的文件中，那很简单。 如果没有，您可能需要使用诸如Chrome的Audit Developer Tool， JSLint ， Dust-Me Selectors ， CSS Usage ， unused-css.com之类的工具，或使用诸如grunt-uncss之类的构建工具。

5.连接并缩小CSS (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.

理想情况下，您需要一个CSS文件(尽管如果您使用RWD支持IE的旧版本，则可能需要两个CSS文件)。 虽然构建和维护单独CSS文件可能是明智的，但是在将其托管在生产服务器上之前，应将它们加入并删除不必要的空格。

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

Sass ， LESS和Stylus等预处理器可以为您完成艰苦的工作。 包括Grunt.js或Gulp在内的构建工具可以使您的工作流程自动化，或者，如果您希望使用GUI，则Koala提供了免费的跨平台应用程序 。

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:

如果这听起来太费力，则可以在文本编辑器中或从命令行(例如，在Windows中)手动串联文件：

copy file1.css+file2.css file.css

or Mac/Linux:

或Mac / Linux：

cat file1.css file2.css > file.css

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

生成的文件可以通过在线CSS缩小器(如cssminifier.com ， CSS Compressor＆Minifier或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.

最后，请记住将所有CSS加载到head以便浏览器知道如何设置后续HTML的样式，而无需再次重新绘制页面。

6.连接并缩小JavaScript (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 Compressor, Closure Compiler or, my personal favorite, The JavaScript CompressorRater which passes your code to multiple engines so you can choose the best.

平均页面加载18个单独的脚本文件。 尽管将jQuery之类的库作为单独的文件保留是可行的，但应在生产服务器上串联并缩小您自己JavaScript代码。 同样，构建工具可以提供帮助，或者您可以使用在线工具，例如YUI Compressor ， Closure Compiler或我个人最喜欢JavaScript CompressorRater ，它将代码传递给多个引擎，以便您选择最佳工具。

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.

不可否认，您需要稍加小心，因为如果您的代码不正确(甚至缺少分号)，JavaScript压缩器可能会失败。 但是，简单地串联文件可以提高性能，因为发出的HTTP请求更少。

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.

最后，最好在结束HTML body标记之前加载JavaScript。 这样可以确保脚本不会阻止其他内容的加载，并且在下载和执行脚本之前可读页面内容。

7.使用正确的图像格式 (7. Use the correct image format)

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

使用错误的图像格式可能会放大您的页面。 一般来说：

1. use JPG for photographs
   使用JPG拍摄照片
2. use PNG for everything else.
   使用PNG进行其他操作。

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.

当您使用色彩设置有限的小型图形时，GIF可能会压缩得更好-尽管这种情况很少见。 一些图像也更适合作为矢量，但是我们将在以后的文章中进行讨论。

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:

您将需要一个不错的图形包来转换图像，但是有很多可用的免费选项，例如XnView等使您可以批处理文件。 请记住使用以下设置：

• 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.
  JPG是一种有损格式，质量在0(较差，较小的文件)到100(最佳，较大的文件)之间。 大多数图像看起来都不错，介于30到70之间，但请尝试找出最低的可接受值。
• 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.
  PNG有256种和24位颜色可供选择。 如果您不需要透明度并且可以限制调色板，则256色版本可能会压缩得更好。

8.调整大图的大小 (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.

带有3百万像素摄像头的入门级智能手机将产生太大的图像，无法在网页上显示。 不幸的是，内容编辑者将直接从相机上传图像。 建议稍加教育和自动调整大小的系统。

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.

图片尺寸不得超过其容器的最大尺寸。 如果模板的最大空间为800个水平像素，则图像将不需要更大的宽度。 也就是说，那些使用高密度/视网膜显示器的人可能会欣赏到1,600像素宽度的两倍图像，但是仍然比典型的相机输出要小。

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.

调整图像大小会严重影响页面重量。 将图像尺寸缩小50％将使总面积减少75％，并应大大减小文件大小。

9.进一步压缩图像 (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 OptiPNG, PNGOUT, 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.

即使您已切换为正确的格式并调整了尺寸大小，也可以使用分析和优化图形的工具来进一步缩小图像文件。 其中包括OptiPNG ， PNGOUT ， jpegtran和jpegoptim 。 大多数可以作为独立的可执行文件安装，也可以集成到您的构建过程中。 另外，诸如Smush.it之类的在线工具也可以在云中完成工作。

10.删除不必要的字体 (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?

Web字体彻底改变了设计，并减少了对基于图形的文本的需求。 但是，自定义字体会带来一定的成本，并且可能会增加数百千字节的页面大小。 如果您使用的字体超过两种或三种，则可能是过度使用。 您的客户/老板可能喜欢可怕的手写字体，但是，如果仅将其用于一个标题，是否值得下载200KB的字体文件？

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.

我怀疑许多网站在非开发人员的努力下，可以将其重量减轻30-50％。 对于普通站点，这可以节省超过800Kb的速度，并且速度会明显加快。

您的网站仍然超重吗？ 一些更严格的解决方案 (Is your site still overweight? Some tougher solutions)

But if your pages are still obese after following those steps, there are more drastic dieting options you can contemplate.

但是，如果按照这些步骤操作后您的页面仍然肥胖 ，则可以考虑使用更多节食方法。

1.删​​除社交网络按钮 (1. Remove social network buttons)

Do you have Facebook, Twitter, Google+ and LinkedIn sharing buttons on your pages? That’s 580Kb of content you’re serving to frustrated end users. Much of it is JavaScript that must be executed by the browser and some networks stipulate it must be loaded before your content appears.

您的页面上是否有Facebook，Twitter，Google +和LinkedIn共享按钮？ 您要为沮丧的最终用户提供580Kb的内容 。 大多数JavaScript必须由浏览器执行，并且某些网络规定必须在内容显示之前加载它。

Bloated social widgets are completely unnecessary — you can add fat-free social buttons to your pages with a few lines of HTML. A little JavaScript can progressively enhance the experience and show a pop-up window on desktop devices.

完全不需要膨胀的社交小部件-您可以使用几行HTML 将无脂肪的社交按钮添加到您的页面 。 少量JavaScript可以逐步增强体验，并在桌面设备上显示一个弹出窗口。

While simple buttons won’t show click statistics, you can discover far more information with event tracking in Google Analytics.

尽管简单的按钮不会显示点击统计信息，但您可以通过Google Analytics(分析)中的事件跟踪来发现更多信息。

2.检查所有第三方小部件 (2. Check all third-party widgets)

Social networks aren’t the only culprits. Adding third-party widgets to your page has a hidden cost that significantly exceeds the included markup. Even if the content is loaded from another domain, it may contain hundreds of kilobytes of data, JavaScript, CSS, and images.

社交网络并不是唯一的罪魁祸首。 向页面添加第三方窗口小部件的隐藏成本大大超过了所包含的标记。 即使内容是从另一个域加载的，它也可能包含数百千字节的数据，JavaScript，CSS和图像。

If you must use a widget, consider one that is better written. Ideally, the widget JavaScript should be lightweight, loaded at the end of the page but able to place content in a specified HTML container. Alternatively…

如果必须使用小部件，请考虑编写更好的小部件。 理想情况下，小部件JavaScript应该是轻量级的，应该在页面末尾加载，但是能够将内容放置在指定HTML容器中。 或者...

3.考虑延迟加载-或点播内容 (3. Consider lazyloading — or on-demand content)

Presume you’re showing a video hosted by a specialist provider. While the video is downloaded only when the user hits “play”, you are probably loading video API code and other related resources regardless of whether the user plays the video or not. Why not load all that content when the user requests it?

假设您正在显示由专业提供商托管的视频。 尽管仅当用户单击“播放”时才下载视频，但是无论用户是否播放视频，您都可能正在加载视频API代码和其他相关资源。 为什么在用户请求时不加载所有内容？

You can also consider on-demand images and content that download as the user scrolls the page. I’m not a fan of the technique; it can potentially have a negative impact on usability or SEO. However, it is useful for some types of web applications–for example image galleries.

您还可以考虑在用户滚动页面时下载的点播图像和内容。 我不喜欢这项技术。 它可能会对可用性或SEO产生负面影响。 但是，它对于某些类型的Web应用程序(例如图像库)很有用。

4.用CSS3效果替换图像 (4. Replace images with CSS3 effects)

Are you slicing images to create gradients, rounded borders and shadows? I hope not — CSS3 makes such techniques redundant.

您是否在对图像进行切片以创建渐变，圆形边框和阴影？ 我希望不会-CSS3使此类技术变得多余。

The effects won’t work in IE8 and below but oldIEs are dying and users won’t be aware because they won’t compare your site in multiple browsers. You can add clever shims such as CSS3 PIE but I wouldn’t recommend it: they can bulk up your page and make the older browsers slow to a crawl.

这种效果在IE8及以下版本中将不起作用，但是旧的IE快要消失了，用户也不会意识到，因为他们不会在多个浏览器中比较您的网站。 您可以添加巧妙的垫片，例如CSS3 PIE，但我不建议这样做：它们会使您的页面变大，并使较旧的浏览器缓慢爬行。

CSS3 effects generally degrade gracefully so it’s rare you need worry about older browsers. Pixel perfection has always been futile and is utterly ridiculous when you’re building responsive designs that adapt to different screen sizes.

CSS3效果通常会正常降低，因此很少需要担心较旧的浏览器。 像素完美始终是徒劳的，在构建适应不同屏幕尺寸的自适应设计时，这简直是荒谬的。

A note of caution though: CSS shadows and gradients have been shown to be costly during browser repaints, especially if you’re displaying dozens of elements with these features added. So use the effects sparingly and test scrolling performance and repaints before committing to overusing these effects to replace images.

但请注意：在浏览器重绘期间，CSS阴影和渐变显示代价昂贵，尤其是当您显示添加了这些功能的数十个元素时。 因此，在致力于过度使用这些效果来替换图像之前，请谨慎使用这些效果并测试滚动性能和重新绘制 。

5.用CSS3效果和动画替换JavaScript (5. Replace JavaScript with CSS3 effects and animations)

Is your JavaScript littered with $("#x").fade() and $("#y").slideDown() effects? That may have been necessary a few years ago but CSS3 animations, transitions and transformations have to a large degree superseded JavaScript effects. The reasons:

您JavaScript是否充满$("#x").fade()和$("#y").slideDown()效果？ 几年前这可能是必须的，但是CSS3 动画 ， 过渡和转换在很大程度上已取代了JavaScript效果。 原因：

1. CSS3 animation is natively handled by the browser; if it’s done right, it will often be much faster and smoother than JavaScript execution.
   CSS3动画由浏览器本地处理； 如果操作正确，它通常会比JavaScript执行更快，更流畅。
2. CSS3 animation is easier to write and requires significantly less code.
   CSS3动画更易于编写，并且所需的代码少得多。
3. CSS3 offers 3D transformations which are extremely difficult — if not impossible — in JavaScript alone without a specialized library.
   CSS3提供3D转换，如果没有专门的库，仅在JavaScript中就很难(即使不是不可能)。

There are situations when you want fine-grained JavaScript control but they are rare exceptions. Again, effects won’t work in old browsers but should degrade gracefully.

在某些情况下，您需要细粒度JavaScript控制，但它们是罕见的例外。 同样，效果在旧的浏览器中将不起作用，但应适当降低。

6.考虑可伸缩矢量图形(SVG) (6. Consider Scalable Vector Graphics (SVGs))

SVGs contain points, lines, and shapes defined as vectors in XML. SVGs are ideal for responsive designs since they will scale to any size without loss of quality and the file size is often smaller than a bitmap.

SVG包含在XML中定义为矢量的点，线和形状。 SVG非常适合于响应式设计，因为它们可以缩放到任意大小而不会降低质量，并且文件大小通常小于位图。

SVGs aren’t suitable in all situations. Photographs and complex images will always be better as a JPG or PNG. However, logos, diagrams, and charts are usually appropriate. What’s more, SVGs can be manipulated on the client using CSS and JavaScript.

SVG并非在所有情况下都适用。 照片和复杂图像将始终以JPG或PNG更好。 但是，徽标，图表和图表通常是合适的。 此外，可以使用CSS和JavaScript在客户端上操纵SVG。

There are tools that convert bitmaps to vector format, but starting from scratch will yield the best results. Packages such as Illustrator, Inkscape, and SVG edit provide a good start, although learning XML basics will help you produce cleaner code.

有一些工具可以将位图转换为矢量格式，但是从头开始会产生最佳效果。 Illustrator， Inkscape和SVG edit之类的程序包提供了一个良好的开始，尽管学习XML基础知识将帮助您生成更简洁的代码。

7.用图标字体替换图像 (7. Replace images with icon fonts)

You may have dozens of small icons in use throughout your site and managing individual image files isn’t fun. Fortunately, icon fonts can save space and sanity. A single font can contain hundreds of vector-based images which can be set to any color and scaled to any size in all browsers (going back to IE6).

您可能在整个站点中使用了数十个小图标，并且管理单个图像文件并不好玩。 幸运的是， 图标字体可以节省空间和理智。 单个字体可以包含数百个基于矢量的图像，可以在所有浏览器中将其设置为任何颜色并缩放为任意大小(返回IE6)。

You can use a dedicated font or, for optimal bandwidth-saving, use a tool such as Fontello, IcoMoon or Flaticon to create a font pack containing the icons you need.

您可以使用专用字体，或者为了节省带宽，可以使用Fontello ， IcoMoon或Flaticon之类的工具来创建包含所需图标的字体包。

8.使用图像精灵 (8. Use image sprites)

Bitmap images should be the last choice once CSS3, SVG and icon font options have been rejected. Often-used bitmaps can be packaged into a single sprite file so individual images can be accessed in CSS, e.g.

一旦CSS3，SVG和图标字体选项被拒绝，位图图像应该是最后的选择。 经常使用的位图可以打包到一个精灵文件中，因此可以在CSS中访问单个图像，例如

.sprite {
	width: 16px;
	height: 16px;
	background: url("sprite.png") 0 0 no-repeat;
}

.sprite.help { background-position: 0 -16px; }
.sprite.info { background-position: 0 -32px; }
.sprite.user { background-position: 0 -48px; }

The advantages:

优点：

1. You require a single HTTP request to load the sprite.
   您只需要一个HTTP请求即可加载该图片。
2. A single sprite will normally result in a smaller overall file size than the total weight of the individual images.
   单个精灵通常会导致整体文件大小小于单个图像的总权重。
3. All images appear when the sprite has loaded.
   加载精灵后，将显示所有图像。

Image sprites can be created in a graphics package or using tools such as Sprite-Cow and Instant Sprite. You can alternatively incorporate sprite production in your Grunt workflow.

可以在图形包中或使用诸如Sprite-Cow和Instant Sprite之类的工具来创建图像精灵。 您也可以将Sprite生产合并到Grunt工作流程中 。

9.使用数据URI (9. Use data URIs)

Data URIs encode binary and text assets as if they were external resources. Bitmap images and SVGs can be encoded directly in HTML, JavaScript, or — more usefully — CSS:

数据URI对二进制和文本资产进行编码，就好像它们是外部资源一样。 位图图像和SVG可以直接用HTML，JavaScript或(更有用的是)CSS进行编码：

.bullet {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC");
}

This will reduce the number of HTTP requests — although maintenance is more difficult unless you can automate the process in some way. I would only recommend it for small, often-used images that are unlikely to change.

这将减少HTTP请求的数量-尽管除非您以某种方式可以使过程自动化，否则维护会更加困难。 我仅建议将其用于不太可能更改的小型经常使用的图像。

Tools such as DataURL.net and data: URI Generator will convert files to data URIs for you.

诸如DataURL.net和data：URI Generator之类的工具将为您将文件转换为数据URI。

10.使用网站评估工具 (10. Use website assessment tools)

You won’t know whether your diet has been successful unless you’re monitoring your page weight and the resulting download speed improvements. Browser developer consoles and free online tools such as Google Page Speed Insights can help. A comprehensive list is coming in my next article before we discuss more radical, liposuction-like page weight reduction techniques in the last part of this series.

除非您正在监视页面重量以及由此带来的下载速度提高，否则您不会知道饮食是否成功。 浏览器开发人员控制台和免费的在线工具(例如Google Page Speed Insights)可以提供帮助。 在本系列的最后一部分中，我们将讨论更彻底的，类似于吸脂术的页面减重技术之前，将在我的下一篇文章中列出完整的列表。

网站仍然不够精简？ 一些更激烈的解决方案 (Site still not lean enough? Some more drastic solutions)

Webpage diets are tough. You can implement quick fixes. Perhaps you’ve taken tougher action such as optimizing your CSS and JavaScript. But all your great work is thrown out as soon as your boss/client demands yet another shiny new widget, frivolous social networking button or wacky font.

网页饮食很难。 您可以实施快速修复。 也许您已经采取了更严格的措施，例如优化CSS和JavaScript。 但是，只要老板/客户需要另一个闪亮的新小部件，琐碎的社交按钮或古怪的字体，您的所有出色工作就会被扔掉。

Unfortunately, diets often have limited benefits. Drastic lifestyle changes, on the other hand, can ensure your site never becomes obese. Several of the suggestions below are controversial and won’t be for everyone but, at the very least, I hope these make you more aware of page weight issues…

不幸的是，饮食往往没有什么好处。 另一方面，生活方式的急剧变化可以确保您的网站永远不会肥胖。 以下几个建议颇有争议，并非所有人都可以，但是，至少，我希望这些建议能使您更多地了解页面重量问题……

1.永远不要相信第三方代码 (1. Never trust third-party code)

Would you grant an unknown developer unfettered access to your website code? If not, why are you trusting third-party code? It’s easy to add useful widgets to your page and it’s rare they’ll compromise security. That said, always check what resources they’re pulling in. For example, social network buttons can add half a megabyte of content, making your pages slower; can you do without them?

您是否会授予未知开发者不受限制的网站代码访问权限？ 如果不是，您为什么信任第三方代码？ 在页面中添加有用的小部件很容易，而且很少会破坏安全性。 也就是说，请始终检查他们正在使用哪些资源。例如，社交网络按钮可以添加一半兆的内容 ，从而使页面变慢； 没有他们，你能做什么？

2.一个JavaScript库绰绰有余 (2. One JavaScript library is more than enough)

Perhaps you’re using jQuery. That’s fine — stick with it. But don’t then browse the Prototype or YUI plug-in libraries looking for cool widgets and effects.

也许您正在使用jQuery。 很好– 坚持下去 。 但是，请勿浏览Prototype或YUI插件库，以查找酷炫的小部件和效果。

You should also consider more extreme options:

您还应该考虑更多极端的选择：

1. Can you obtain a custom build if you’re not using all features provided in a library?
   如果不使用库中提供的所有功能，是否可以获得自定义版本？

2. Are there lightweight alternatives, such as Zepto.js or Minified.js which provide API-parity with core jQuery methods?

   是否有轻量级的替代方案，例如Zepto.js或Minified.js ，它们使用核心jQuery方法提供API奇偶校验？

3. Is a library required? If it’s primarily being used to smooth over browser inconsistencies, perhaps those issues no longer exist. Are you using a library because it’s familiar and comforting?

   需要图书馆吗？ 如果主要用于消除浏览器不一致，则这些问题可能不再存在。 您是否在使用图书馆是因为它既熟悉又舒适？

3.当心CMS模板 (3. Beware of CMS templates)

Few Content Management Systems generate overweight pages … but then you start adding stuff.

很少有内容管理系统会生成超重页面…… 但是随后您开始添加内容 。

A free or commercial template can make financial sense. Why employ a developer when off-the-shelf code does everything you need for a few dollars? They can be ideal for simple brochure sites, but there’s a hidden cost. Generic templates must sell hundreds, if not thousands of copies to recoup the development effort. To attract buyers, developers bundle every feature they can; you may only use a fraction of them but they still exist in page code.

免费的或商业的模板可能具有财务意义。 当现成的代码需要花费几美元的钱时，为什么还要雇用开发人员呢？ 它们对于简单的宣传册站点可能是理想的选择，但存在隐性成本。 通用模板必须出售数百甚至数千个副本，以弥补开发工作。 为了吸引买家，开发人员捆绑了他们可以使用的所有功能。 您只能使用其中的一小部分，但它们仍存在于页面代码中。

Perhaps I’ve been unlucky, but the WordPress themes I’ve experienced often weigh in at more than 2Mb. I’m sure there are lightweight options, but finding one is another matter.

也许我不太走运，但是我经历过的WordPress主题通常会超过2Mb。 我敢肯定有轻量级的选择，但是找到一个是另一回事。

4.减少框架脂肪 (4. Cut the framework fat)

Boilerplate frameworks such as Bootstrap and Foundation are useful for prototyping or as a starting point for a new project. Unfortunately, like generic templates, they come with CSS, JavaScript and other resources you’ll never need. The HTML also tends to be fairly verbose and littered with unsemantic class names.

样板框架(例如Bootstrap和Foundation)可用于原型设计或作为新项目的起点。 不幸的是，像通用模板一样，它们带有CSS，JavaScript和其他您不需要的资源。 HTML也往往很冗长，并散布着非语义的类名。

Personally, I prefer the lego-like modular approach in web development (that’s classic lego blocks rather than the packs that limit you to building one specific thing). You start with nothing and add required components. Frameworks are more like sculpturing in marble; you chip away at the parts you don’t need until the site’s complete. That’s what should happen — but it’s easier to leave stuff in.

就个人而言，我更喜欢在Web开发中使用类似于lego的模块化方法(这是经典的lego块，而不是限制您构建特定事物的包) 。 您一无所有，然后添加必需的组件。 框架更像是在大理石上雕刻； 您可以清理掉不需要的部分，直到站点完成为止。 那就是应该发生的事情-但是将东西留在里面更容易。

I won’t say “don’t use frameworks”, but be aware of the additional bulk they carry. A tool such as grunt-uncss can help remove unnecessary code but never adding the framework code in the first place may be preferable.

我不会说“不要使用框架” ，但要注意它们带来的额外数量。 诸如grunt-uncss之类的工具可以帮助删除不必要的代码，但最好不要首先添加框架代码。

5.拥抱渐进增强 (5. Embrace progressive enhancement)

The term progressive enhancement has fallen from favor, but that’s essentially what you’re doing in a mobile-first responsive website. In essence, you’re creating a basic usable experience with enhancements as the browser supports or requires it. A simple example: you can reference a large image in CSS when a desktop screen media query is triggered — most modern mobile browsers will not request the file. You may be able to enhance this further using conditional JavaScript loaders and the Network API.

渐进增强一词已不受欢迎，但这实际上是您在移动优先响应型网站中所做的事情。 本质上，您将通过浏览器支持或要求的功能来创建基本的可用体验，并进行增强。 一个简单的例子：触发桌面屏幕媒体查询时，您可以在CSS中引用大图像-大多数现代的移动浏览器都不会请求该文件。 您可以使用条件JavaScript加载程序和Network API进一步增强此功能 。

Progressive enhancement rarely incurs significant additional effort; it’s a development approach rather than a technology.

渐进增强很少需要付出额外的努力； 这是一种开发方法，而不是技术。

6.采用构建过程 (6. Adopt a build process)

You should ensure you’ve done everything to reduce image, CSS and JavaScript files prior to deployment. This can be a manual process but automation tools like Grunt.js and Gulp.js can make it reasonably painless.

您应确保在部署之前已完成减少图像，CSS和JavaScript文件的所有操作。 这可以是一个手动过程，但是诸如Grunt.js和Gulp.js之类的自动化工具可以使其轻松 自如 。

7.知道你的密码 (7. Know thy code)

CSS and JavaScript preprocessors such as Sass, LESS, Stylus, CoffeeScript, TypeScript and Dart may have revolutionized your productivity and workflow. However, the source is abstracted from the final generated code. Preprocessor output is only as good as the input and it’s possible to programmatically add thousands of superfluous lines unintentionally. Therefore, always check to ensure the output is efficient.

CSS和JavaScript预处理程序(例如Sass，LESS，Stylus，CoffeeScript，TypeScript和Dart)可能彻底改变了您的生产力和工作流程。 但是，源是从最终生成的代码中抽象出来的。 预处理器的输出仅与输入的一样好，并且可以以编程方式无意中添加数千条多余的行。 因此，请务必检查以确保输出有效。

8.考虑离线AppCache (8. Consider the offline AppCache)

Web applications have the ability to work offline using the the HTML AppCache. It’s possible to use the AppCache to supplement or enhance browser caching of regularly-used assets.

Web应用程序可以使用HTML AppCache脱机工作。 可以使用AppCache来补充或增强浏览器对常规使用资产的缓存。

9.简化您的网站 (9. Simplify your site)

During the past few years, web sites and applications have eschewed complexity to provide a streamlined, customer-focused experience. But not everyone got that memo and, admittedly, simplification can be tougher than it sounds. Many clients are wannabe software designers and add frivolous features because they:

在过去的几年中，网站和应用程序避开了复杂性，以提供简化的，以客户为中心的体验。 但是并不是每个人都得到了这份备忘录，诚然，简化可能比听起来更困难。 许多客户想成为软件设计师，并添加了琐碎的功能，因为它们：

1. mistakenly think more functionality attracts more customers,
   误以为更多的功能吸引了更多的客户，
2. consider they’re getting better value for money from their developer, and
   认为他们从开发商那里获得了更高的性价比，并且
3. they don’t know any better.
   他们没有更好的了解。

Fortunately, a little user testing can help you identify never-used options which can be ripped out of the product or replaced with sleeker, lightweight alternatives.

幸运的是，稍作用户测试就可以帮助您确定从未使用过的选件，这些选件可以从产品中剔除或替换为更轻巧的替代品。

10.改变您的发展生活方式 (10. Change your development lifestyle)

Who’s to blame for the average webpage reaching 1.7Mb? Developers. It doesn’t matter how or why a website became obese; a developer let it happen.

谁应该为平均网页达到1.7Mb负责？ 开发人员。 一个网站如何肥胖或肥胖为何都无关紧要。 开发人员让它实现。

Of course, development speed and cost-cutting is important — but not if the result is a slow, clunky product that’s never used. Your client/boss may not understand the technical issues but, if you don’t highlight potential pitfalls in layman’s terms, you’ll never become a conscientious coder earning the respect and rewards you deserve.

当然，开发速度和削减成本很重要-但是如果结果是一个缓慢，笨拙的产品从未使用过，那么就不重要了。 您的客户/老板可能不了解技术问题，但是，如果您不以外行人的眼光突出潜在的陷阱，您将永远不会成为尽职尽责的编码人员，赢得应有的尊重和回报。

Lightweight pages are a direct result of efficient coding practices and should be an important consideration for any project. Unfortunately, accomplishing this is often pushed into the “do it later” bin along with content, SEO, and usability testing. My suggestions:

轻巧的页面是高效编码实践的直接结果，并且应该成为任何项目的重要考虑因素。 不幸的是，完成此操作通常会与内容，SEO和可用性测试一起推入“稍后执行”操作。 我的建议：

1. It’s easy to forget bandwidth issues when you’re sitting on a fast 50Mbps connection. Limit connectivity or try loading your site in an area with poor 3G reception or on a busy hotel wifi network. Your frustration could be experienced by thousands of users every day.
   当您使用50Mbps快速连接时，很容易忘记带宽问题。 限制连接或尝试在3G接收效果较差的区域或繁忙的酒店wifi网络上加载您的站点。 每天成千上万的用户可能会遇到您的挫败感。
2. Consider page weight in every project and question every asset added to the page. Is that font necessary? Can you reduce background image dimensions? Could CSS3 animations replace that JavaScript library? etc.
   考虑每个项目中的页面权重，并质疑添加到页面中的每个资产。 该字体是必须的吗？ 您可以缩小背景图片尺寸吗？ CSS3动画可以代替该JavaScript库吗？ 等等
3. Change your attitude. Webpage obesity is an epidemic but it’s evident few developers care. Creating slimline pages is a valuable skill that will help you stand out from the crowd.
   改变你的态度。 网页肥胖是一种流行病，但显然很少有开发人员关心。 创建超薄页面是一项宝贵的技能，可帮助您脱颖而出。

帮助您衡量成功的工具 (Tools to help you measure your success)

Unless you continually monitor page weight, you won’t know how your diet is progressing. The average page now exceeds 1.7Mb and increased by 32% in 2013 alone. If your developers are secretly gorging themselves on fattening widgets, any of the following assessment tools will highlight their gluttony. They’re all free and take a few seconds to run — what are you weighting for…

除非您持续监控页面重量，否则您将不会知道饮食的进展情况。 现在 ，平均网页已超过1.7Mb，仅2013年一年就增加了32％ 。 如果您的开发人员正在暗中研究增肥的小部件，则以下任何评估工具都将突显其贪吃性。 它们都是免费的，只需几秒钟即可运行-您权衡的是…

1. ing

(1. Pingdom )

Pingdom is one of my favorite online tools. It reveals everything you could possibly need to know: page weight, download speed, code analysis, performance grades, development suggestions and even a historical timeline to record your dieting progress. If you only use one analysis tool, Pingdom should be it.

Pingdom是我最喜欢的在线工具之一。 它揭示了您可能需要了解的所有信息：页面权重，下载速度，代码分析，性能等级，开发建议，甚至是记录饮食进度的历史时间表。 如果仅使用一种分析工具，则应使用Pingdom。

2. Firefox Web Developer附加组件

(2. Firefox Web Developer Add-on )

Chris Pederick’s Web Developer toolbar has been around since the dawn of creation (of Firefox). To use it to view both the compressed and uncompressed page size, select View Document Size from the Information menu.

克里斯·佩德瑞克(Chris Pederick)的Web开发人员工具栏自创建之初就诞生了(Firefox)。 若要使用它查看压缩和未压缩的页面大小，请从“ 信息”菜单中选择“ 查看文档大小 ”。

Note that Web Developer is available as a Chrome extension but, unfortunately, doesn’t have this feature.

请注意，Web Developer可作为Chrome扩展程序使用，但不幸的是，没有此功能。

3. GTmetrix

(3. GTmetrix )

GTmetrix shows an aggregated report generated from Google’s PageSpeed Insights and YSlow as well as additional information such as the total page size and number of requests. The online tool is better than both systems, although you can still use them separately.

GTmetrix显示从Google的PageSpeed Insights和YSlow生成的汇总报告，以及其他信息，例如页面总大小和请求数。 尽管您仍然可以单独使用它们，但在线工具比两个系统都好。

4. Google PageSpeed见解

(4. Google PageSpeed Insights )

PageSpeed Insights doesn’t show total page weight or download speed statistics but it does indicate where you can make improvements for both desktop and mobile devices. Sites are allocated a score out of 100 so you can quickly evaluate how improvements are progressing.

PageSpeed Insights不会显示总页面重量或下载速度统计信息，但会指出您可以在哪里为台式机和移动设备进行改进。 网站的得分为100分，因此您可以快速评估改进的进度。

5. YSlow

(5. YSlow )

Yahoo’s YSlow is an online tool and plug-in available for most browsers. Like PageSpeed Insights, it evaluates pages and issues a grade between A (you’ve done everything you can) and F (you’re failing dismally) for a range of factors.

雅虎的YSlow是可用于大多数浏览器的在线工具和插件。 像PageSpeed Insights一样，它会评估页面并针对各种因素在A(您已尽力做到)和F(您会失败地失败)之间打分。

6.浏览器开发者控制台

(6. Browser Developer Consoles )

If you don’t want to use anything new, Firebug, Chrome Inspector, Firefox Web Developer and IE Developer tools all offer network analyzers and profilers to help assess the size of your pages. Note they won’t necessarily download cached assets so you may need to use Ctrl+F5 or clear the cache prior to testing.

如果您不想使用任何新功能，则Firebug，Chrome Inspector，Firefox Web Developer和IE Developer工具都可以提供网络分析器和分析器，以帮助您评估页面的大小。 请注意，它们不一定下载缓存的资产，因此您可能需要在测试之前使用Ctrl + F5或清除缓存。

7. PageScoring网站速度测试

(7. PageScoring Website Speed Test )

If you require a quick and easy tool, Website Speed Test does the job. It concentrates on download time but file sizes are also displayed, along with the download time for each individual file which could be handy to isolate problem areas.

如果您需要快速简便的工具，则可以通过“网站速度测试”来完成这项工作。 它着重于下载时间，但还会显示文件大小以及每个单独文件的下载时间，这对于隔离问题区域可能非常方便。

8.上升速度测试

(8. Uptrends Speed Test )

As well as the usual size and download speed tests, the Uptrends tool is unique in that it allows you to test responsiveness from specific geographic locations. The report also highlights which domain each resource is served from to help assess CDN effectiveness.

除了通常的大小和下载速度测试外，Uptrends工具也很独特，它使您可以测试特定地理位置的响应能力。 该报告还重点介绍了每种资源的服务领域，以帮助评估CDN的有效性。

9. Page Speed工具

(9. Page Speed Tool )

Page Speed Tool is well-presented and highlights file sizes, assets, resource groups, and download speeds. Note that the estimated load time appears to be calculated for the HTML source only — not for all files. However, you can get a good estimate of total load time by examining the accompanying waterfall chart that’s generated.

Page Speed Tool呈现得很好，并且突出显示了文件大小，资产，资源组和下载速度。 请注意，估计的加载时间似乎仅针对HTML源计算，而不是针对所有文件计算。 但是，通过检查随附的瀑布图，可以很好地估计总加载时间。

10.网页分析器

(10. Web Page Analyzer )

If you can forgive its age and the dated purple and orange design, Web Page Analyzer provides a range of file size statistics as well as download time estimation for modems going all the way back to 14.4K!

如果您可以原谅它的年龄以及过时的紫色和橙色设计，则Web Page Analyzer可以提供一系列文件大小统计信息以及调制解调器的下载时间估算，这些数据可以一直返回到14.4K！

！ (Phew!)

I hope you found this exhaustive guide useful, and at least a few of the solutions presented helped trim the fat. Best of luck with your new weight-loss regime!

我希望您发现这份详尽的指南有用，并且至少提出的一些解决方案有助于减少脂肪。 全新的减肥方案，祝您好运！

翻译自: https://www.sitepoint.com/complete-guide-reducing-page-weight/

动态页面抓取超级指南