讓你的WordPress小站搭上WebP的快車

Google家開源的WebP圖形編碼格式出來已經好幾年了,瀏覽器支援率現在也是非常高的了(現代瀏覽器就Safari不支持)。相比於常用的JPEG和PNG,使用WebP可以節省高達80%的空間(在今天行動網路的時代,這意味着更快的載入)。

當然了,還是不想拋棄堅守Internet Explorer和蘋果家Safari的用戶,所以我們需要一個聰明的外掛程式,在支援WebP的瀏覽器上使用WebP圖形,不支援的話則提供JPEG或者PNG檔案。隨便Google到的一個頗爲流行的免費開源程式WebP Express就是這輛帶我們上路的快車。

在WordPress後臺Plugins頁面搜尋下載好WebP Express並啓用。如果你使用的是Apache,它開箱即可用。如果你使用的是nginx,則需要按照說明稍微配置一下。這裏用的是nginx,而我選的是簡單的CDN Friendly選項,然後批量將全部圖形檔案轉換成了WebP(原始檔案是不會動的)。Alter HTML那個選項一定要開啓不然什麼也不會發生……

用此前的日本兩京遊記做了一下對比,未啓用掛件的時候頁面大小爲1.8MB,加載用時4.32秒。啓用掛件後頁面大小減少到了1.4MB,加載用時3.52秒。對比提升效果還算明顯,當然了,那篇文章裏面照片很多,一般的文章頁面效果估計甚微。

Use npm packages in QML

I’ve been trying to code up some nice GUI for a hobby project which was done in JavaScript (Node.JS). I’ve looked at a few options that I have

  1. Use the not-yet-stable NodeGUI
  2. Go Web and use Electron
  3. Rewrite the core in Python or C++ to use Qt
  4. Use QML which has limited support for JavaScript

I’ve explored the option 1, however, I soon ran into the problems with the Model/View/Delegate architecture which means I would have to implement native plugins/add-ons in order to use ListView. Not to mention the framework itself is still heavily under development.

As for option 2, I’m not a web frontend engineer and personally I much prefer something that is native (or looks and feels native at least). For the third option, it feels a bit overkill but it is a possible way out.

Luckily I don’t have to do the re-implementation, because I’ve managed to get the core functionality bundled into a single JS file which works flawlessly in the QML environment. Before I start diving into the details on how you can make your npm packages work in QML, I have to emphasise that there are many limitations in the QML environment and it’s very likely that only a small subset of the npm package that you’re interested in is going to work.

Continue reading “Use npm packages in QML”