recherche
MaisonTutoriel CMSWordPresseComment optimiser un blog WordPress

Comment optimiser un blog WordPress

Nov 15, 2019 am 10:52 AM
wordpress

Comment optimiser un blog WordPress

wordpress博客怎么优化?

我的优化步骤是:

1.压缩CSS和JS文件,并修改一部分插件,优化页面的载入进程

一般需要另外加载JS或者CSS的插件都会存在add_action(”wp_head”,”xxxx”)或者add_action(”wp_footer”,”xxxx”)这两句代码,目的是把自己的脚本或者样式插入到主题的wp_head()和wp_footer()处,使插件可以正常工作(那些反映说插件激活了但看不到效果的人注意了,我观察到相当一部分人所使用的主题不能正常加载插件的脚本,缺的就是这两个函数了)。

下面转回正题。我们需要优化载入进程,也就是流量整形,把CSS文件移到head里(这点100%的插件都能做到,不用担心),把JS文件放在页面最后。我们可以把add_action(xxxx)这句删掉,然后手工把所需的文件插入到主题模板里。

推荐:《WordPress教程

2.压缩CSS和JS,缩短文件的加载时间

经常用jQuery写脚本的人应该比较清楚,未压缩版的jQuery库(1.3.2)大小为120K左右,但min版的只有56K。因为jQuery库min版经过YUI Compressor压缩,去除了代码里的注释、无用的空格和换行符。我们也可以用YUI来压缩一下自己的脚本,压缩率能达到30%~70%。由于软件版的YUI安装过程比较复杂,这里有个在线版。

而CSS的压缩就比较简单,就是去除换行符、空格和注释,大家可以用在线工具压缩一下。但主题的style.css头部被注释掉的主题信息不能删掉,否则可能导致主题不正常。

对于CSS的压缩,很多人用的PHP压缩。编写名为style.css.php的文件,内容如下:

代码如下:

if ( extension_loaded('zlib') and !ini_get('zlib.output_compression') and ini_get('output_handler') != 'ob_gzhandler' and ((version_compare(phpversion(), '5.0', '>=') and ob_get_length() == false) or ob_get_length() === false) ) {
ob_start('ob_gzhandler');
}else{
ob_start();
}
//检查是否含有Gzip相关模块,有的话就采用Gzip传输,如果主机有Apache mod_deflate.c或其它等效模块的话,可以不写这段
@header("Cache-Control: public");
@header("Pragma: cache");
//缓存文件
$expiresOffset = 3600*24*365;
@header( "Vary: Accept-Encoding" );
@header( "Expires: " . gmdate( "D, d M Y H:i:s", time() + $expiresOffset ) . " GMT" );
//设置缓存时间
@header('Content-Type: text/css');//声明文件类型
$cssdata = file_get_contents('style.css');//读取style.css的内容
$cssdata = preg_replace(array('/\s*([,;:\{\}])\s*/', '/[\t\n\r]/', '/\/\*.+?\*\//'), array('\\1', '',''), $cssdata);//清除注释和换行符等
echo $cssdata;//输出代码

把这个文件放在主题文件夹里,并把主题CSS的加载代码改为

代码如下:

<link rel="stylesheet" href="<?php bloginfo(&#39;stylesheet_directory&#39;); ?>/style.css.php" type="text/css" media="all" />
</link>

当然JS文件也可以用PHP进行优化,但由于通常情况下加载的JS文件比较多,我通过另一个文件来间接加载JS。建立一个名为js.php的文件,内容如下:

代码如下:

if ( extension_loaded(&#39;zlib&#39;) and !ini_get(&#39;zlib.output_compression&#39;) and ini_get(&#39;output_handler&#39;) != &#39;ob_gzhandler&#39; and ((version_compare(phpversion(), &#39;5.0&#39;, &#39;>=&#39;) and ob_get_length() == false) or ob_get_length() === false) ) {
ob_start(&#39;ob_gzhandler&#39;);
}else{
ob_start();
}
//同样是Gzip压缩的语句
$js_folder = "js/";//JS文件所在目录,相对路径
$js_src = urldecode( htmlspecialchars( $_GET[&#39;src&#39;] ) );//获取JS文件名
$js_file = $js_folder.$js_src;//JS文件位置
@header("Cache-Control: public");
@header("Pragma: cache");
//缓存文件
$expiresOffset = 3600*24*365;
@header( "Vary: Accept-Encoding" ); // Handle proxies
@header( "Expires: " . gmdate( "D, d M Y H:i:s", time() + $expiresOffset ) . " GMT" );
//设置缓存时间
@header(&#39;Content-Type: text/javascript; charset: UTF-8&#39;);//声明文件类型
$jsdata = file_get_contents($js_file);
echo $jsdata;
//输出内容

把这个文件放在主题目录下,在主题文件夹里建立一个JS文件夹,把所需的JS文件都放到这个文件夹里。改写一下主题,用以下方式加载JS文件:

代码如下:

<script type="text/javascript" src="<?php bloginfo(&#39;stylesheet_directory&#39;); ?>/js.php?src=library.js"></script>

如果你的主机有Apache mod_deflate.c模块,基本上可以忽略上面的方法,因为只需要在.htaccess文件里加入以下代码就可以实现全站Gzip传输了。而且压缩率更高。

代码如下:

<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-httpd-php application/x-javascript
</ifmodule>

3.整合CSS和JS文件

经过上面一番折腾以后,其实页面载入速度已经快很多了,但速度是没有止境的,我们追求更快。搞无可搞以后,只能从减少HTTP请求数下手了,这一步的目的尽量整合所有的CSS和JS。

整合CSS比较简单,用各种主流浏览器测试几个页面,没发现框架错位现象,把相关的CSS里的代码粘贴到style.css里,并把相关的CSS-image也复制到主题目录下,修改一下CSS里的图片路径就行了。

JS的整合方法则复杂点,要搞清楚那些脚本需要在对象加载前加载,否则是无效的,并且要注意不同插件的JS冲突问题。

整合完CSS和JS后,重返第一步,把插件里加载脚本和样式的语句删掉。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Comment déplacer facilement votre blog de wordpress.com à wordpress.orgComment déplacer facilement votre blog de wordpress.com à wordpress.orgApr 18, 2025 am 11:33 AM

Voulez-vous déplacer votre blog de wordpress.com à wordpress.org? De nombreux débutants commencent par wordpress.com mais réalisent rapidement leurs limites et veulent passer à la plate-forme WordPress.org auto-hébergée. Dans ce guide étape par étape, nous vous montrerons comment déplacer correctement votre blog de wordpress.com à wordpress.org. Pourquoi migrer de wordpress.com vers wordpress.org? Wordpress.com permet à n'importe qui de créer un compte

Comment automatiser WordPress et les médias sociaux avec IFTTT (et plus)Comment automatiser WordPress et les médias sociaux avec IFTTT (et plus)Apr 18, 2025 am 11:27 AM

Cherchez-vous des moyens d'automatiser votre site Web WordPress et vos comptes de médias sociaux? Avec l'automatisation, vous pourrez partager automatiquement vos articles de blog WordPress ou vos mises à jour sur Facebook, Twitter, LinkedIn, Instagram et plus encore. Dans cet article, nous vous montrerons comment automatiser facilement WordPress et les médias sociaux en utilisant IFTTT, Zapier et Uncanny Automator. Pourquoi automatiser WordPress et les médias sociaux? Automatiser votre wordpre

Comment corriger les limites des éléments de menu personnalisés dans WordPressComment corriger les limites des éléments de menu personnalisés dans WordPressApr 18, 2025 am 11:18 AM

Il y a quelques jours à peine, l'un de nos utilisateurs a signalé un problème inhabituel. Le problème est qu'il atteint la limite des éléments de menu personnalisés. Tout contenu qu'il enregistre après avoir atteint la limite de l'élément de menu ne sera pas enregistré du tout. Nous n'avons jamais entendu parler de ce problème, nous avons donc décidé de l'essayer sur notre installation locale. Plus de 200 éléments de menu ont été créés et enregistrés. L'effet est très bon. Déplacez 100 éléments dans la liste déroulante et économisez-les très bien. Ensuite, nous savions que cela avait à voir avec le serveur. Après de nouvelles recherches, il semble que beaucoup d'autres aient rencontré le même problème. Après avoir creusé plus profondément, nous avons trouvé un billet Trac (# 14134) qui a mis en évidence ce problème. Lire très

Comment ajouter des métafields personnalisés à la taxonomie personnalisée dans WordPressComment ajouter des métafields personnalisés à la taxonomie personnalisée dans WordPressApr 18, 2025 am 11:11 AM

Avez-vous besoin d'ajouter des métafields personnalisés à la taxonomie personnalisée dans WordPress? La taxonomie personnalisée vous permet d'organiser du contenu en plus des catégories et des balises. Parfois, il est utile d'ajouter d'autres champs pour les décrire. Dans cet article, nous vous montrerons comment ajouter d'autres métafields à la taxonomie qu'ils créent. Quand des métafields personnalisés devraient-ils être ajoutés à la taxonomie personnalisée? Lorsque vous créez un nouveau contenu sur votre site WordPress, vous pouvez l'organiser à l'aide de deux taxonomie par défaut (catégorie et balise). Certains sites Web bénéficient de l'utilisation de la taxonomie personnalisée. Ceux-ci vous permettent de trier le contenu d'autres manières. Par exemple,

Comment publier à distance sur WordPress à l'aide de Windows Live WriterComment publier à distance sur WordPress à l'aide de Windows Live WriterApr 18, 2025 am 11:02 AM

Windows Live Writer est un outil polyvalent qui vous permet de publier des articles directement de votre bureau vers votre blog WordPress. Cela signifie que vous n'avez pas besoin de vous connecter au panneau d'administration WordPress pour mettre à jour votre blog. Dans ce tutoriel, je vais vous montrer comment activer la publication de bureau pour votre blog WordPress à l'aide de Windows Live Writer. Comment configurer Windows Live Writer sur WordPress Étape 1: Pour utiliser Windows Live Writer dans WordPr

Comment réparer le texte blanc et les boutons manquants dans l'éditeur visuel WordPressComment réparer le texte blanc et les boutons manquants dans l'éditeur visuel WordPressApr 18, 2025 am 10:52 AM

Récemment, l'un de nos utilisateurs a signalé un problème d'installation très étrange. Lors de la rédaction d'un article, ils ne peuvent rien voir qu'ils écrivent. Parce que le texte de l'éditeur de publication est blanc. De plus, tous les boutons de l'éditeur visuel sont manquants, et la possibilité de passer du visuel à HTML ne fonctionne pas non plus. Dans cet article, nous vous montrerons comment résoudre le texte blanc et les problèmes de bouton manquant dans l'éditeur visuel WordPress. Soyez une note débutante: Si vous recherchez des boutons cachés qui peuvent être vus dans des captures d'écran d'autres sites Web, vous pouvez chercher un évier de cuisine. Vous devez cliquer sur l'icône de l'évier de la cuisine pour voir d'autres options telles que souligner, copier de Word, etc.

Comment afficher Avatar dans l'e-mail utilisateur dans WordPressComment afficher Avatar dans l'e-mail utilisateur dans WordPressApr 18, 2025 am 10:51 AM

Voulez-vous afficher des avatars dans les e-mails utilisateur dans WordPress? Gravatar est un service réseau qui connecte l'adresse e-mail d'un utilisateur à un avatar en ligne. WordPress affiche automatiquement les images de profil des visiteurs dans la section des commentaires, mais vous pouvez également les ajouter à d'autres domaines du site. Dans cet article, nous vous montrerons comment afficher des avatars dans les e-mails utilisateur dans WordPress. Qu'est-ce que Gravatar et pourquoi devrais-je l'afficher? Gravatar signifie des avatars reconnus à l'échelle mondiale, qui permet aux gens de lier des images à leurs adresses e-mail. Si le site Web prend en charge

Comment modifier l'emplacement de téléchargement de médias par défaut dans wordpressComment modifier l'emplacement de téléchargement de médias par défaut dans wordpressApr 18, 2025 am 10:47 AM

Voulez-vous modifier l'emplacement de téléchargement de médias par défaut dans WordPress? Le déplacement des fichiers multimédias vers d'autres dossiers peut améliorer la vitesse et les performances du site Web et vous aider à créer des sauvegardes plus rapidement. Il vous donne également la liberté d'organiser vos fichiers de la manière qui vous convient le mieux. Dans cet article, nous vous montrerons comment modifier l'emplacement de téléchargement de médias par défaut dans WordPress. Pourquoi modifier l'emplacement de téléchargement des médias par défaut? Par défaut, WordPress stocke toutes les images et autres fichiers multimédias dans le dossier / wp-content / uploads /. Dans ce dossier, vous trouverez des enfants de différentes années et mois

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

Listes Sec

Listes Sec

SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.

PhpStorm version Mac

PhpStorm version Mac

Le dernier (2018.2.1) outil de développement intégré PHP professionnel

Télécharger la version Mac de l'éditeur Atom

Télécharger la version Mac de l'éditeur Atom

L'éditeur open source le plus populaire

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Puissant environnement de développement intégré PHP