图片:您最简单的页面速度获胜

作者:阿菘

在过去几年中,页面速度已经变得非常重要,因为您的网站流量和排名人们想要快速网站 - 而且因为用户想要快速网站,谷歌也是如此,快速的网站比谷歌搜索引擎排名中的慢网站做得更好,所有其他条件相同现在,有一些与页面速度相关的领域,您需要技术开发人员,他们可以更改堆栈的加载方式并优化服务器性能但是,并非所有页面加载问题都很复杂或需要很多技术知识在这种情况下,我们正在讨论的问题是图像权重图像通常是页面加载速度慢的网站的一个主要问题幸运的是,优化图像是一个非常容易的胜利每当我们审核网站的页面加载速度慢时,图像几乎总是问题的重要部分那些谁创建网站似乎已经忘记了我们需要在上传之前调整图像大小和压缩图像,而不仅仅是将它留给网站CMS或服务器压缩软件今天,我们经常s页面上有兆字节图像的页面是兆字节页面不应该大于1兆字节,更不用说几兆字节,但这是一个经常发现的事实上,许多网站甚至每页超过10 MB没有网页页面应该是那么大 - 当它是,几乎总是一个图像优化问题只是知道如何正确地调整/压缩/保存图像和实现一个过程,以确保这发生可以解决很大比例的页面权重问题大约20年前,当我开始进行Web开发时,网站无法承受高负荷,并且仍然期望获得任何流量页面在100-250 KB下完全加载 - html,图像,脚本和所有它们都必须是浏览器和连接很慢这与搜索引擎无关网站无法正确加载大型权重我知道的每页1 MB的网站需要15分钟才能加载是的,15分钟现在我们在快速连接的时代,si tes在监控页面权重方面变得非常宽松,导致网站每页大小可达25 MB(真实故事)问题是,在某些方面,这些慢速页面加载比现在更重要了今天,我们不仅有像移动设备这样的限制性参数,而且,您在Google中的排名受到网页加载速度慢的影响因为网页加载在互联网发展的早期非常重要,公司过去常常让图形人员致力于图像优化现在,大多数人依靠CMS(内容管理系统)进行图像大小调整和压缩这意味着,在大多数情况下,图像优化是在上传后发生的。此过程会导致图像文件权重过大和过重,这会降低页面速度 - 并且,如果在整个站点上广泛实施,则可能导致较低的站点定位当您使用CMS调整图像大小时,通常只会更改图像大小而不压缩图像,或者您的服务器是resi如果它正在压缩图像(如在WordPress中),则预设速率;这意味着,即使它做得不错,你的文件仍然会比上传前正确压缩的文件平均大15%到30%如果你的CMS正在“动态”调整图像大小,意味着它们的大小调整因为它们被提供,然后很少(如果有的话)压缩完成这对于每页有多个图像的网站来说可能非常有问题通常在执行的审计中,图像平均占页面权重的40%到60%,在上传之前处理图像可以节省30%到50%的图像重量因此,在上传图像之前需要做什么?调整图像大小非常重要如果您拥有2400px宽的图像,并且所需的只是网站上500px宽的图像,即使在CMS内调整大小也需要它压缩2400px图像中的所有信息这会使您的图像更大开始时现在,大多数团队都没有专门用于图像大小调整和压缩的人员这意味着虽然我们应该为桌面设备,平板电脑和移动设备提供多种优化的图像尺寸,但您可能没有足够的资源来执行此操作。如果是这种情况,对网站上的任何图像最重要的事情是将其保存在所需的最大物理尺寸中,但不能更大 这意味着如果您需要三个图像并且800 x 600像素是所需的最大尺寸,那么请确保在适当的程序(如Photoshop)中将原始图像的大小调整为800 x 600然后,即使您仍需要在CMS内调整大小,从一开始就使用较小的文件大小首先,您必须调整图像大小,压缩,然后上传但是,不仅在上传问题之前无法调整大小和压缩,而只是选择正确的文件类型已经成为问题这些天在网站上处理图像的许多人通常没有图像体验,因此当你应该使用PNG时他们将使用JPG,反之亦然为什么这很重要?当您使用错误的文件类型时,您可以增加文件权重,有时非常显着。那么,您使用哪些文件类型?有几种文件类型,JPG,GIF,PNG和WebP是最常见的,其中最常用的是JPG和PNG除非动画图像,否则没有人应该使用GIF而WebP显示效果很好承诺其高质量,无损压缩算法,现在它不受高度支持,必须使用特殊编程才能使其与支持的浏览器(如Opera和Chrome)之外的任何浏览器一起使用这并不意味着你不能使用它,但它确实意味着你不能使用它而不为不支持的浏览器创建变通方法对于大多数人来说,更容易坚持使用标准格式的JPG和PNG WebP很可能成为标准一旦我们完善其支持它可以保存图像以更低的文件重量和更高的质量提示:如果你想使用WebP,谷歌有一个图像转换器经常,人们选择他们的文件类型的任何显示为图像程序中的默认值但是,错误的文件类型选择e实际上可以使你的图像比你需要的更大如上图所示,你想要一个JPG或PNG有多种考虑,但最简单的方法就是问自己:你在看一张照片吗?或其他东西,如艺术品或徽标?每次保存照片时,都要使用JPG;对于其他所有(徽标,艺术线条,艺术品等),你想使用PNG当我们使用错误的格式时,我们可以显着增加重量和尺寸此外,线条艺术可能看起来不那么清晰或清晰使用有损压缩模型(数据丢失的地方),就像JPG一样,区别在于有损压缩与无损压缩JPG使用所谓的“有损”压缩这意味着一些数据在压缩文件时会永久丢失眼睛通常不会轻易感知到丢失的数据,所以你得到一个较小的文件,降低最少当然,这取决于保存的JPG的质量越低质量,丢失的数据越多如果质量太低,图像可以启动“重影”,意味着工件将出现在最终图像中如果您想避免此问题,保存图像时不要低于50%的质量率使用今天的显卡,50%的速率应该保持足够高的质量看起来正确,但足够低保存大量文件大小提示:保存JPG时使用渐进式设置,因此当它们加载到浏览器中时就好像它们“淡入”文档一样用户不会遇到页面跳转等问题而且更有可能将页面视为更快的加载PNG使用所谓的“无损”压缩无损意味着在保存文件时,数据不会丢失图像被重新采样,并且在编译时可能使用“最近邻居”(类似颜色)数据,但数据未从文件中删除有两种类型的PNG:一种是24位,一种是8位当您尝试减小文件大小时,您需要8位PNG设置您也可以想要更进一步,从PNG文件中删除颜色提示:在Photoshop中保存PNG时,使用导出>保存为Web(旧版)您可以选择较少的颜色或黑白,这可以减少多达50个PNG文件百分比到百分之九十为了说明这一切,我采用了相同的文件 - 徽标 - 和保存为PSD,PNG 8-BIT和PNG 8-BIT黑色和白色下面我们可以看到文件大小的大幅减少当我们使用PNG 8去除颜色时只使用所需的颜色原始文件= 110KB标准Photoshop导出 - PNG 8 = 138 KB Web旧版Photoshop导出 - PNG 8 = 456KB Web旧版Photoshop导出 - PNG 8(灰度4色)= 141KB因此,我们可以看到,通过使用适当的PNG-8减少颜色,我们可以将图像的大小减少95%以上我们的110 KB图像可以减少到141 KB这可能看起来不多,因为它是一个图像,但如果你在一个页面上有10个赞助商标识,你可能会在该页面上看到节省40kb到100kb所以,正如我们在这里看到的那样,你可以通过简单地执行初始调整大小来节省大量的页面重量上传前保存压缩SVG是一种将图像编码到页面中的技术SVG的问题在于它需要有知识的人来创建和实现它们,它会创建巨大的代码块,它不能很好地处理复杂的图像元素,并且在旧版浏览器上可能很难支持但是,如果这些参数都不是您的问题,那么对于所有页面和所有设备类型中显示的站点徽标等图像,或者创建简单的信息图表但请注意,crea显示数千行代码来显示图像不一定能节省页面权重如果您使用的是SVG,这里有一些提示:提示:创建SVG图像的好工具是Inkscape使用WebPageTestorg,我们可以看到图像大小如何影响大品牌(注意1,000毫秒= 1秒)对于这个测试,我选择了以下网站作为知名品牌之后,唯一的要求是图片密集的主页:我们可以看到文档在视觉上完成所需的时间令人惊讶在这里,赫芬顿邮政很快加载大约2秒,而Mashable需要整整182秒这里是主页的每个站点的请求数,按类型细分我们发现图像导致所有网站上的请求数量最多以下是每个网站每页下载的字节数有趣的是,尽管图像权重最大,但赫芬顿邮政的加载速度要快得多这可能是由于他们在图像上使用的延迟负载,这是一个很好的结果。如果你不需要谷歌索引的图像(谷歌已经声明他们通常会忽略延迟加载的项目 - 所以,如果你使用这种技术,你必须非常小心你仍然可以将你的图像编入索引,如果这对您的网站很重要)我们还可以看到,Mashable不使用最小化页面加载的脚本技术,页面上的图像为25兆字节,另外25兆字节的“其他”,此页面的运行率约为30%如果经过适当优化,其页面重量可能会达到50%因此,很明显这是一个真正的问题但是它是如此简单的修复确保您在服务器和网站上进行了适当的压缩,同时也优化了图像在你上传之前它将节省你很多的页面速度和下载今年晚些时候,根据谷歌,他们将切换到移动优先索引,这意味着他们将使用你的移动网站来确定你的网站定位但是,在这我们去的时间不知道他们将如何评估桌面用户和页面速度此外,慢速网站仍然会给用户带来问题,因此加快速度只会让您在网站粘性和降低跳出率方面受益。请记住,页面速度对您来说很重要用户,在移动设备上最重要如果您没有尽力优化页面以获得最快的下载速度,那么您只是卖得很短并且失去用户,以及可能的排名图像优化修复是轻松获胜几乎每个网站我已审核过去三年有图像问题你的吗?如果您可以节省20%到40%的页面加载时间,那不值得吗?本文中表达的观点是客座作者的观点,....