注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

中吴南顾惟一笑

成功法则就是那19个字

 
 
 

日志

 
 

web 性能相关几点  

2016-07-13 10:21:07|  分类: R&D |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
1. Invalid HTML and CSS

Writing HTML and CSS which complies with the W3C standards means that it will be interpreted consistently by modern browsers.

Invalid HTML can slow down page load as the browser has to do unnecessary processing.

Invalid CSS can slow down the rendering time of a page.

Run your HTML through the W3C HTML Validator and CSS through the W3C CSS validator.

Alternatively, you can incorporate HTML validation into your workflow with the Grunt HTML validation package and Stylelint

 

2.Not Leveraging Browser Caching

Caching reduces the load time of web pages for repeat visitors by storing files on a user’s browser. Stored files do not need to be fetched or loaded again for a specified period.

When users first visit a site, resources are fetched over the network and may require multiple trips between the client and server. Caching stores commonly used files, making subsequent site visits faster. To enable browser caching, add the Cache-Control and ETag (entity tag) headers to HTTP response headers. Cache-Control defines how, and the period of time, a response can be cached by the browser and other caches. ETag provides a validation token, used to communicate with the server, to check if a resource needs to be updated. Learn more about leveraging browser caching.

 

3. Non-Optimized Images

Images on a page can be optimized to reduce their file size without impacting the quality.

A large number of websites use images, and images usually account for most of the downloaded data on a page. Optimizing images is one of the easiest ways to increase page performance.

Ways to optimize images:

  • Lossless compression
  • Convert images into web-appropriate file types
  • Remove some of the image data without compromising the quality
  • Reduce the whitespace around images
  • Save images in appropriate dimensions

 

4. Uncompressed CSS and JavaScript

The size of a CSS or JavaScript file can be reduced through minification.

Minification is the process of removing all unnecessary characters from code while maintaining its functionality.

Minifying CSS and JavaScript:

  • Removes whitespace
  • Removes comment
  • Removes unused code
  • Optimizes conditional expressions
  • Shortens variable and function names
  • Obfuscates production code

Minification also reduces network latency (the time it takes for data packets to get from one point to another), leading to faster browser load times.

To minify stylesheets, try CSSNano and csso. CSSNano can be integrated into your workflow as a plugin for postcss.

To minify JavaScript, try UglifyJS2. You can also utilize UglifyJS in your workflow through the Grunt plugin, or Gulp plugins like gulp-uglify or gulp-sourcemaps.

  评论这张
 
阅读(26)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017