记录于2019.8.22
博客主题:handsome
插件:

  1. AMP-MIP
  2. AutoTags
  3. Copyright
  4. SmartSpam
  5. TopLamuLeimu

下面是对typecho的markdown部分显示优化:


下面是typecho伪静态处理:


手机样式优化:


目前使用谷歌网页性能优化工具PageSpeed InsightsGtmetrix的跑分如下:



1.删除多于引用

Gtmetrix的Yslow检测结果

Gtmetrix的Yslow检测结果

提示说部分css、js没有设置缓存,并且蕾姆插件[TopLamuLeimu]的jquery和主题本身的jquery重复加载。于是先把蕾姆的jquery干掉。

勾选蕾姆的禁用jquery。好然后查看发现蕾姆的css和js都非常小,但是却占用了一次请求,所以干脆直接将其css,和js合并到主请求。

2.开启gzip

在网站的nginx中添加配置:

 ### 这里开始gzip配置
    gzip on;
    gzip_disable "msie6";

    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types image/x-icon text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    ### 这里结束gzip配置

改完之后的得分如下:
GTmetrix

GTmetrix

google
google


3.上cloudflare

发现很慢,放弃了

cloudflare配置

4.修改jquery加载位置

笔者发现,handsome主题中header加载了一个全局jquery,然而header中并没有js操作。因此在渲染的时候这个js可以说是额外加载的,会浪费请求资源,因此放到底部等页面渲染完成再加载更为合适。
复制header中的

<?php $PUBLIC_CDN_ARRAY = unserialize(PUBLIC_CDN); ?>
<script src="<?php echo PUBLIC_CDN_PREFIX.$PUBLIC_CDN_ARRAY['js']['jquery'] ?>"></script>

到footer加载js的最前面,因为许多js都依赖jquery,最后再删除header中的

<script src="<?php echo PUBLIC_CDN_PREFIX.$PUBLIC_CDN_ARRAY['js']['jquery'] ?>"></script>

同时在cross.php,page.php,category/image.php中,底部加载js前插入这两句话。
~##5.优化css~
由于这段样式非常少,所以可以直接内联减少请求,删除header中的

<link rel="stylesheet"href="<?php echo STATIC_PATH; ?>css/features/code/<?php echo $code  ?>.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag  ?>"type="text/css">

添加以下代码到header

.hljs{display:block;overflow-x:auto;padding:.5em;background:#3f3f3f;color:#dcdcdc}.hljs-keyword,.hljs-selector-tag,.hljs-tag{color:#e3ceab}.hljs-template-tag{color:#dcdcdc}.hljs-number{color:#8cd0d3}.hljs-attribute,.hljs-template-variable,.hljs-variable{color:#efdcbc}.hljs-literal{color:#efefaf}.hljs-subst{color:#8f8f8f}.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-title,.hljs-type{color:#efef8f}.hljs-bullet,.hljs-link,.hljs-symbol{color:#dca3a3}.hljs-built_in,.hljs-builtin-name,.hljs-deletion,.hljs-string{color:#cc9393}.hljs-addition,.hljs-comment,.hljs-meta,.hljs-quote{color:#7f9f7f}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}#post-content pre:before{background:#4f4f50;color:#999}#post-content pre{background:#3f3f3f;color:#fff}

6.minify_css

由于主题可以自定义外观,自定义css,导致头部会插入臃肿的css,因此最小化css可以缩减html文件大小。
使用方式如下:

  • 在header中新添加一个方法
<?php
    function minifyCss($css) {
      // some of the following functions to minimize the css-output are directly taken
      // from the awesome CSS JS Booster: https://github.com/Schepp/CSS-JS-Booster
      // all credits to Christian Schaefer: http://twitter.com/derSchepp
      // remove comments
      $css = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css);
      // backup values within single or double quotes
      preg_match_all('/(\'[^\']*?\'|"[^"]*?")/ims', $css, $hit, PREG_PATTERN_ORDER);
      for ($i=0; $i < count($hit[1]); $i++) {
        $css = str_replace($hit[1][$i], '##########' . $i . '##########', $css);
      }
      // remove traling semicolon of selector's last property
      $css = preg_replace('/;[\s\r\n\t]*?}[\s\r\n\t]*/ims', "}\r\n", $css);
      // remove any whitespace between semicolon and property-name
      $css = preg_replace('/;[\s\r\n\t]*?([\r\n]?[^\s\r\n\t])/ims', ';$1', $css);
      // remove any whitespace surrounding property-colon
      $css = preg_replace('/[\s\r\n\t]*:[\s\r\n\t]*?([^\s\r\n\t])/ims', ':$1', $css);
      // remove any whitespace surrounding selector-comma
      $css = preg_replace('/[\s\r\n\t]*,[\s\r\n\t]*?([^\s\r\n\t])/ims', ',$1', $css);
      // remove any whitespace surrounding opening parenthesis
      $css = preg_replace('/[\s\r\n\t]*{[\s\r\n\t]*?([^\s\r\n\t])/ims', '{$1', $css);
      // remove any whitespace between numbers and units
      $css = preg_replace('/([\d\.]+)[\s\r\n\t]+(px|em|pt|%)/ims', '$1$2', $css);
      // shorten zero-values
      $css = preg_replace('/([^\d\.]0)(px|em|pt|%)/ims', '$1', $css);
      // constrain multiple whitespaces
      $css = preg_replace('/\p{Zs}+/ims',' ', $css);
      // remove newlines
      $css = str_replace(array("\r\n", "\r", "\n"), '', $css);
      // Restore backupped values within single or double quotes
      for ($i=0; $i < count($hit[1]); $i++) {
        $css = str_replace('##########' . $i . '##########', $hit[1][$i], $css);
      }
      return $css;
    }
    
    ?>
  • <?php echo Content::exportCss($this) ?>修改为<?php echo minifyCss(Content::exportCss($this)) ?>

7.优化图片大小

将handsome/usr/img/sj2里面的图片全部无损压缩下,有需要的朋友可以直接从我的博客保存替换。

8.网站预加载

见instantPage
最后测得的跑分如下


Last modification:August 30th, 2019 at 10:56 am
如果觉得我的文章对你有用,请随意赞赏