浅谈我是如何将泪雪网多图片文章优化到极致

张子凡 网站策划运营 2018-01-02 15:53:26 阅读(...) 评论(15)

关于如何将网站图片优化到极致的问题已经又在泪雪博客详细的介绍过,包括做图片懒加载优化,也讨论过当网站 SEO 优化与用户体验发生冲突时该如何选择的问题,所以子凡今天就以我的泪雪网的实战优化经历来简单的分享,利用懒加载与图片压缩及自动裁剪提升网站加载速度和性能优化。

多图片优化思路

需求分析

首先来谈谈为什么泪雪网为什么迫切的需要将网站的图片优化做到极致,这个就不得不从泪雪网的定位和内容方向来思考,泪雪网目前专注于探索科技生活方式,致力于做电子产品或科技数码类的酷品分享及测评体验,其中文章中就无法避免出现较多的图片内容,了解一个产品最直观的就是图文方式,所以在很多的文章创作中我们都会在文章中适配大量的图片内容,有的是直接插入,有的就会使用相册图集功能进行插入,提升并达到文章的优质阅读体验和效果展示。

目前泪雪网虽然使用的是云服务器,但是为了降低服务器成本支出,其配置为 2G、1 核、2M,属于入门型配置,但是服务器放置了泪雪旗下的所有网站,包括泪雪博客,所以一天下来整个服务器都还是非常紧张的,其中最重要的是因为泪雪网拥有大量的图片直接放置在服务器,并未使用像七牛云、又拍云这类的第三方服务,虽然这两个都提供一些免费的流量,但是对于我们泪雪网来说可能就够用一两天吧,而目前泪雪网的盈利模式并不明显,所以不可能在服务器上做过大的投资,所以最后选择在服务器和网站上做深度的优化,依旧可以让网站非常流畅的运营。

图片优化方案

针对于网站整体的图片优化,必要的图片出现就是 LOGO 图片、首页大图、文章缩略图、编辑作者头像图片,整个页面上下左右基本都会有图片的显示位置,其中最多的就是文章的缩略图展现,有利于视觉冲击和吸引点击,下面子凡就详细的来分析一下泪雪网的图片优化方案和步骤。

图片本身的优化处理

泪雪网的各个页面中都会大量的出现文章缩略图,所以这些图片并不能直接调用原图片使用,所以这些缩略图都是经过合适大小的裁剪、质量压缩后再进行网站中的实际使用,不然直接引用原图可能一张图片就是几百字节或者一两兆的大小,并且图片也会被 css 控制变形,不仅仅占用网络带宽还影响用户体验和整体网站效果。由于泪雪网对图片的处理子凡用了一些特色的方式方法,所以并不是很方便透露。

泪雪网首页截图

不过大家对于图片的优化和处理可以通过服务器安装图片处理组件实现,同样也可以使用像七牛、又拍等第三方服务,甚至可以用一些开源的第三方库,如 WordPress 开发者喜欢使用的 timthumb.php 来做图片的缩略图处理。

图片懒加载优化处理

泪雪网的首页就子凡个人审美来看,算是非常不错的布局和结构化展现了,并没有想传统的门户布局,把内容堆得过于繁多,因为泪雪网目前的更新力度并不是非常大,所以整体的页面设计偏向于博客或者自媒体风格,这样的目的就是为了便于用户能够最直观的看到最新更新已经我们置顶推荐的四篇文章。

所以首页顶部的图片主要是有这四张置顶文章的缩略图,在之前“网站该如何做好首屏的打开加载速度优化?”的文章中就说到过关于网站首屏的优化,所以为了保证网站首屏的加载效果和速度,所以顶部的 LOGO 和这四篇推荐文章并没有做懒加载。

其中图片优化的重点就是具体的左侧文章列表和侧边栏的文章缩略图,所有的都做了图片的懒加载。以此来达到网站打开时将服务器带宽都给予了首屏页面的载入,减少了服务器带宽资源的浪费。

由于泪雪网的分类页面和标签页面主要内容都与首页文章列表一致,所以就不用过多的介绍,同样做得是懒加载,就没有其它什么好说的了,下面子凡必须针对文章内多图片优化详细的分析一下。

文章内容多图片优化方案

终于说到今天的重中之重了,前面的内容其实都算是为了本文的完整性而简单写的,而且大多数网站对于上面子凡说得也都能非常容易的做到,而对于文章内的多图片或者有大量图片的优化却做得不是非常到位,来看看子凡是怎样的一个优化思路吧!

子凡作为一个专业的 SEOer,我们要做图片的优化,自然离不开对搜索引擎方面的研究,看过子凡前面写的“解析网站该如何做好搜索引擎结果缩略图优化”文章就应该知道,搜索引擎是会自动抓取文章中的图片来适配搜索结果页面的缩略图,所以对于文章中的图片优化就不能全部做懒加载。

通过子凡对搜索引擎的观察不难发现,普通文章的搜索展现结果有三种可能,一种是有缩略图,一种是单张缩略图,还有一种就是四张缩略图或者三张缩略图的显示结果,单张缩略图搜索结果为最常见的,多张图片展示的搜索结果在三大搜索引擎中都比较少。

搜索引擎多图片显示结果

所以为了保证搜索引擎蜘蛛抓取到足够的图片,我们将泪雪网的第 5 张图片开始做的懒加载,减少了某些文章一次性载入过多的图片导致页面很难加载完成的问题,也不影响搜索引擎的正常抓取。

另外还有一点的是,文章中的图片还可以做一个优化,虽然恨得文章内容图片都做了自适应,但是不排除有些图片确实过大,为了防止文章中插入一些像素过大的图片流量费带宽和网络,所以还可以判断图片宽度超过多少像素后自动裁剪,尽可能的做到了图片方面的深度优化和网站的整体打开速度。

总结

以上便是子凡对泪雪网多图片深度优化的一些解决方案,希望能够帮助到那些可能和子凡的网站有一样境遇的朋友,同样可以在低配服务器上游刃有余的跑一个多图片的站点,真正的极致就是在不浪费资源的情况下依旧可以做得很好,至少子凡觉得通过一番优化后,网站的整体速度已经非常的棒了,这就是我心中的极致追求。

除非注明,否则均为泪雪博客原创文章,转载请以链接形式标明本文地址

本文链接:https://zhangzifan.com/multi-picture-seo.html

发表评论

  1. 访客
    1楼
    访客 6个月前 (01-27)

    写的很好,不过现在优化很难做了,百度的算法经常更新,太累了

  2. 来语直搜
    2楼
    来语直搜 6个月前 (01-09)

    几年前在一篇讨论网站域名的博文里看到“泪雪网”,居然记住了。

    • 张子凡
      回复
      张子凡 6个月前 (01-10)
      回复 @来语直搜 :确实在几年前有写过一篇关于域名的文章,没想到拿泪雪网来举例还有人记得,真好
  3. 大事记
    3楼
    大事记 6个月前 (01-06)

    懒加载\自动裁剪的功能很喜欢,第三方七牛的听说过没用过,我记得阿里好像也有这种os储存附件的,现在我倒是对你所说的那个小技术感兴趣了。

    • 张子凡
      回复
      张子凡 6个月前 (01-06)
      回复 @大事记 :最简单也是WordPress最常用的就是用timthumb.php来做图片的裁剪,你的应该不是WordPress,只要php也都是可以的
  4. 明月登楼
    4楼
    明月登楼 6个月前 (01-04)

    不错,好文章,干货呀!

    • 张子凡
      回复
      张子凡 6个月前 (01-05)
      回复 @明月登楼 :都是自己经历实战性的东西,应该还有有点点东西吧,不然也太对不起自己的折腾了。
  5. 米粒博客
    5楼
    米粒博客 6个月前 (01-03)

    很好的分享,感谢!

  6. 优质香港空间
    6楼
    优质香港空间 6个月前 (01-03)

    图片优化的关键作用就在于解决和提高网站的美观和网页访问速度,增加对SE和用户的友好度

    • 张子凡
      回复
      张子凡 6个月前 (01-05)
      回复 @优质香港空间 :其主要目的是提升网站的加载速度,增强用户体验了,至于SEO嘛那都是尽可能坚固罢了,用户绝对第一。
  7. 死磕侠
    7楼
    死磕侠 7个月前 (01-02)

    我问个题外话吧,子凡是否用了Markdown进行写作?

    • 张子凡
      回复
      张子凡 6个月前 (01-05)
      回复 @死磕侠 :我都用txt写作的,因为我需要的快速干净的输出,不需要边写变排版,那样反而会影响写作思路,大概就这样了。
      • 刘祥林
        回复
        刘祥林 6个月前 (01-09)
        回复 @张子凡 :+1我也是
        • 张子凡
          回复
          张子凡 6个月前 (01-09)
          回复 @刘祥林 :祥林 你不准备给我打赏试试看?
  8. 访客
    8楼
    访客 7个月前 (01-02)

    讲解的很详细,谢谢了。