I wrote a script how to make fonts.googleapis.com not bring down the load speed of WordPress for visitors from China.
Here is the link: Google Font Api Proxy for WordPress
To use this proxy, I have to edit themes’ files even the script-loader.php by WordPress, that’s a disaster for upgrading.
Another problem is, I have SSL enabled on my blog. Every time I visit my blog, Chrome notices me that
The page at ‘https://sskaje.me/’ was loaded over HTTPS, but displayed insecure content from ‘/p/themes.googleusercontent.com/static/fonts/opensans/v6/xxxxxxxx.woff’: this content should also be loaded over HTTPS.
The SSL green lock icon in the address bar is always be ‘warned’.
The new solution is using nginx’s substitution modules.
My blog is running on a Ubuntu 13.10, nginx 1.41, config options are below:
|
1 2 3 4 |
root@sskaje:~# nginx -V nginx version: nginx/1.4.1 (Ubuntu) TLS SNI support enabled configure arguments: --prefix=/usr/share/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-client-body-temp-path=/var/lib/nginx/body --http-fastcgi-temp-path=/var/lib/nginx/fastcgi --http-log-path=/var/log/nginx/access.log --http-proxy-temp-path=/var/lib/nginx/proxy --http-scgi-temp-path=/var/lib/nginx/scgi --http-uwsgi-temp-path=/var/lib/nginx/uwsgi --lock-path=/var/lock/nginx.lock --pid-path=/run/nginx.pid --with-pcre-jit --with-debug --with-http_addition_module --with-http_dav_module --with-http_geoip_module --with-http_gzip_static_module --with-http_image_filter_module --with-http_realip_module --with-http_stub_status_module --with-http_ssl_module --with-http_sub_module --with-http_xslt_module --with-ipv6 --with-mail --with-mail_ssl_module --add-module=/build/buildd/nginx-1.4.1/debian/modules/nginx-auth-pam --add-module=/build/buildd/nginx-1.4.1/debian/modules/nginx-dav-ext-module --add-module=/build/buildd/nginx-1.4.1/debian/modules/nginx-echo --add-module=/build/buildd/nginx-1.4.1/debian/modules/nginx-upstream-fair --add-module=/build/buildd/nginx-1.4.1/debian/modules/ngx_http_substitutions_filter_module |
At the very beginning, I tried ‘ngx_http_sub_module‘, but only one sub_filter can be used in each directive, and regexp is not supported.
Then comes ngx_http_substitutions_filter_module, another nginx module and a better choice.
First, set up two proxy location for fonts.googleapis.com and themes.googleusercontent.com, turn off Accept-Encoding to disable compression.
Then, set subs_filter_types to support text/css.
At last, write regex substitutions, with gr flags on.
Following configurations are added to the end of my server{} directive.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
location ~ ^/proxy/google/apis/fonts { rewrite ^/proxy/google/apis/fonts/(.+)$ /$1 break; proxy_pass http://fonts.googleapis.com:80; proxy_set_header Host "fonts.googleapis.com"; proxy_set_header Accept-Encoding ""; } location ~ ^/proxy/google/themes/ { rewrite ^/proxy/google/themes/(.+)$ /$1 break; proxy_pass http://themes.googleusercontent.com:80; proxy_set_header Host "themes.googleusercontent.com"; proxy_set_header Accept-Encoding ""; } subs_filter_types text/html* text/css; subs_filter (\'|\")(https:|http:|)//fonts.googleapis.com/css $1/proxy/google/apis/fonts/css gr; subs_filter (url\()http://themes.googleusercontent.com/ $1/proxy/google/themes/ gr; |
UPDATE[2014-01-12]:
If you have cache plugin like ‘WP Super Cache’, make sure you have turned compression off in the plugin setting pages.
For ‘WP Super Cache’, setting locates at Settings->WP Super Cache Settings->Advanced->Compress pages so they’re served more quickly to visitors. (Recommended).
You can enable compression from your http server, e.g. nginx, apache httpd.