Web性能优化分为服务器端和浏览器端两个方面。

一、浏览器端，关于浏览器端优化，分很多个方面
1、压缩源码和图片
JavaScript文件源代码可以采用混淆压缩的方式，CSS文件源代码进行普通压缩，JPG图片可以根据具体质量来压缩为50%到70%，PNG可以使用一些开源压缩软件来压缩，比如24色变成8色、去掉一些PNG格式信息等。

2、选择合适的图片格式
如果图片颜色数较多就使用JPG格式，如果图片颜色数较少就使用PNG格式，如果能够通过服务器端判断浏览器支持WebP，那么就使用WebP格式和SVG格式。

3、合并静态资源
包括CSS、JavaScript和小图片，减少HTTP请求。有很大一部分用户访问会因为这一条而取得最大受益

4、开启服务器端的Gzip压缩
这对文本资源非常有效，对图片资源则没那么大的压缩比率。

5、使用CDN
或者一些公开库使用第三方提供的静态资源地址（比如jQuery、normalize.css）。一方面增加并发下载量，另一方面能够和其他网站共享缓存。

6、延长静态资源缓存时间
这样，频繁访问网站的访客就能够更快地访问。不过，这里要通过修改文件名的方式，确保在资源更新的时候，用户会拉取到最新的内容。

7、把CSS放在页面头部，把JavaScript放在页面底部
这样就不会阻塞页面渲染，让页面出现长时间的空白。

另，其他具体详解：
1、Web 前端优化最佳实践之 内容篇
2、Web 前端优化最佳实践之 Server 篇
3、Web 前端优化最佳实践之 Cookie 篇
4、Web 前端优化最佳实践之 CSS 篇
5、Web 前端优化最佳实践之 JavaScript 篇
6、Web 前端优化最佳实践之 图象篇
7、Web 前端优化最佳实践之 Mobile(iPhone) 篇

二、服务器端优化
这里就不详解了，直接看专栏吧Web项目开发性能优化解决方案——服务端

ps:这篇博文是从论坛中拷贝的，真心推荐此博文，特别是服务端优化部分，顶！

170612、web如何项目优化的更多相关文章

  1. 小型 Web 页项目打包优化方案

    背景   目前团队中新的 Web 项目基本都采用了 Vue 或 React ,加上 RN,这些都属于比较重量级的框架,然而对于小型 Web 页面,又显得过大.早期的一些项目则使用了较原始的 HTML ...

  2. 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化

    github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...

  3. Web前端性能优化的9大问题

    1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...

  4. 项目优化经验分享（八）TeamLeader经验总结

    引言 通过前面的七篇博客.我把自己在项目优化过程的经验进行了分享,今天这篇博客,作为一个总结,就来讲讲作为一个TeamLeader,在项目管理中遇到的问题和解决经验! 正文 问题一:团队之间怎么沟通? ...

  5. web页面的优化

    众所周知,一个web页面通常会包括HTML(XHTML.XML).CSS.Javascript,而其中HTML(XHTML.XML)为结构化语言,用于构建页面结构和相关数据:CSS则负责页面的样式,即 ...

  6. 深入浅出聊Unity3D项目优化：从Draw Calls到GC

    前言: 刚开始写这篇文章的时候选了一个很土的题目...<Unity3D优化全解析>.因为这是一篇临时起意才写的文章,而且陈述的都是既有的事实,因而给自己“文(dou)学(bi)”加工留下的 ...

  7. Unity3D项目优化(转)

    前言: 刚开始写这篇文章的时候选了一个很土的题目...<Unity3D优化全解析>.因为这是一篇临时起意才写的文章,而且陈述的都是既有的事实,因而给自己“文(dou)学(bi)”加工留下的 ...

  8. 隔壁老主精讲web页面性能优化。

    首先说一下为什么要进行web页面性能优化,在同样的网络环境下,两个同样能满足你的需求的网站,一个“Biu”的一下就加载出来了,一个卡--卡--卡--卡--卡--才出来,你会选择哪个?研究表明:用户最满 ...

  9. Web 前端性能优化相关内容解析

    Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...

随机推荐

  1. selenium测试（Java）--执行JS（十八）

    1.  操作滚动条 package com.test.js; import org.openqa.selenium.By; import org.openqa.selenium.Dimension; ...

  2. e554. 在浏览器状态栏中显示信息

    // See also e551 精简的Applet applet.showStatus("Your Message Here"); Related Examples

  3. 【转】StackOverflow程序员推荐：每个程序员都应读的30本书

    “如果能时光倒流,回到过去,作为一个开发人员,你可以告诉自己在职业生涯初期应该读一本,你会选择哪本书呢?我希望这个书单列表内容丰富,可以涵盖很多东西.” 很多程序员响应,他们在推荐时也写下自己的评语. ...

  4. CentOS安装emacs24.2命令

    CentOS安装emacs24.2命令 #1.安装如下软件 yum -y groupinstall "Development Tools" yum -y install gtk+- ...

  5. php中ignore_user_abort函数的用法(定时)

    PHP中的ignore_user_abort函数是当用户关掉终端后脚本不停止仍然在执行,可以用它来实现计划任务与持续进程,下面会通过实例讨论ignore_user_abort()函数的作用与用法. i ...

  6. redis windows 版配置使用

    网上下载windows版的redis 在D盘新建redis目录 把下载的redis压缩包解压到redis目录,如图: 打开配置文件 redis.windows.conf 把 SECURITY下的req ...

  7. 【C++基础 05】友元函数和友元类

    友元是一种定义在类外部的普通函数或类,但它须要在类体内进行说明,为了与该类的成员函数加以差别,在说明时前面加以keywordfriend. 友元不是成员函数,可是它能够訪问类中的私有成员. 友元的作用 ...

  8. link with editor

    在左侧explore上,有个双向的箭头,点一下,就会把路径和当前文件自动对应

  9. delphi7中添加QuickRep

    具体的方法是: delphi主菜单的Project|Options命令, 在Package选项卡的Desing packages列表中如果可以看到QuickReport Components选项, 那 ...

  10. (转)Linux开启mysql远程连接的设置步骤

    Mysql默认root用户只能本地访问,不能远程连接管理mysql数据库,Linux如何开启mysql远程连接?设置步骤如下: 1.GRANT命令创建远程连接mysql授权用户itlogger mys ...