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

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

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

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

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

所以，基本上首页排版我们确定了：

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

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

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

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

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

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

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

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