Litespeed Cache设置网站优化之网页优化(Page Optimization)

Page Optimization即网页优化是Litespeed cache中非常重要的一个部分，完成网页优化之后，页面加载速度可以有非常大的改进，我可以肯定的告诉你在google的pagespeed insight里面会非常好看。

Litespeed Cache的网页优化功能主要是对网页的文件进行压缩，包括CSS、JS和HTML，里面需要设置的东西有点多，可以跟着一项一项的来设置，也不会很难。如果E文不太懂的话，你可以在WordPress后台切换成汉语，然后根据插件的建议先设置。

CSS设置

CSS是一种网页语言，叫做层叠样式表，你只要知道它管理网站的页面的整个布局就行了，相当于给网站化妆美化等工作，比如一个按钮你想使它变大缩小，改变颜色，添加阴影都是开这种完成。CSS文件是可以被压缩来改善加载速度的。

最小化内部CSS Minify – 内部CSS其实就是你的本地css，直接点击ON(开启)。
合并内部CSS Combine – 合并CSS文件和内联CSS代码，内部CSS文件一般不止一个，不同的页面或者用途就会有不同的css文件，这个功能就是将这些css文件合并一起，不过这个功能可能导致网页错误，我的网站是没问题的。
- Generate UCSS – 使用QUIC.cloud在线服务生成唯一的CSS，也就是把上面合并的CSS合并后再生产这个文件，需要合并内部CSS开启才有效，这个功能也可能导致网页错误，我的网站就如此，所以我自己没有开启。你可以开启之后，清除全部缓存测试网页，如果没影响就可以保持开启。
- UCSS Inline – 内部唯一CSS，这个我网站导师没问题，所以打开了，不过这个会绕过异步加载CSS。
合并外部和内部CSS (CSS Combine External and Inline) – 有内部就有外部代码，比如你安装了一些插件，还是同理，开启后有问题就关闭吧。
异步加载CSS (Load CSS Asynchronously) – 异步加载就相当于延迟加载，网站可以先加载内容，再加载CSS样式，这样就可以优化加载速度。
- CCSS Per URL – 这个是每一个页面分别建立一个CCSS文件用于异步加载，建议OFF(关闭)，关闭后就不再每个页面建立CCSS，而是同一类建立一个CCSS文件
- 内部CSS异步库Inline CSS Async Lib – 这个会建立一个内部异步CSS库以避免渲染阻塞，ON开启就好了
字体显示优化Font Display Optimization – 将此选项设置为在缓存CSS之前将font-display附加到所有@font-face规则，以指定下载时字体的显示方式。建议使用Swap。

JS设置

JavaScript(简称“JS”) 是一种网络的高级脚本语言，作为开发Web页面的脚本编程语言而出名，常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果，比如网站上点击提交什么内容等等交互都是靠这个语言来解决。

Litespeed Cache中JS设置并不多，因为过多的设置可能导致网站无法运行。

最小化内部和外部JS Minify – 点击ON(开启)。
合并内部和外部JS Combine – 类似合并CSS，这个功能也可能导致网页错误，我开启这个功能，我的网站是没问题的。
合并外部和内部JS (JS Combine External and Inline) – 还是同理，开启后有问题就关闭吧。
延迟加载JS (Load CSS Deferred) – 网站可以先加载内容，再加载JS代码，这样就可以优化加载速度。此处有三个选项，建议选择Deferred。

HTML设置

HHTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。静态网页的主要基础组成部分就是HTML了，这么说吧HTML是一个房子的框架，那么CSS就是装修，JS就是房子的功能以及里面人员进出所需要的所有互动工具。

HTML设置项还是挺多的，不要慌，一步一步来

最小化HTML Minify – 直接点击ON(开启)吧，HTML外部的话是iframe了，直接嵌入网页了，所以这里没有内外部分。
*DNS预读取DNS Prefetch – 预读取DNS可降低访客的延迟，比如一些google的东西，google字体，google标签，google分析等等，我预置了一些链接，可以拿去使用。
DNS预读取开关DNS Prefetch Control – 自动DNS预读取开关，打开后，会对所有页面有效，建议开启。
HTML延迟加载选择器HTML Lazy Load Selectors – 这个需要你自己的懂得相关得知识不懂的话就跳过吧。
移除查询字符串Remove Query Strings – 此设置从静态资源中去除查询字符串。带有查询字符串的静态资源可能不会被浏览器和代理服务器缓存，删除字符串允许它们被缓存，这意味着更快的页面加载，建议开启。
异步加载Google字体Load Google Fonts Asynchronously – 需要开启上文中的异步加载CSS开关才有效，和异步加载CSS一样，先加载网页内容，再加载字体，请注意是字体，不是文字，字体只是文字外观。建议开启。
移除google字体Remove Google Fonts – 像我这种中文网站，可以开启，如果你是英文网，需要特殊的google字体，不建议开启。
移除wordpress Emoji表情Remove WordPress Emoji – 这些emoji就像我们聊天时候的默认表情一样，其实网站用得不多，开启和关闭影响不大。
移除Noscript标签Remove Noscript Tags – 这个选项将删除HTML中所有<noscript>标签，可以开启。

DNS预读取，这里有些可用链接，如果你用到以下链接中的服务你可以直接复制使用，如果有其他方面的也可以添加进去，比如facebook之类的。

https://fonts.googleapis.com
https://fonts.gstatic.com
https://ajax.googleapis.com
https://apis.google.com
https://google-analytics.com
https://www.google-analytics.com
https://ssl.google-analytics.com
https://www.google.com
https://tpc.googlesyndication.com
https://www.googletagservices.com
https://pagead2.googlesyndication.com
https://www.gstatic.com
https://adservice.google.com
https://googleads.g.doubleclick.net
https://www.googletagmanager.com

媒体设置和排除

对于此处的媒体设置主要是指，图片或者其他媒体文件的延迟加载设置，我另外有文章单独介绍：Litespeed cache给网站优化加速之图片延迟加载(Lazy Load)，这里就不详细说明了。

本地化和调整(Localization & Tuning)

本地化是将外部资源本地化，比如当你添加google analytics代码的时候就有外部文件产生，有时候通过讲这些外部文件复制到本地，然后再通过CDN等一些缓存，可以加快网站的加载速度。

Gravatar缓存 Cache – Gravatar是全球最大的可通用头像网站，在这个网站上添加了你的头像，只要你在其他网站上使用了此网站注册的邮箱，那么其他网站可以同步加载你在Gravatar上添加的头像，这里就是把Gravatar的头像同步到本地的做法，建议ON(开启)。
- Gravatar缓存计划 Cache Cron – ON(开启)
- Gravatar缓存TTL Cache TTL – 保持默认604800
本地化资源Localize Resources – 这里将本地化大部分外部资源，如果你的主机不是很大并且你又没使用CDN，这一项建议关闭。

Litespeed Cache网页优化的最后一项叫Tuning，翻译是叫调整，我也不知道正不正确，这里面的东西不懂的话就不需要去改变，以免造成网站的其他问题。