Web优化是Web开发和维护的重要组成部分,但也是网站管理员经常忽略的内容。 只要考虑一下您可以节省的钱,以及在完成正确的选择后,它可能如何帮助增加读者人数和访问量。
如果您到目前为止尚未对网站(或博客)进行任何优化,或者只是好奇它如何帮助您加快网站访问速度,请查看我们汇总的优化提示列表。
为了更好的可读性,我们将内容分为3个部分–分别是服务器端优化 , 资产优化 (包括CSS,Javascript,图像等Web组件)和平台 ,我们将重点关注WordPress优化 。 在最后一节中,我们引入了一些我们认为有用的链接。 跳转后的完整列表。
优化:服务器端
-
选择一个体面的虚拟主机
您的虚拟主机帐户与您要执行的优化没有直接关系,但是我们认为选择正确的虚拟主机帐户非常重要,因此我们决定首先引起您的注意。 托管帐户是您的网站/博客的基础,安全性,可访问性(cPanel,FTP,SSH),服务器稳定性,价格和客户支持均在其中发挥重要作用。 您需要确保自己处于良好状态。
-
分别托管资产
当我们提到资产时,我们指的是不需要服务器端处理的Web组件,例如图像和静态脚本 。 其中包括任何Web图形,图像,Javascript,级联样式表(CSS)等。不必单独托管资产,但是当博客流量激增时,通过此实现,在服务器稳定性方面,我们已经看到了巨大的成果。
-
用GZip压缩
简而言之,无论何时发出HTTP请求,内容都会从服务器端传输到客户端(反之亦然)。 压缩要发送的内容会大大减少处理每个请求所需的时间。
GZip是执行此操作的最佳方法之一,并且会根据您使用的服务器类型而有所不同。 例如,Apache 1.3用途mod_zip ,Apache的2.x使用mod_deflate模块 ,并在这里是你如何在Nginx的做到这一点。 以下是一些非常好的文章,可让您熟悉服务器端压缩:
-
减少重定向
网站管理员一直都在进行URL重定向(无论是Javascript还是META重定向)。 有时,其目的是将用户从旧页面引导到新页面,或仅将用户引导至正确的页面。 每个重定向都会创建一个附加的HTTP请求和RTT (往返时间)。 重定向次数越多,用户到达目标页面的速度就越慢。
推荐阅读 : 避免通过Google Code进行重定向 ,可以使您对此事有个很好的了解。 本文还建议了一些实用的方法来最小化重定向以提高服务速度。
-
减少DNS查找
据雅虎! 开发人员网络博客 ,DNS(域名系统)需要大约20-120毫秒才能解析给定主机名或域名的IP地址,并且浏览器在适当完成此过程之前无法执行任何操作。
作者Steve Souders建议将这些组件划分为至少两个但不超过四个主机名,这样可以减少DNS查找并允许高度并行下载。 阅读有关该文章的更多信息。
优化:资产(CSS,JavaScript,图像)
-
将多个Javascript合并为一个
http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http://www.creatype.nl/javascript/dragdrop.js http://www.creatype.nl/javascript/slider.js
通过将URL更改为单个文件:
http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js
通过操作.htaccess并使用PHP。 点击这里阅读更多。
-
压缩Javascript和CSS
在线压缩它们!
- compressor.ebiene ( Javascript , CSS )
- javascriptcompressor.com ( Javascript )
- jscompress.com ( Javascript )
- CleanCSS ( CSS )
- CSS优化器 ( CSS )
-
自定义标题到期/缓存
通过使用自定义的Expiry标头,当同一用户第二次重新加载页面时,您的Web组件(例如图像,静态文件,CSS,Javascript)跳过了不必要的HTTP请求。 它减少了所需的带宽,并明确帮助更快地提供页面。
-
卸载资产
通过卸载,我们的意思是将Javascript,图像,CSS和静态文件与托管网站的主服务器分离,并将它们放置在另一台服务器上或依赖于其他Web服务。 通过将资产卸载到其他可用的Web服务上,使服务器主要用于PHP处理,我们在Hongkiat看到了显着的改进。 以下是一些有关卸载在线服务的建议:
- 图片 : Flickr , Smugmug ,付费托管*
- Javascripts : Google Ajax库 , Google App Engine ,付费托管*
- Web表单 : WuFoo , FormStack
- RSS : Google Feedburner
- 调查与民意调查 : SurveyMonkey , PollDaddy
*付费托管 –付费服务始终具有更好的可靠性和稳定性。 如果您的网站一直在要求提供资产,则需要确保资产状况良好。 我们建议使用Amazon S3和Cloud Front 。
-
处理网络图像
图片是您网站的重要组成部分。 但是,如果不能适当地优化它们,则它们可能会成为负担,最终导致每天无法预测地使用大量带宽。 以下是一些优化图片的最佳做法 :
- 优化PNG图像 Smashing Magazine上的人们描述了一些巧妙的技术,可以帮助您优化PNG图像。
- 针对Web进行优化 –您需要了解的事情(格式),了解有关Jpeg,GIF,PNG以及如何保存网络图像的更多信息。
- 不缩放图像始终练习为每个图像插入
width
和height
。 另外,不要仅因为需要在网络上使用较小版本的图像而按比例缩小图像。 例如 :不要通过更改width
和height
,将网站的200×200像素图像强制缩放为50×50像素。 取而代之的是50×50像素。
使用Web服务和工具进行优化 。 好消息是,您无需成为Photoshop专家即可优化图像。 有很多Web服务和工具可以帮助您完成工作。
- Smush.it
- JPEG和PNG剥离器 Windows工具,用于从JPG / JPEG / JFIF和PNG文件中剥离/清除/删除不必要的元数据(垃圾)。
- Online Image Optimizer可让您轻松地优化gif,动画gif,jpg和png,以便它们通过Dynamic Drive尽可能快地加载到您的网站上
- SuperGIF毫不费力地缩小您的所有GIF图像和动画。
- 还有更多
-
处理CSS
现代网站使用CSS作为样式以及外观的基础。 CSS不仅为更改提供了极大的灵活性,而且在所需代码方面也较少。 但是,如果它们的编码不正确,则可能适得其反。 这是一些清单,或者是一些指南,可确保您对CSS进行了适当的优化:
- 使您的Elements的孩子与后代保持一致如何使用CSS选择器保持标记干净。
- 保持CSS简短当它们使用相同的样式时,代码越短越好。 这是您可能需要的CSS速记指南 。
- 使用CSS Sprite
background-position
属性控制其输出来减少每次加载页面时的HTTP请求。 这里有一些有用的指南和技术来创建CSS Sprites: - 一次使用每个声明在优化CSS文件时,可以采用的最强大的措施之一就是一次使用每个声明。
- 减少CSS文件的数量原因很简单,当请求一个网页时,您拥有CSS文件越多,它发出的HTTP请求就越多。 例如,不要像下面那样拥有多个CSS文件:
<link rel="stylesheet" type="text/css" href="main.css" /> <link rel="stylesheet" type="text/css" href="body.css" /> <link rel="stylesheet" type="text/css" href="footer.css" />
您可以将它们合并为一个CSS:
<link rel="stylesheet" type="text/css" href="layout.css" />
- 用于检查,清理和优化CSS文件的有用工具即使您完全不了解CSS编码,也可以使用一些有用的工具来优化CSS代码。
- 清洁和优化CSS的7条原则代码优化不仅是最小化文件大小,还在于组织合理,整洁高效。
- 优化CSS的最佳实践认为本文更像是一项学术练习,而不是实际的优化技巧。
WordPress优化
我们会不时监控,基准测试和分析WordPress博客的性能。 如果网站运行缓慢,我们需要知道原因。 这是我们已经完成的一些基本更改,我们认为这些更改将显着提高WordPress博客的速度。
-
缓存您的Worpress博客
WP-Cache是一个非常高效的WordPress页面缓存系统,可让您更快地访问站点并做出响应。 我们还建议使用WP Super Cache ,它比前面提到的插件增强了,并且也做得很好。
-
停用并删除未使用的插件
当您发现博客加载速度非常缓慢时,请查看您是否安装了许多插件。 他们可能是罪魁祸首。
-
删除不必要PHP标签
如果您查看主题的源代码,则会发现很多类似以下的标签:
<?php bloginfo('stylesheet_directory'); ?>
<?php bloginfo('description'); ?>
它们几乎可以替换为不会导致服务器负载的文本内容。 查看Michael Martin的13个标记以从WordPress Blo g中删除
- 加快WordPress速度的3种最简单方法 John Pozadzides分享了他的博客如何在Digg流量高峰期间顺利航行。
- 最大化MAX性能的13个出色的WordPress速度提示和技巧如果您发现WordPress网站的性能不佳,可能是由于流量大或您不知道的隐藏问题而导致的,请尝试以下几件事。
- 40个WordPress优化技巧幻灯片中的优化技巧。 40分钟内获得40条提示。
最后但并非最不重要的…
以下是一些有用的Web服务和工具,可为您提供更广阔的视野和更好的分析,以帮助您进行Web优化。
-
YSlow分析网页,并根据一组高性能网页的规则提出改进网页性能的方法 。 它为您提供了一个很好的主意,以使网站加载速度更快。
(需要Firebug )
-
类似于Yahoo! YSlow ,Google Page Speed是一个开放源代码的Firebug插件,用于评估网站性能以及如何改善它们。 (需要Firebug )
-
翻译自: https://www.hongkiat.com/blog/ultimate-guide-to-web-optimization-tips-best-practices/