网页加速优化简单总结
加速优化常见问题
- 静态资源
- 图片、CSS、JS等
- 代码
- 编码效率、内存泄漏、页面卡死
- 线程
- 阻塞页面渲染的代码,例如 alert
- 服务器
- 带宽小、处理慢等
网站性能优化常见优化的地方
一般做好 网站性能优化 常见的几个优化即可。
图片
- 控制单张图片大小在
200kb
以内(根据服务器带宽可适当调大)- 将图片大小控制在服务器带宽加载速度以内,如 1Mbps=1024Kbps=1024/8KBps=128KB/s
- 非透明背景图片格式均改为
.jpg
.jpg
比.png
小一些
.jpg
图片品质控制在60
左右 (Photoshop - 另存为 web 格式)60
一般是可以保证画质不变的最大优化
- 加载图片方式选择
连续
而不是优化
(Photoshop - 另存为 web 格式)- 连续:(多线程)多行扫描优先显示不清晰的完整图像,逐渐清晰
- 优化:逐行扫描,一点一点显示图像
- 使用 CDN(其他静态资源也推荐开启 CDN)
- 客户端就近获取,加载速度快
开启 GZip 压缩传输模式
开启 GZip 压缩可以极大减少文字内容数据量体积,从而达到更快传输速度的目的。
- 一般用来压缩 HTML、CSS、JS 等文字类文件,
- 图片、音视频类压缩后反而可能更大,通常可以用其他工具进行压缩
- 需要服务端和客户端都支持才可以使用
- 服务端需要配置开启 GZip 压缩
- 客户端支持 GZip 解压,低版本浏览器有的不支持,有的声称支持但是有问题
- CPU负载:该优化耗费服务端 CPU,但节省带宽,需要开发者自己权衡利弊。
减少页面请求数量
大部分网站的响应时间都花在 HTTP 请求,尤其是资源文件请求。
一般浏览器也会限制同域名请求的最大并发数(HTTP1.1/1.0),开启 HTTP 2.0,享受多路复用优势可以解决这个问题。
其他情况,可以通过减少页面中的 HTTP 请求数,极大的提升页面响应速度。
- 图片:雪碧图、图标字体文件、Data URLs
- 合并 JS 和 CSS 文件
- 例如 webpack 打包
- 合理的使用 HTTP 缓存,内容固定、不经常修改的文件,尽量利用缓存
- 需要服务器缓存配置
- 或者使用 CDN 服务,一般都做了缓存配置
CDN(非常重要的优化点)
CDN:内容分发网络(Content delivery network)。
主要就是把需要被分发的内容,分发到世界各地的节点,让每个地区的用户(客户端)都可以在最近的节点获取请求的内容,减少网络传输距离从而达到加速的目的。
建议自己搭建 CDN 服务,或者购买第三方 CDN 服务,免费的 CDN 服务有时不稳定。
拓展阅读
- 移动端广告落地页预加载技术实践 - 张博 字节跳动
网页加速优化简单总结相关推荐
- 在ATS 5.3.0上测试网页加速插件ats_pagespeed
历史回顾 网页加速的原理源远流长,最著名的是yahoo的那个<Yahoo! 网站性能最佳体验的34 条黄金守则>,基于此思想,诞生了两个比较有名的网站优化工具,YSlow和Page Spe ...
- LNMP架构之PHP——MemCache对PHP页面的缓存加速优化
前言 1.什么是MemCache? MemCache是一个自由.源码开放.高性能.分布式的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载. 它通过在内存中缓存数据和对象来减少读取数据库的 ...
- 网页加速系列(五)、 网页加速之进阶上篇
本文原文地址:http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html/dude1201.asp(英文) ...
- MemCache对PHP页面的缓存加速优化
一.MemCache 简介 Memcache 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高了网站访问的速度. ...
- win7加速优化技巧
win7加速优化技巧 转载:http://bbs.pcbeta.com/viewthread-630927-1-1.html 能够使用Windows 7操作系统成为了许多电脑用户的一大喜悦之事,相比之 ...
- 网页 SEO 优化(搜索引擎优化)
网页 SEO 优化 什么是 SEO? 全称:Search English Optimization,搜索引擎优化 利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名.目的是:为网站提供生态式的自我营 ...
- 百度将推MIP 实现移动网页加速
在QCon全球软件技术大会上百度提到了一个新技术--MIP,什么是MIP? MIP (Mobile Instant Pages - 移动网页加速器), 是一套应用于移动网页的开放性技术标准.通过提供M ...
- PHP服务缓存加速优化实战
PHP服务缓存加速优化实战 (1) 操作码介绍及缓存原理: 当客户端请求一个PHP程序的时候,服务器的 PHP 引擎会解析该 PHP 程序,并将其编译为特定的操作码(Operate Code)文件. ...
- 支持中文的WordPress缓存加速优化插件WP Fastest Cache
我们使用 WordPress 建立的站点,每一个页面几乎都要用到 PHP 和 MySQL,所以为了加速站点的访问速度,十分有必要将这些页面生成一个静态的 html 文件并保存以便其他用户访问静态 ...
- 【vite+vue3.2 项目性能优化实战】使用vite-plugin-cdn-import进行CDN加速优化项目体积
CDN(Content Delivery Network)即内容分发网络,是一种通过在全球范围内分布式部署服务器来加速网络内容传输的技术.CDN加速的原理是,当用户请求访问某个资源时,CDN会根据用户 ...
最新文章
- 这种口令解决方案可替代多因子验证
- 你的项目应该如何正确分层?
- Windows 7程序开发系列之一(任务栏篇)
- 最近做一个新闻类项目,用到调用新浪微博接口,经过研究测试整理步骤如下:先根据此内容获取App Key和Secret Key
- 打印控件的 frame
- 【淘宝0元购】,所有人无门槛参与!
- springboot整合支付宝支付
- SOM神经网络、LVQ神经网络、CPN神经网络与Python实现
- 排队器拦截_如何绕过浏览器的弹窗拦截机制
- 用canvas画圆形图片
- CAD矩形阵列应用与实战技巧
- The Complete Guide To Rooting Any Android Phone
- Matlab_GUI gcf、gca 以及gco 的区别用法
- 使用pm命令安装或卸载apk,静默安装、卸载方法
- How cc Works 中文译文 1
- 程序员找工作经历,一个人在北京工作的艰辛
- struts tags logic
- 基于入度的拓扑排序(Kahn's Algorithm)
- Linux下安装五笔输入法和更新码表
- GPS接收机设计(4)——帧同步