2016-04-15

最近发现Wordpress有时候加载的特别慢,于是就想办法找了下原因。之前听网上说是因为wordpress用的是Google的字体库,而且是每次都要加载,导致访问慢的,于是当时装了个Disable Google Fonts的插件,禁用了Google字体,然后装了一个Useso take over Google插件,将字体文件改为360托管的字体库,这样就可以访问快点了。当时的效果的确挺好的,结果最近在使用的时候又发现网站访问慢了,用Chrome查了下资源加载的情况,发现访问useso的字体库的时间特别的长。这时候改用Google字体的时候反而更快了。。。这就十分令人惆怅了,有时候用useso的快,有时候用google的快,真的挺麻烦的。后来想想干脆把这个文件下到服务器上不就好了么。。。于是就倒腾出了下面的办法,将当前主题的字体文件下载到了服务器上。

首先在源代码中找到加载字体文件的位置,在博客首页的源代码中找到了下面这行:

1
<link rel='stylesheet' id='baskerville_googleFonts-css' href='//fonts.googleapis.com/css?family=Roboto+Slab%3A400%2C700%7CRoboto%3A400%2C400italic%2C700%2C700italic%2C300%7CPacifico%3A400&ver=4.5' type='text/css' media='all' />

其实搜索fonts就可以找到了这行。根据这行,我们晓得他引用了googleapis的字体包,命名为’baskerville_googleFonts-css’,而’baskerville’事实上就是我当前的主题名。

然后我们需要在后台找到上面id对应的那个超链接的位置。打开wordpress的根文件夹,直接搜索’fonts.googleapis.com’这个关键字:

1
$find . -type f |xargs grep fonts.googleapis.com

查找结果为:

1
2
3
4
5
./wp-admin/includes/class-wp-press-this.php: $open_sans_font_url = ',' . add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
./wp-content/themes/baskerville/functions.php: wp_register_style('baskerville_googleFonts', '//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400italic,700,700italic,300|Pacifico:400' );
./wp-content/themes/baskerville/functions.php: $font_url = '//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400italic,700,700italic,300';
./wp-includes/js/tinymce/plugins/compat3x/css/dialog.css:@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=latin-ext,latin");
./wp-includes/script-loader.php: $open_sans_font_url = "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets";

这样我们就找到了所在文件的位置。大概看一下,实际上用处比较大的是第二行的那串在主体中的定义(对比第一步的内容)(./wp-content/themes/baskerville/functions.php的内容)(其余都是写无关紧要的插件所用的字体)。很明显可以看出来,接下来我们只要把后面那个url换成本地的字体包就可以了。

现在就来下字体包,打开第一步中的那个链接,可以看到是下面的内容:

1
2
3
4
5
6
7
8
9
10
11
/* latin */
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://fonts.gstatic.com/s/pacifico/v7/Q_Z9mv4hySLTMoMjnk_rCfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
......

发现是一段css,使用了很多的外部资源,下面我们就用一个爬虫来把他直接下下来并打包好:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#coding:utf-8
import urllib2,cookielib,sys,re,os,urllib
import numpy as np
 
#网站登陆
cj=cookielib.CookieJar()
opener=urllib2.build_opener(urllib2.HTTPCookieProcessor(cj))
opener.addheaders=[('User-agent','Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36))')]
urllib2.install_opener(opener)
 
path='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400italic,700,700italic,300|Pacifico:400'
request=urllib2.Request(path)
response=urllib2.urlopen(request)
 
html=response.read()
urls=re.findall(r'url\ ((.*?)\ )',html.replace('\n',' '))#由于这里排版会和latex冲突,所以在\和(,以及\和)之间加了空格,使用的时候要删掉
 
path='font_cache/'
 
if not os.path.exists(path):
os.mkdir(path)
for url in urls:
urllib.urlretrieve(url,path+url.split('/')[-1])#下载文件
 
for url in urls:
html=html.replace(url,url.split('/')[-1])#更新改css文件
 
font=open(path+'font-css','w+')
font.write(html)#保存

这样就生成了一个font_cache文件夹,在这里有所有下好的字体文件以及更新新后的css文件

最后把这个文件上传到wordpress的根目录下(放到其他目录有时候会没有权限访问,有点麻烦),然后将function.php中的那个url改成/font_cache/font-css(相对于wordpress的根)即可。(记得备份初始文件防止改错。。。。)

关于WordPress中字体加载慢的问题解决方案(转)的更多相关文章

  1. androidStudio中如何加载字体资源?

    在android中字体的格式总是不能尽善尽美的显示出来 ,  于是要求我们使用一些有美感的字体,加载的方式(就像HTML的字体一样),我们需要通过加载字体的方式来使用android中不曾提供的字体; ...

  2. 大量客户反映wordpress的网站打开巨慢,经分析发现,这些网站大都使用了google的字体服务,由于最近google的服务已经被大陆屏蔽,所以wordpress的网站打开时,会卡在字体加载上。

     一会你安装完wp,发现打开巨卡的话,看看这个帖子:http://bbs.myhostcn.com/thread-1026-1-1.html最近一段时间,大量客户反映wordpress的网站打开巨慢, ...

  3. iOS字体加载三种方式

    静态加载 动态加载 动态下载苹果提供的多种字体 其他 打印出当前所有可用的字体 检查某字体是否已经下载 这是一篇很简短的文章,介绍了 iOS 自定义字体加载的三种方式. 静态加载 这个可以说是最简单最 ...

  4. Mvc程序字体加载失败问题

    在我们开发的asp.net-mvc项目中,有时会出现字体加载失败的现象,但是一检查字体文件目录,发现文件目录都是存在的且有效的,这是为何呢?原来需要再web.config文件中添价少许配置代码就搞定. ...

  5. iOS 解决LaunchScreen中图片加载黑屏问题

    iOS 解决LaunchScreen中图片加载黑屏问题 原文: http://blog.csdn.net/chengkaizone/article/details/50478045 iOS 解决Lau ...

  6. 出现了内部错误-网站中X509Certificate2加载证书时出错

    今天给网站配置了加密证书文件,用类X509Certificate2加载证书文件时,一直报出现了内部错误,但是Demo中用控制台程序加载证书没任何问题 读取证书文件的语句: X509Certificat ...

  7. iOS App中数据加载的6种方式

    我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...

  8. APP中数据加载的6种方式-b

    我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...

  9. 某APK中使用了动态注册BroadcastReceiver,Launcher中动态加载此APK出现java.lang.SecurityException异常的解决方法

    在某APK中,通过如下方法动态注册了一个BroadcastReceiver,代码参考如下: @Override protected void onAttachedToWindow() { super. ...

随机推荐

  1. Codeforces 979 字符串强制N变换最多出现字母 DFS子树 暴力01字典树

    A /* Huyyt */ #include <bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #define mkp(a,b) ...

  2. SpringMVC @ModelAttribute详解

    被@ModelAttribute注释的方法会在此controller每个方法执行前被执行,因此对于一个controller映射多个URL的用法来说,要谨慎使用. 我们编写控制器代码时,会将保存方法独立 ...

  3. 获取当前国家与ip地址

    JS获取当前国家示例: <script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"& ...

  4. 也谈HTTP协议

    HTTP(HyperText Transfer Protocol,超文转移协议,超文本传输协议的译法并不严谨.) 一.网络基础 TCP/IP 1.1 TCP/IP 协议族 TCP/IP 协议族是互联网 ...

  5. VS Code报错Module 'xx' has no 'xx' member pylint(no-member)解决办法

    pylint是vscode的python语法检查器,pylint是静态检查,在用第三方库的时候有些成员只有在运行代码的时候才会被建立,它就找不到成员,在设置(settings.json)里添加 &qu ...

  6. 基于AdminLTE的jquery头像更新

    最近在写实验室管理系统中的个人信息模块,上边要求实现更改头像功能.百度了一大堆,无实用的.(要么各种币) 本文介绍的只是实现了简单功能(毕竟现在初学阶段) 需要引用文件,顺序也不能错. <scr ...

  7. React用dangerouslySetInnerHTML动态渲染HTML

    React用dangerouslySetInnerHTML动态渲染HTML React项目,需要把后台返回的一段html代码在页面上显示 在render获取内容, //在render里获取内容 con ...

  8. 测试常用命令之awk篇

    awk/gawk 1,内置变量 FILENAME:输入文件名称 FNR:当前数据文件中的数据行数 NF:数据文件中的字段总数 NR:已处理的输入数据行数目 FS:输入数据段分隔符 RS:输入数据行分隔 ...

  9. (转)IIS Express介绍与使用

    IIS Express是什么?IIS Express是为开发人员优化的轻量级.自包含版本的IIS.IIS Express使使用当前最新版本的IIS来开发和测试网站变得容易.它具有IIS 7及以上的所有 ...

  10. maven使用常见问题

    1.我写的是src/main/java/config/mybatis-cofig.xml 但总是报错 Could not find resource src/main/java/config/myba ...