快速指南,以加快你的网站

快速指南,以加快你的网站

 

速度是可用性。为了说得更准确,网站速度是可用性的一个重要组成部分。人类有史以来的头脑创造了最直观的界面会做你没有好,如果用户是通过加载时间pee’d关闭。而已。文章的完成了…好了,实际上有很多更给它,但第一句话的一半左右,你需要知道的。我们必须使我们的网站快。我可以用大量最高级的表达,如“超快”,或“非常快”,甚至“比子弹更快”,但他们就是不适用。所以,很简单地说,有没有这样的事情“太快了”。那么,我们的“快”是什么意思?我们确实需要花点时间来谈谈什么样的速度,我指的。总之,一切的速度。更具体地讲,三种速率:1)加载时间这将是它需要所有的信息下载到用户的设备的时间。这主要是由互联网连接的速度,以及文件的实际大小的影响。你不能做太多关于连接,但你可以做很多有关文件的大小。2)处理时间您的文件下载后,必须将它们处理和浏览器中呈现。所有这些处理和渲染是通过你的代码是如何写得很好的影响,以及其他一切去对用户的手机,平板电脑或笔记本电脑/台式机上。你可以控制的唯一的事就是自己的代码,但是,使一个很大的区别。3)感知网站的速度,或感知性能再有就是心理因素。快速的网站可以看起来像是他们会很慢。慢网站可以使他觉得一点点更快一些技巧的司法适用。这部分是所有关于学习你的用户,并让他们知道发生了什么事时,他们与您的网站或应用程式的互动上。你需要注意的网站速度的全部三个方面来使您的网站觉得它会很快。而网站越大,越有优化。让我们开始吧,然后。加快你的CSS很多时候,尤其是对我那么喜欢那些规模较小,实验项目,我发现自己花更多的时间在比CSS代码的任何其他部分。通常情况下有比写HTML或JavaScript也更加CSS。这样,就在那里,是你的CSS可到底有多少影响文件大小的一个指标。然后,当然,有一个如何快速您的网站实际上将用户桌面上运行的事,笔记本电脑,平板电脑或手机。许多实际的“工作”或渲染网页是由软件完成的,从你的GPU一点帮助。它可能快速加载,但慢慢地滚动。你的CSS编写的方式对特定的设备是如何能够快速,一旦文件被下载到实际显示网页有直接的影响。当优化一个网站,运行速度更快,在CSS通常是一个良好的开端。未使用的CSS代码,坐在你的样式表,并没有做任何事情,使您的文件不必要的大。好了,所以这一次似乎是一个没有脑子; 但它仍然发生在我们最好的。你带了一些内容,却忘了删除旧的CSS。您更改容器元素的类或ID,而忘记删除旧的CSS。你写一些CSS,实现有一个更好的办法,而忘记了……你得到它。抛出多个前端开发人员混进去,并且你已经有了一个笨拙,难以管理的样式表,或者他们集合配方,如果你不小心。未使用的代码由于其存在数据的减慢页面加载。它会减慢发展,因为它可以迷惑人阅读样式表。这也意味着较慢的渲染时间,因为它只是更多的CSS的浏览器,通过看虽然所有的CSS的匹配其相应的HTML元素。无论您审查和手动删除所有旧的CSS,使用自动化的工具来帮助您查找未使用的CSS选择器,或者只是随意删除的东西,直到东西坏了(不这样做),你必须采取旧代码了。CSS选择说到如何在浏览器的CSS与相应的HTML相匹配,是时候来看看CSS选择器。很多人都写了哪些选择渲染速度最快的,哪些是缓慢的,你是否应该用慢的人打扰可言,等等。问题是,大部分信息是旧的。早在2000年,戴夫·海厄特(开发人员在Safari工作,和W3C的CSS工作组的积极成员)写了:关于CSS3选择可悲的事实是,他们真的不应该使用在所有如果你关心页性能。如果你看看那个报价来自的文件,你会看到他谈论像选择:第一,儿童和其他伪选择。他是对的。他仍然是; 但在过去15年中,计算机拥有先进的一点点。如今,来呈现CSS所需的计算机的额外的努力不应该只是使用最廉价的廉价移动设备的那些是明显的人。这本身就是一个问题,所以真的,这将取决于该项目在手,你的目标人口统计,等等。简单地说,使用您的最佳判断,也许不会做得太过火的伪选择。否则,除非你的网页达到本书的篇幅,您使用的选择应该不会对您的网站的性能影响很小。不过,看看上面链接的文档并获得熟悉的东西呈现最快的,哪些没有。您仍可以找到有用的信息。您还可以看到这篇文章从CSS-诀窍稍微最近就这个题目。资源型重性当然,也有一些需要更长的时间来呈现比其他的CSS属性。经典的属性,如宽度,高度和颜色都仍然是最快的。倾向于需要较长的时间(并且可以从浏览器到浏览器会发生变化)的那些往往是像箱阴影CSS3属性。加阴影的元素的过程是复杂的,尽量渲染网页的关注。有趣的要注意的是,作为HTML5岩石指出,所需要的处理能力,可根据投影的具体尺寸相差很大。该文章指出,同样适用于其他属性,如边界半径和变换真实。同样,这些会对你的平均台式机或笔记本电脑上的网页的渲染效果不大。移动设备可能需要一个更大的打击,虽然和经验可能因此受到影响。每个人都憎恨波涛汹涌的滚动。仍然,具有针对使用图像以产生相同的效果的成本之间进行权衡。还有人记得我们做了很久拿到圆角,一旦事情?只是不要太过火,和你的风格应该呈现足够快。CSS动画现在我们进入其他领域。CSS动画可以极快,也可以减慢浏览器到游戏装备有麻烦跟上的地步。这部分是因为不是所有的动画渲染相等。一些繁重的工作是由硬件完成,而其他类型的动画必须由浏览器本身的功能完全呈现。这是在移动设备尤其是昂贵的。在HTML5上的岩石的另一篇文章,是最快的动画的CSS属性是位置,缩放,旋转和不透明度。退房的文章是什么,同时保持“成本”低的动画更完整的概述。使用CSS预处理器这里就是我给你的是我,笔者可以给你最实用的建议。使用CSS预处理器一样都不能少,SASS和手写笔。当然,如果你使用他们错了,你可以产生更大的样式表比你预期的; 但潜在的好处是值得的。例如,如果你想减少到服务器(总是一个好主意)发出的HTTP请求的数量,包括所有的复位,框架,进入一个都不能少/ SASS文件。当它编译,它都将是在一个单一的样式表。此外,大多数预处理器提供选项输出所有CSS在精缩形式。通过这种方式,您可以根据需要对代码组织的目的,而不会过度影响文件大小使用许多不同的文件。加快你的JavaScript JavaScript会很慢。更具体地讲,JavaScript可以有比CSS速度方程的“处理”部分更加直接的影响。更糟的是,JS可以为了实现看似琐碎的事情让文件大小方面成倍加重。这是痛苦的缓慢的双重打击,而我们的用户往往是受害者,尤其是在移动浏览器。这是没有,不过,语言的过错。如何搞砸了我们的JS得到的是往往成正比,我们在总体规划的无知。我是一个非开发。我经常使用如jQuery或个人单机JS插件库来完成各项工作。我越要做,更多的插件,我需要让所有的工作。这些插件和框架配有额外的选项,而我可能永远不会使用的功能。还有的带宽窃取膨胀,就在那里。另外,插件可能无法很好地协同工作。他们可能会减缓对方倒地,或者一个可以从完全停止工作的另一个。有浪费的处理能力,就在那里。如果你真的想加快你的网站,剃去毫秒(或整秒,在某些情况下),这里就是你需要做的:JavaScript的几乎是可以外接如CSS,最好让JS在外部文件,并链接到你的HTML。你可能不认为这是什么大不了的,如果你没有太多的JS代码,它添加一个HTTP请求,但这里的东西:外部CSS和JS文件会被浏览器缓存。所以当再次请求同一个页面,使用相同的CSS或JS得到请求您的网站或其他页面,这些高速缓存的外部文件的习惯,而不是再次下载。这是更快的网站加载速度稍微快处理。这是值得到服务器的额外调用每隔一阵子。包括基本上页面底部的JS文件,该理论是这样的:在浏览器呈现无论是在一个页面的源代码顶部第一。这就是为什么事情像标签去接近顶部。JavaScript文件,但是,可以从直到他们加载渲染你的HTML停止浏览器慢下来的一切。由于大多数的常用JS特效和插件只需要工作后的页面的其余部分是在屏幕上,这是不太理想。改善用户体验,并通过链接到这些外部文件在页面的底部,tag之前降低感知加载时间。用户得到周围与任何需要JS交互的时间,应该是准备好了。如果你可以的,如果你正在设计一个完整的应用程序,避免框架和其他的依赖,那么你可以,也许应该忽略这一部分。一个良好的,灵活的,光框架可以为开发人员提供了巨大的优势。对于小型到中型的网站,但是,包括JavaScript框架可能是矫枉过正。在这些网站上,JS将主要在CMS的后端,用于管理内容的使用。在前端,你可能有一个图像滑块,或砖石布局或两个。如果你真的看中了,你可能有自动完成的搜索栏上。多数内容并不需要被幻想起来,动画这样。JavaScript的应该,尽可能,保留用于改善用户体验。它依靠简单地漂亮了一个网站可能会导致一个缓慢的,缓慢的网站,特别是在移动设备上。在某种程度上,所有的代码框架都是一样的,无论是JavaScript的,PHP,Python和HTML,CSS或:每一个功能是一串代码。当选择一个工作框架或插件,问自己,如果你要使用的每一个功能,它提供了,甚至其中的大多数。如果没有,是框架模块化?你可以挑选只有你实际需要的零件?如果是这样,你相信文件大小的权衡是值得的,然后通过各种手段去了!否则,它是看你能采取什么出比你能塞进更多。关闭JavaScript后不会永久最佳实践!想想这样的方式,是通过有JS隐藏掉网站上的任何内容或功能?人们可以访问它没有在其浏览器中启用JS?如果是的话,那也不错。然而,如果人们无法看到的重要信息,请联系您,或者正常浏览,没有JavaScript,那么你已经有了一个问题。当然,你可以依靠多数人还是有它启用,但你总是有那些边缘情况。请问这个涉及到网站的速度?试想一下,浏览多么慢,如果你的网站的一部分,只是突然不工作时会得到。聘请开发者,无严重的是,如果你不是一个开发人员,你有预算的一个,去得到一个,即使是小的,简单的工作。这是从长远来看更便宜雇人经历把事情做对,一次。倘若事情可怕的错误(我们在这里谈论的电脑,所以事情会出错),他们会发现出了什么毛病更快。他们将不得不寻找那些各种各样的问题和解决这些问题的经验。如果不出意外,他们将在谷歌上搜索那些特定主题的更好。最重要的是,他们会知道该怎么做必须用更少的代码做了什么。更少的代码(通常情况下)运行速度更快,(总是)下载速度更快。这就是我可以尽可能的给简单的建议。当你把视频输出(如果你是一个开发者,或者正在学习,我已经编制教程的名单,这将是在本文的底部。包括一些初学者指南编写运行快速的JavaScript。)图像和压缩等式,在任何给定的内容驱动网站的最重要的事情是图像。图片往往是大,笨重,缓慢的地狱,当他们没有优化。现在,随着视网膜屏幕迫使我们使用更大的图像泛滥,如果我们想要的东西好看每个设备上,这个问题是不会得到任何容易解决。更糟糕的是,这是一个问题,很容易忘记,直到你最终花费比计划更多的带宽。当每一个字节计数,我们无法承受忘记。好消息是,这不是一个新问题,通过任何手段。这是为什么好?这意味着,有万吨的潜在解决方案的挑选,你可以同时使用其中的多个。事实上,这通常是一个好主意。因此,除非ISP和托管公司开始给我们所有的免费无限带宽(不要屏住呼吸),这里有一些事情可以做:用代码不是简单的把图片做得更多,尽可能就可以了,在视觉上来说,与CSS和JavaScript你变成图像前。代码将永远是便宜不是图像,就像你可以转移,所以与坚持。尽管基于CSS的下拉阴影,渐变等所消耗的处理能力,考虑权衡。也请记住,SVG图像,计数,在这种情况下,为“代码”,因为这对他们是:这是呈现为图像的XML代码。因此,他们必须每当你需要什么矢量关联使用。使用响应图像现在,回到前述的那些视网膜屏幕,我们该怎么做他们?我们如何节省带宽呢?这是我们转向元件和图像设置属性。他们是比较新的,并没有完全支持,但他们并允许浏览器挑选合适的图像尺寸针对要使用的设备。因此,尽管这不会救你的人在他们的iMac检视您的网站的任何带宽,它不是什么大不了的事,因为他们已经最有可能得到的宽带。有人在手机上,同时,得到了相同的图像的缩小版,让他们等太久。挑选作业一旦你学会了在任何情况下要使用的图像格式许多图像尺寸困境得到固定正确的格式。我可以去上一下具体的图像格式,压缩是如何工作的,等等,但你真的只需要记住几件事情:对于复杂的图形,如照片,请使用JPEG格式。对于很少使用的颜色,如图标和标志,使用SVG和/或PNG图形简单。GIF仅用于动漫的,只有当你不会得到更好的动画与CSS3或JavaScript什么服务。GIF动画工作的内容不是界面元素更好。这真的是它的全部。如果你这样做,当你保存图像与优化设置玩,你可以经常在相对较小的文件大小获得相当不错的品质。展望未来然而,有一个叫出来的新的WebP格式,这是由Chrome和Opera自动支持。谷歌称,WebP的文件比PNG格式小26%,小25-34%,取决于两个因素。这是个好消息,除了两件事情:Firefox和IE。现在,如果你不介意使用回退和一个额外的脚本,现在就可以,今天使用的WebP格式。只要下载WebPJS,你是好去。WebPJS使用JavaScript和Flash一点点(叹气……但这只是对IE),使其工作,但它确实工作。如果你需要就可以提供很多很多的大图像的快速,与缺点是它不会没有JS工作,你可能会考虑它。压缩有两种压缩技术,您可以在您的图像使用。首先,我们有有损压缩。这是用来对有损格式,如JPEG。它可以让你压缩有关,就像你的理解是质量将恶化并每况愈下喜欢的任何图像。事情会变得像素化而失去定义。无损压缩用于格式,如PNG,并可以减少其文件大小在一定程度上。但是,它也有其局限性。有总是在这一点,就不可能使图像更小而不失品位。如果你有Photoshop或类似先进的图像编辑器,通常最好使用那些压缩您的图像,让您可以看到输出将是什么,当你做这样。(自动工具,尤其是网络工具,以我的经验,往往压缩的东西也许有点太过分了。不过,我会列出我在下面的链接部分已经找到了最好的压缩工具)实现图像压缩和调整在您的CMS如果您使用的是CMS像WordPress,它会自动调整大小太大的图像。它也很容易找到的插件,它会自动压缩它们。提个醒,我只建议在你知道你将要上传很多,很多的用于相同目的的类似质量的图像的情况下,自动压缩。一张照片博客就是一个例子。如果你正在运行,用户上传自己的图片网站,以及…自动调整大小和压缩是绝对必要的,这就是为什么每一个社会网络做的。一般提示这里是不适合在任何三类以上建议一对夫妇位。缩小一切“涅槃”你的代码只是意味着所有多余的空格和换行得到取出。这可相当显著减少文件大小。这听起来像一个大量的工作,但也有工具,有自动缩小CSS和JS,并保持缩小的文件分开你的源文件,为相当明显的原因。就像之前提到的,各种CSS预处理器可以输出所有的代码在缩小的形式摆在首位的。压缩一切前提是你的服务器设置正确,你的所有代码都可以以压缩格式发送到浏览器。文本文件压缩得非常好,大大降低了发送的文件的大小。现在,您的服务器不具备采取即时或两个压缩它发送的文件,用户的浏览器必须解压缩,但是这通常是值得的带宽权衡。对于如何工作的完整说明,请参阅如何优化您的网站用gzip压缩。缓存您的网站浏览器缓存自动发生在一定程度上得益于现代浏览器。浏览器都到了现场,并临时存储图像和其他信息发现的情况。这样一来,如果同一用户给定的时间内返回,浏览器不必要求相同的图像一遍。它只是加载它已经拥有的,并要求任何可能不会出现新的图像。然而,有,您能做的事告诉浏览器缓存和本手册中有多久,看到。服务器缓存,并再有就是服务器缓存。服务器缓存基本上只是把你的网站,并提出了几分用户和实际的服务器之间的它“复制”。为什么要这么做呢?嗯,这是对谁使用大规模内容管理系统的人尤其有用。有你的用户访问您的站点的临时副本而不是实际的东西减少了调用数据库的数量。信息被显示,并加载速度更快,因为它没有被重新处理每一次。根据它如何设置,服务器缓存还可以降低总体带宽成本。基本上,越大你的网站,更多的原因,你不得不考虑将其高速缓存。链接而现在,你一直在等待的部分:链接列表!我们有教程和指南,主要是,一对夫妇的图像压缩工具来推荐。一般资料从雅虎开发者网络的Yahoo! 可能没有什么大不了的,因为它曾经是,但他们的开发者网络上有很多关于它的好东西。这包括加快您的网站,它涵盖了一些基本的东西,你可以做他们的最佳实践。其中一些涉及相同的地这篇文章,但还有更多的除了。在介绍中,我提到感觉到网站的速度,也被称为感知更流畅。如果您想了解更多关于这,检查出一个初学者指南感知性能:4种方法让你的移动网站觉得自己像一个本机应用程序。CSS Effeckt.css Effeckt.css是一组被设计来呈现快速,无论用户是在什么平台上基于CSS的动画。优化CSS交付该指南以确保您的CSS被下载和浏览器尽可能快地处理。JavaScript的24和JavaScript的最佳实践,适合初学者当你刚刚起步,学习正确的代码可以是一样大的提升速度,你可能会学到技巧的任何随机提示。糟糕的代码花费更多的处理时间方面,所以要学会做事的正确方法。快速写入,内存效率的JavaScript这是一个基本的指南,更特别侧重于编写运行快速的JavaScript。在V8性能提示为JavaScript正如标题所说,这是在V8 JavaScript的专门针对所有的建议。5个窍门更有效的jQuery选择器有时候,你最终可能会使用jQuery。如果你要做到这一点,至少你应该知道如何编写jQuery选择,不会减慢你的速度。这里的地方Sitepoint有你覆盖。图片初学者的指南,以图像文件格式阅读本有关Web图像格式的详细信息。该信息是有点老了,但仍然有效,并很好的了解。图像优化这是一个比较技术指南,由谷歌开发者网络提供的图像优化。Compressor.io Compressor.io是我亲身遇到的更令人印象深刻的工具之一。这是一个在线应用程序,所以你必须上传要压缩的文件,但它可以为JPG格式奇迹。它提供了有损和无损压缩选项,每一个令人惊讶的效果,它可以做批量处理为好。Trimage Trimage专业无损压缩,但它可以被安装在自己的计算机上,在Windows,Mac或Linux。由于它安装到您的计算机(是的,带有各种命令行选项以及一个图形用户界面),它可以很容易地自动作为开发流程的一部分运行。结论与往常一样,还有很多东西要学。但随着我们提供的信息,我们已经联系到资源武装,你会用自己的方式来建立网站和应用程序不惹恼了地狱,你的用户。而这对他们留下深刻印象的第一步。通过埃塞基耶尔布鲁尼埃塞基耶尔布吕尼是一个网页/ UX设计师,博客,和有抱负的摄影师生活在墨西哥。当他\’S没有达到他在引线框架和前端代码精细凿耳,或大约咆哮相同,他在啤酒沉溺于,比萨饼,幻想小说,和单口相声。通过埃塞基耶尔布鲁尼更多文章

Comments are closed.