阅读更多

6顶
0踩

Web前端

转载新闻 18个网站优化技巧

2015-07-02 16:20 by 副主编 mengyidan1988 评论(0) 有6830人浏览
快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的。网站页面的加载速度也是衡量网站性能的一个重要因素。



如果网站不是以最好的性能在运行,迟缓的加载会让你在低的排名和搜索流量上花费更大的代价。页面的加载速度会对用户的行为和转化率产生很大的影响。

那么?有哪些简单的方式可以优化加载速度呢?
1、图片优化
首先,你需要优化你网站上的图片,来获得丝毫加速网站的机会。从原图上移除额外的注解、不必要的空间和无用的颜色,将图片保存为JPEG格式,因为它即使占用空间小,也能保证图片的高质量。

对于WordPress网站,建议使用smush.it插件来自动优化网站的图片。如果图片是PNG格式,可以使用tinypng 优化图片,提高图片质量。

2、开启GZip压缩
GZip压缩听起来很复杂,但实际上很简单,被用于减少HTTP请求的大小来缩短响应时间。因为这允许你发送GZip压缩文件而不是HTML文件给浏览器,它将缩短页面等待时间和加载时间。对于Apache服务器,可以将下面的代码添加到.htaccess文件中来开启GZip压缩。
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

如果上面的代码没有开启GZip压缩,则删除,使用下面的代码:
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

或者在HTML/PHP文件的顶部添加下列的PHP代码:
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

3、服务器响应时间
即使网站已经格外优化,但是除非服务器响应时间非常快,否则就不会有什么大的效果。当涉及到提高网站的速度,服务器响应时间起着重要的作用。下面是一些提高服务器响应时间的建议。

有独立的服务器,而不是选择共享/托管服务器。
提高Web服务器的质量。
移除不必要的插件,只有那些必要的插件,才需要一直保持启用状态。
4、浏览器缓存
浏览器具有缓存的功能,可以存储指定的文件,减少HTTP请求,从而提高网站的加载速度。你可以通过在.htaccess文件中设置expires头来开启浏览器缓存,利用下面的代码可以实现:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

注意:如果过期时间与文件挂钩,而此时文件中的内容需要更改的话,那必须先重命名文件,以便浏览器可以获取新添加的代码。

5、开启长连接(Keep-Alive)
Keep-Alive头对缩短浏览器和服务器之间的分布式请求的潜伏期是非常重要的。当用户通过浏览器请求网页时,浏览器会读取服务器发送的特定的HTML文件,如果请求的页面中包含了外部的CSS和JavaScript文件,浏览器会再次发送独立的请求来获取这些文件。正如你想的,这会延长页面的加载时间。

使用Keep-Alive头可以一直保持连接,直到浏览器从服务器获取到所有与这个页面相关的资源。在.htaccess文件中加入下面的代码可以开启这个功能:
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

6、使用CDN



内容分发网络(CDN)是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时,就可以直接从就近的网站服务器获取相应资源(也可以是从负载最小的服务器)。你可以使用Amazon cloud front或者MaxCDN为网站开启CDN加速。

7、压缩CSS、JavaScript和HTML文件
通过删除所有不必要的空格和注释,从而减小文件大小,提高页面的加载速度。下面是一些优化CSS、JavaScript和HTML文件的流行工具,非常有用。

8、避免重定向
重定向是对网站访问者的一种极大的刺激。就类似你去一个朋友家,却发现你朋友早已经搬到三个街区远的地方了。重定向会消耗额外的时间,降低加载速度。

9、指定字符集
指定字符集是加速浏览器渲染页面的另一个有用的技巧。下面的代码就能轻松实现:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

10、避免错误请求
当用户在网站上搜索时,收到404或410错误是比较失望的。错误请求会对网站的页面加载速度产生不利影响。因此,建议你无论如何都要避免错误请求。Check My Link能帮你找出404链接,清除它们,改善用户体验。

11、丢弃跟踪代码、嵌入视频的元素和分享按钮
很多网站管理员认为使用多个跟踪代码提供嵌入和分享按钮会带给用户更好的体验,实际上这只会给网站增加更多的服务请求。例如,一个iframe会请求一个新页面,这会自动降低网站的加载速度。所以,丢弃这些跟踪代码,可以提高网站加载速度,提升用户体验。

12、异步脚本
还有一个可以提高网站页面速度的超棒选择就是异步加载脚本。如此一来网页负载就并不必依赖于这些异步脚本。在异步模式中,脚本是在后台下载的,不会影响浏览器对页面的渲染和加载。
<script async src="http://www.yoursite.com/script.js"></script>

13、样式表置顶,脚本置底
将样式表放在顶部有利于页面迅速加载,因为这样可以使得页面慢慢呈现。一般来说,在同一时间,大部分浏览器支持并行下载两个组件(图像、样式和脚本)。但是通常而言,脚本会在并行下载时会阻止其他的下载,直到脚本下载完毕。

14、JavaScript的延迟解析
为了加载网页,浏览器必须解析所有的标记内容,从而增加了网站的加载时间。通过延迟解析脚本,那么就可以减少初始网站的加载时间了。

15、避免阻塞型的JavaScript和CSS
在浏览器呈现网页之前,它首先需要通过解析HTML标记语言来构建一个DOM树。在此过程中,如果遇到了脚本,此过程就会中止,转而先执行脚本,然后才会继续原先的活动。因此建议避免阻塞型的JavaScript,尤其是外部脚本。

阻塞型JavaScript还会导致网站的延迟。所以不妨推迟加载那些不重要的JavaScript,或者采用异步加载的方式。另一种选择是将这些HTML代码内嵌到网站上,同时需要确保CSS的优化。

16、优化代码:不使用内联的CSS
内联了样式就不能清清楚楚地将内容从设计中剥离开来。同时可能还会需要大量的维护工作,给网站管理员带来各种不便,还会进一步增加网页的大小。

17、文件分离
网站的文件可以分为CSS、JavaScripts和图像。文件分离虽然并不能直接改善网站的加载时间。但是,这么做可以提高服务器的稳定性,特别是当网站流量突然出现了尖峰的时候。子域也可以用于托管文件,这样可以增加并行下载的数量。

18、尽量减少HTTP请求
还有一种简单的优化网页速度的方法是,减少HTTP请求。当一个网站一下子收到太多的HTTP请求,它的访客就会有响应时间延迟的体验,这不仅增加了CPU使用率也增加了页面的加载时间。那么,又该如何减少HTTP请求?请见以下步骤:
  • 减少网站上的对象数量。
  • 最小化网站上的重定向数量。
  • 使用CSS Sprites技术(只要你需要的那部分图片内容)。
  • 合并JavaScripts和CSS文件。

本文转自:http://www.ido321.com/1604.html
  • 大小: 80.5 KB
  • 大小: 79.2 KB
  • 大小: 34.7 KB
6
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • unity树形结构菜单demo

    可动态添加分级目录,可勾选,全选,自动拓展!

  • Unity TreeView 树形菜单

    Unity 树形菜单

  • Unity(UGUI)做一个三级下拉菜单列表(树形下拉菜单)。

    最新项目需求要求做一个三级下拉菜单列表(树形下拉菜单)。但UGUI并没有原生的插件,只能自己实现。思路每个级的ItemPanel(一个单级菜单条)样式是一样的,于是需要一个panel来装所有的itemPanel,在整个菜单 顶部panel上添加vertically layout group组件,使下面的子菜单从上到下依次排列

  • [转]C#中TreeView组件使用方法初步

    TreeView组件是由多个类来定义的,TreeView组件是由命名空间"System.Windows.Forms"中的"TreeView"类来定义的,而其中的节点(即Node),是由命名空间"System.Windows.Forms"中的"TreeNode"来定义的。所以当在程序中创建一个TreeView对象,其实只是创建了一个可以放置节点的"容器"。而在这个容器中加入一个节点,其实就是加入了从...

  • 提升Unity项目组织性:自制多级树型菜单推荐

    提升Unity项目组织性:自制多级树型菜单推荐 【下载地址】Unity自制多级树型菜单实现分层次列表展开仿Unity编辑界面Hierarchy窗口分享 本资源文件提供了一个在Unity中自制的多级树型菜单实现,该菜单能够实现分层次列表的展开,模仿了Unity编辑界面中的Hierarchy窗口。通过本资源,开发者可以轻松地...

  • 使用扩展函数方式,在Winform界面中快捷的绑定树形列表TreeList控件和

    在一些字典绑定中,往往为了方便展示详细数据,需要把一些结构树展现在树列表TreeList控件中或者下拉列表的树形控件TreeListLookUpEdit控件中,为了快速的处理数据的绑定操作,比较每次使用涉及太多细节的操作,我们可以把相关的数据绑定操作,放在一些辅助类的扩展函数中进行处理,这样可以更方便的,更简洁的处理数据绑定操作,本篇随笔介绍TreeList控件和TreeListLookUpEdit控件在扩展函数中的处理操作。

  • C# 通用树形结构算法(递归算法)

    此方法平时开发会更实用,如有不足之处,欢迎指出;

  • 使用jquery的 treetable插件实现树状结构 demo

    当我们需要实现树状结构的时候,并且html中有table标签的时候,我们可以引入treetable这个jquery插件,而我们几乎不用写任何额外的代码

  • C#Winform窗体与界面设计

    本课程是针对C#Winform开发人员的基础性课程,详尽的介绍C#Winform窗体与界面的设计,通过提供实例,让C#Winform开发人员掌握相关程序设计技巧,为后面学习完整的实战课程打下较好的基础。

  • 使用repeater jquery实现的三级可折叠树形菜单

    风语者大哥的三级可折叠树形菜单,整理了一下,供大家学习

  • treeTable例子

    treeTable的小例子,很简单,写的很详细,一看就会

  • vue+elementui实现多层树形菜单

    一个完整的树形菜单demo,下载即可运行,包含node_module包,使用vue+el-menu完成多层树形菜单。内含模拟数据格式。

  • C#WinFrom树形菜单数据绑定

    数据从数据库读取绑定到TreeView,经过测试。

  • jquery-treetable最简单实例

    真的很简单,值得你拥有,运行index即可可看表格树形

  • 用于web 多列树形控件(TreeListView for asp.net)

    用于web 多列树形控件(TreeListView)支持自定义列,行高任意调整,结合js可尽情扩展。   现在发布2.0版本,   1. 重写了全部代码。   2. 简化了html。   3. 支持自定义列。   4. 支持 checkbox   5. 原理之前文章中已经做过说明,这次主要是改变实现方式。不在是模板绑定。全部代码添加数据,更加灵活。 详情见 http://www.cnblogs.com/911362/archive/2009/10/30/1593111.html

  • html漂亮的树形目录

    html漂亮的树形目录,简洁漂亮,非常实用

  • 树形展开的C#树形菜单控件(Treeview示例)

    树形展开的C#树形菜单控件(Treeview示例) 树形展开的C#树形菜单控件(Treeview示例)

  • 递归生成逻辑树

    树节点的设计: package com.zhjg.tree; import java.util.ArrayList; import java.util.List; public class TreeNode { private String id; private String name; private String desc; private String pid; priv

  • 给DataGrid或Repeater加载树状结构

    GPS平台、网站建设、软件开发、系统运维,找森大网络科技! http://cnsendnet.taobao.com 来自森大科技官方博客 http://www.cnsendblog.com/index.php/?p=717 一、示例 1.判断OutLine的点个数,有几个点就是第几层,根节点OutLine为01没有点,所以为第0层,没有竖线,下面这个的OutLine是01.01有1个点,为第1层,有1根竖线,如果是01.01.03,则有3个点,为第3层,有3根竖线,依此类推 二、这里是用到了图片,没张图

  • web页面树形表格的实现

    在做web项目的时候,我们通常会遇到这样的情况,一些数据需要用树形的结构来表示他们之间的关系,那么要怎么来实现呢?这里介绍使用插件jquery-treetable来实现的方法。 1 下载源码,地址:http://ludo.cubicphuse.nl/jquery-treetable/,也可以在线查看Api。 2 在自己的页面里面引入js文件和css文件,如何要结合jqueryUI使用则要引入j

Global site tag (gtag.js) - Google Analytics