WordPress从速度方面考虑重新设计首页

4.3
(4)

是的,没错,本站又换了首页排版方式,为的是在速度上更快一点,还要更加注重内容体现等方面。因此去除了之前的卡片列表文章,重新更换为左侧缩略图右侧文章标题描述的默认列表模式。本文将从网站速度方面考虑,告诉你如何设计一个加载更快、内容更充足的Wordpress首页模板。

Wordpress从速度方面考虑重新设计首页

首先,要明确一个道理,不能为了速度,去掉首页的各种图片。所以,这里该有的推荐文章、专题文章、文章缩略图列表不能少。

其次,为了内容上的充足,即首页显示更多的内页文章。原则上,在文章列表结尾应该列出更多的文章分类列表,而这一部分就没必要再显示缩略图了。因为前面的文章列表可能会包含后面文章分类列表里的文章缩略图。因此,文章分类列表一般设置为纯文字形式的列表,推荐使用双列布局。如果文章分类为奇数,可以不同分类文章显示不同的文章数目,也能使得两列分类文章刚好对齐。

Wordpress从速度方面考虑重新设计首页

由于,我这里用的是justnews主题,它可以根据自己的想法随意设计首页,支持可视化编辑器,非常好评。喜欢的,可以点击点击购买justnews主题

Wordpress从速度方面考虑重新设计首页

所以,基本上首页排版我们确定了:

  • 几张轮播图组成的推荐文章
  • 文章专题
  • 缩略图形式的文章列表
  • 纯文字形式的分类文章列表

接下来,说下如何从CSS & JS加载的方面提高速度。毕竟让你精简CSS & JS也是难为你。那么这里给出一个宗旨:CSS提前加载、JS最后加载。即,CSS放在head区域,JS放在footer区域。此外,如果你有使用又拍云之类的云存储,那么你可以考虑把JS放于云存储,但别把CSS放于云存储。原因如下:

访问网站,dns已经解析生效,顺理下载各种CSS资源。如果这个时候头部引入了云存储的CSS文件,还要去解析云存储,才能拿到CSS文件。这个过程,会影响首屏时间。

再有,要引入图片延迟加载功能,提前加载的图片应该在本地,而原图应该放在云存储。

经过这些CSS & JS处理,首屏时间可以缩短大概200ms左右。

前文中,我们提到文章列表要采用缩略图的模式。那是因为缩略图尺寸小,占用空间小,不会对首屏时间有影响。如果你采用卡片模式的文章列表,卡片一般设计上,使用的是背景图片(即文章区域背景设置为文章图片,而这个图片不是缩略图),会影响页面后续加载速度。而实际上,卡片模式也没有什么好处,唯一的好处只是对于轮播图等大图有好处。而对于普通的文章列表,没必要用卡片模式。

这里,你可以通过右击打开文章列表的缩略图,看看图片尺寸是不是裁剪过的,如果不是的话,你就要考虑更换成裁剪过的缩略图了。如果发现右击没有打开图片的选项,那么你就是采用了背景图片的方式,需要F12查看图片链接。

最后,提醒一下,justnews主题中的栅格布局,可以使得分类文章列表成两列布局。

共计4人评分,平均4.3

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

原创文章,作者:古哥,如若转载,请注明出处:https://iymark.com/website/wordpress-home-design.html

发表评论

登录后才能评论
本站APP
本站APP
京东好物
分享本页
返回顶部
如果觉得文章对你有帮助,请在文末点赞支持本站