全站HTTPS及速度优化方案

全站HTTPS

按照惯例开启了全站HTTPS。申请ssl证书这里不再叙述。首先是Nginx配置代码:


 server {
  listen 80;
  listen 443 ssl http2;
  ssl_certificate /usr/local/nginx/conf/ssl/helingqi/com.crt;
  ssl_certificate_key /usr/local/nginx/conf/ssl/helingqi/com.key;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
  ssl_prefer_server_ciphers on;
  ssl_session_timeout 10m;
  ssl_session_cache builtin:1000 shared:SSL:10m;
  ssl_buffer_size 1400;
  add_header Strict-Transport-Security "max-age=15768000";
  ssl_stapling on;
  ssl_stapling_verify on;
  server_name www.helingqi.com helingqi.com;
  access_log /data/wwwlogs/www.helingqi.com_nginx.log combined;
  index index.html index.php;
  include /usr/local/nginx/conf/rewrite/typecho.conf;
  root /home/wwwroot/helingqi;
  if ($ssl_protocol = "") { return 301 https://$server_name$request_uri; }
  if ($host != www.helingqi.com) {  return 301 $scheme://www.helingqi.com$request_uri;  }
  location ~ [^/]\.php(/|$) {
    #fastcgi_pass remote_php_ip:9000;
    fastcgi_pass unix:/dev/shm/php-cgi.sock;
    fastcgi_index index.php;
    include fastcgi.conf;
  }
  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
    expires 30d;
    access_log off;
  }
  location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
  }
  location ~ /\.ht {
    deny all;
  }
}

以上#号为注释说明,Apache看这儿 Apache服务器 SSL安装与配置

评论头像配置

系统原生评论不存在小黄锁问题。这里的评论以多说为例。
这里需要准备两个七牛空间。
进入七牛后,选择“空间设置”–“基本设置”,在“镜像源”里分别输入下列2个网址:

镜像源: http://himg.bdimg.com/
镜像源: http://ds.cdncache.org/

目前百度和多说的头像还不支持HTTPS,然后域名设置”–“HTTPS”,然后申请一个HTTPS网址

再下载多说js文件(embed.js)
利用工具格式化,方便阅览。
搜索 avatarUrl: function(e),对照替换以下的内容:

多说配置

avatarUrl: function(e) {
                if (document.location.protocol == "https:") {
                if (e.avatar_url) {
                    e.avatar_url = e.avatar_url.replace(/^http\:\/\//, "https://");
                 e.avatar_url = e.avatar_url.replace(/himg\.bdimg\.com/, "xxx.qnssl.com");//镜像源是baidu的https域名
                    e.avatar_url = e.avatar_url.replace(/ds\.cdncache\.org/, "ofa8iijro.qnssl.com");//镜像源是cdncache的https域名,这里记得写你的七牛多说空间
                   e.avatar_url = e.avatar_url.replace(/img\d+\.douban\.com/, "img2.doubanio.com");//豆瓣无需镜像
                    e.avatar_url = e.avatar_url.replace(/app\.qlogo\.cn/, "app.qlogo.cn");//镜像源是qlogo的https域名
                    e.avatar_url = e.avatar_url.replace(/tp\d+\.sinaimg\.cn/, "tva2.sinaimg.cn");//镜像源是sina的https域名
    } else {
        rt.data.default_avatar_url = "https://cdn.a696.com/images/img.png";//评论区默认头像的地址,请自行修改
    }
}
return e.avatar_url || rt.data.default_avatar_url
            }

注意:avatarUrl: function(e){...}后面有个英文逗号.

至于表情要么反代,要么替换。我是替换的,因为“表情”丑啊。。
多说中插入自定义表情请看这儿

到这儿,基本上就完成的差不多了。不过检查数据库里面那些引用的是http资源。将其替换为https。

附上更新语句一枚:update 表名 set text=realpace(text,'http','https')

括号内,text为字段名,http为原字符,https为要替换的字符。

网站速度优化

  1. 网站环境:LNMP
  2. 图床:七牛
  3. CDN:阿里云CDN
  4. DNS 解析:阿里云云解析 DNS (PS:最便宜的版本)
  5. 干货 instantclick.min.js 脚本

主要说下第5个,干货。

InstantClick工作原理

InstantClick使用pushState和Ajax(pjax)来实现,只替换<body>和头部的<title>,浏览器不必重新解析编译页面,这样在页面跳转的过程中,浏览器不会闪一下白屏,看上去页面在瞬间就加载完成了。测试鼠标点击延迟

InstantClick的安装

将以下代码放在你的js脚本处就可以了。

<script src="//cdn.bootcss.com/instantclick/3.0.1/instantclick.js"></script>
<script data-no-instant>InstantClick.init();</script>

按理说脚本就可以正常工作了。但是InstantClick也可能会导致出现白屏的情况,官方给出了例子,解决了和Google Adsense之间的冲突。就是在<script>中加data-no-instant

附本站所用到的instantclick脚本

<script data-no-instant>
InstantClick.on('change', function(isInitialLoad) {
  if (isInitialLoad === false) {
    if (typeof Prism !== 'undefined') Prism.highlightAll(true,null);
    if (typeof MathJax !== 'undefined') // support MathJax
      MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
    if (typeof prettyPrint !== 'undefined') // support google code prettify
      prettyPrint();
    if (typeof _hmt !== 'undefined')  // support 百度统计
      _hmt.push(['_trackPageview', location.pathname + location.search]);
    if (typeof ga !== 'undefined')  // support google analytics
        ga('send', 'pageview', location.pathname + location.search);
if (typeof DUOSHUO !== 'undefined') //多说
DUOSHUO.EmbedThread('.ds-thread');

  }
});
InstantClick.init();
</script>

到此,优化算结束了,仅一家之谈,切勿较真。

本站采用「署名 4.0 国际(CC BY 4.0)」创作共享协议,转载请注明本文出处及链接。

Tags: Nginx配置,全站HTTPS,ssl,多说,自定义表情,网站速度you'hua,速度优化,InstantClick

头像
游客
发表评论
  1. 厉害了

  2. 哇哇哇哇 好牛逼,来给个电话号码我们交个朋友呀小红脸.png