phpbb seo_phpBB前端优化– 1小时的研讨会

phpbb seo

Let's go ahead and optimize our phpBB installation for front-end performance. I'll follow Yahoo's 14 optimization rules, but only implement the ones that apply for phpBB. During this short workshop there will be no changes to the phpBB code, we'll create a new template instead, so that in case something bad happens, your board will continue to work normally. As an example, I'll use the bgcanada.com/phpBB2, the board I volunteer to administrate.

让我们继续并优化phpBB安装以获得前端性能。 我将遵循Yahoo的14条优化规则，但仅实现适用于phpBB的规则。 在这个简短的研讨会上，phpBB代码将保持不变，我们将创建一个新模板，以防万一发生不良情况，您的开发板将继续正常工作。 例如，我将使用bgcanada.com/phpBB2(我自愿管理的委员会)。

计划 (The plan)

1. creating two subdomains to host assets - images and css, maximizing parallel downloads (also following rule #9) 2. creating a new template (theme) based on the default subSilver template 3. moving CSS to an external file (rule #8), merging the two css files (rule #1) 4. copying images and css to the new subdomains 5. making sure css is served gzipped (rule #4) and also making sure php pages are served gzipped) 6. turning ETags off (rule #13) 7. setting the Expires header (rule #3) There will be no explanations on the reasoning why these rules exists, but only how to implement the applicable ones in phpBB. It's a good idea though to go through the links above and read the detailed description of the rules. Maybe you'll find something that can be done in addition to the plan above. The suggested implementations were done and tested on a normal $60/year shared host, working around the limitations of such hosting. I'll speculate that at least 90% of the phpBB installations out there use shared host so I hope my implementation will be relevant to your phpBB install as well.

1.创建两个子域来托管资产(图像和CSS)，以最大程度地并行下载(也遵循规则9)2.根据默认的子银模板创建一个新模板(主题)3.将CSS移至外部文件(规则8) )，合并两个css文件(规则1 )。4.将图像和css复制到新的子域5.确保已将gszip压缩为css(规则4 )，并确保将gps压缩为php页面)6.关闭ETags (第13条规则)7.设置Expires标头(第3条规则)这些规则存在的原因将没有解释，仅在phpBB中实现适用的规则。 不过，通过上面的链接阅读规则的详细说明是一个好主意。 也许您会发现除了上述计划之外还可以做的事情。 建议的实现是在正常的$ 60 /年共享主机上完成并测试的，它可以解决此类主机的局限性。 我会推测至少有90％的phpBB安装使用共享主机，因此我希望我的实现也与您的phpBB安装有关。

新的子域 (New subdomains)

Typically, shared hosts allow subdomains and have their admin interface for doing so. In case your host is an exception, alternatively you can buy one or two extra domains to use for the same purpose - storing page assets.

通常，共享主机允许子域并具有其管理界面。 如果您的主机是一个例外，或者您可以购买一个或两个额外的域以用于同一目的-存储页面资产。

So in my case, for the domain bgcanada.com I create two sub-domains - i1.bgcanada.com and i2.bgcanada.com (i as in image). Now the question would be how to divide assets between the two domains. I decided that more or less half of the images are multilingual (they don't contain text) so these go to i2. i1 will have all the rest - translatable images found in subSilver/images/lang_english, smilies and the stylesheet.

因此，在我的情况下，对于域bgcanada.com，我创建了两个子域-i1.bgcanada.com和i2.bgcanada.com(如图所示)。 现在的问题是如何在两个域之间划分资产。 我决定大约一半的图像是多语言的(它们不包含文本)，因此这些图像转到i2。 i1将拥有所有其余的-可在subSilver / images / lang_english，表情符号和样式表中找到的可翻译图像。

创建一个新模板 (creating a new template)

Let's go ahead and create a new template (theme), based on the default subSilver template. I'll call mine "sso" as in "subSilver optimized" (or the longer mirror-like version "ssoss" as in "stoyan stefanov, oh, so smart" 😉 )

让我们继续，基于默认的subSilver模板创建一个新模板(主题)。 我将其称为“ subSilver优化”中的“ sso”(或称为“ stoyan stefanov哦，太聪明了”😉的类似镜像的较长版本“ ssoss”)。

For this purpose, just take the contents of path/to/phpbb/templates/subSilver and copy it under the name "sso", so you'll have /templates/sso, an exact subSilver copy.

为此，只需获取path / to / phpbb / templates / subSilver的内容并以“ sso”为名称进行复制，那么您将获得/ templates / sso，这是一个精确的subSilver副本。

Now go ahead and modify templates/sso/subSilver.cfg, the theme configuration. First rename it to sso.cfg. Then at the top of the document, replace the line:

现在继续修改主题配置模板/sso/subSilver.cfg。 首先将其重命名为sso.cfg。 然后在文档顶部，替换以下行：

$current_template_images = $current_template_path . "/images";

with

与

//$current_template_images = $current_template_path . "/images";
$i1 = "http://i1.bgcanada.com/sso"; // language and smilies
$i2 = "http://i2.bgcanada.com/sso"; // the rest

use your domain, of course.

使用您的域，当然。

Then do a search/replace. All occurrences of:

然后进行搜索/替换。 所有出现的情况：

$current_template_images/{LANG}/

should become

应该成为

$i1/{LANG}/

And all occurrences of

和所有发生的

$current_template_images/

become

成为

$i2/

At the end of the file, just before ?> add a new line:

在文件末尾，在？>之前添加新行：

$board_config['smilies_path'] = 'http://i1.bgcanada.com/smilies';

This will overwrite the path to the smilies you set in the admin interface. This is optional, you can achieve the same by using the admin panel, but we said we wanted to have the board unaffected by the changes.

这将覆盖您在管理界面中设置的表情符号的路径。 这是可选的，您可以通过管理面板来实现相同的目的，但是我们说过我们希望董事会不受更改的影响。

Now open templates/sso/theme_info.cfg and replace all occurrences of "subSilver" with "sso".

现在打开template / sso / theme_info.cfg，并将所有出现的“ subSilver”替换为“ sso”。

Now the bad news is that some of the template files (.tpl) still contain relative paths to images, we need to make these absolute and pointing to the subdomians. Since these paths are hardcoded in the templates we're sure that they are language independent, so they'll all go to the i2 subdomain. If you have a good text editor that can search/replace in multiple files, go ahead. Alternatively, use the php script I came up with. Download it, copy it to your /templates/sso folder, rename to replace.php and use it like: C:\path\to\phpbb\templates\sso> php replace.php It will report what it replaced. It only searches for templates/subSilver/images and replaces with http://i2.bgcanada.com/sso

现在的坏消息是，某些模板文件(.tpl)仍然包含图像的相对路径，我们需要使它们成为绝对路径并指向次子区域。 由于这些路径在模板中进行了硬编码，因此我们确保它们与语言无关，因此它们都将进入i2子域。 如果您有一个不错的文本编辑器，可以在多个文件中搜索/替换，请继续。 或者，使用我想出的php脚本。 下载它，将其复制到您的/ templates / sso文件夹中，重命名为replace.php并按如下方式使用它：C：\ path \ to \ phpbb \ templates \ sso> php replace.php它将报告它所替换的内容。 它仅搜索templates/subSilver/images并替换为http://i2.bgcanada.com/sso

Yep, almost done with the template, one last step - the css.

是的，几乎完成了模板，最后一步-CSS。

将CSS移至外部文件，合并 (Moving CSS to an external file, merging)

In the default subSilver there are style definitions in overall_header.tpl. Remove them, the whole thing between the <style> tags and replace with:

在默认的subSilver中，overall_header.tpl中包含样式定义。 删除它们，将<style>标记之间的整个内容替换为：

<link rel="stylesheet" href="http://i1.bgcanada.com/sso.css" type="text/css">

Now rename subSilver.css to sso.css. Copy the contents of formIE.css and append it to the end of sso.css. Optionally, you can walk through the new file and strip all comments and white space. Or use my stripped version.

现在，将subSilver.css重命名为sso.css。 复制formIE.css的内容，并将其附加到sso.css的末尾。 (可选)您可以浏览新文件并删除所有注释和空白。 或使用我的剥离版本。

Note that as a side effect, the font of the board will look somewhat different, because the definitions in subSilver.css are not exactly the same as those in the overall_header.tpl. It's not a big difference, but if it's important to you, just ignore the original subSilver.css and create sso.css copying the styles from overall_header.tpl and formIE.css.

请注意，作为副作用，面板的字体看起来会有所不同，因为subSilver.css中的定义与total_header.tpl中的定义并不完全相同。 差别不大，但是如果对您来说很重要，则只需忽略原始的subSilver.css并创建sso.css，即可复制total_header.tpl和formIE.css中的样式。

We're done with the files, the rest is sysadmin stuff.

文件处理完毕，剩下的就是系统管理员的东西。

将文件复制到新的子域 (copying files to the new subdomains)

That's easy, just take everything from templates/sso/images (leave the lang_english or any other language folders) and copy to http://i2.bgcanada.com/sso

这很容易，只需将所有内容从template / sso / images(保留lang_english或任何其他语言的文件夹)中复制到http://i2.bgcanada.com/sso

Than take all lang_* folders and copy to http://i1.bgcanada.com/sso, so you'll have http://i1.bgcanada.com/sso/lang_english/

比起所有lang_ *文件夹并将其复制到http://i1.bgcanada.com/sso，您将拥有http://i1.bgcanada.com/sso/lang_english/

Now copy all smilies from phpbbroot/images/smilies to http://i1.bgcanada.com/smilies/

现在，将所有表情符号从phpbbroot / images / smilies复制到http://i1.bgcanada.com/smilies/

Now take the sso.css you created and copy to http://i1.bgcanada.com/sso.css

现在将您创建的sso.css复制到http://i1.bgcanada.com/sso.css

Last, take the whole sso directory and copy to the main domain - http://www.bgcanada.com/phpBB2/templates/ so that it's in the same folder next to subSilver.

最后，将整个sso目录复制到主域-http://www.bgcanada.com/phpBB2/templates/，使其位于subSilver旁边的同一文件夹中。

Login to the admin panel and activate the new theme as usual. Login to your account and change your theme preference to sso. You still want to test before making it a default theme for everyone.

登录到管理面板，然后照常激活新主题。 登录到您的帐户，然后将主题首选项更改为sso。 您仍然需要进行测试，然后将其设置为所有人的默认主题。

At this point you should be able to browse your forum with the new theme and everything should look like as if you were using subSilver.

此时，您应该可以使用新主题浏览您的论坛，并且所有内容看起来都好像您在使用subSilver。

提供压缩的内容 (Serving gzipped content)

The rule is that all served files should be gzipped, with exception for images, because gifs, jpgs, pngs are already compressed.

规则是应压缩所有提供的文件，但图像除外，因为gif，jpg，png已被压缩。

To serve the normal html (php) pages gzipped, just use the built-in phpBB feature, log on to the admin panel and enable gzip compression.

要提供gzip压缩的常规html(php)页面，只需使用内置的phpBB功能，登录到管理面板并启用gzip压缩。

To serve sso.css gzipped, ideally you should only create an .htaccess file and have Apache do it for you (more info). Unfortunately my host won't allow it, so I took the alternative path - have PHP gzip and serve the css file. To do so I created an .htaccess file http://i1.bgcanada.com/.htaccess and put in it:

要为压缩后的sso.css提供服务，理想情况下，您仅应创建一个.htaccess文件并让Apache为您完成(更多信息)。 不幸的是，我的主机不允许这样做，所以我选择了替代方法-安装PHP gzip并提供css文件。 为此，我创建了一个.htaccess文件http://i1.bgcanada.com/.htaccess并放入其中：

AddHandler application/x-httpd-php .css

This affects all CSS files (but we have only one) and makes them php scripts. If your host allows you to use php_value in .htaccess, you can do the rest of the job by only using .htaccess. Otherwise create a http://i1.bgcanada.com/php.ini file and put in it:

这会影响所有CSS文件(但我们只有一个)，并使它们成为php脚本。 如果您的主机允许您在.htaccess中使用php_value，则可以仅使用.htaccess来完成其余工作。 否则，创建一个http://i1.bgcanada.com/php.ini文件并将其放入：

[PHP]
default_mimetype = "text/css"
zlib.output_compression = On
zlib.output_compression_level = 6
expose_php = Off
auto_prepend_file = "pre.php"

The first line makes php send text/css header instead of the default text/html. Some browsers won't like CSS files served with text/html header. The second line enables compression and the next line sets the compression level (could be up to 9). 4th line is absolutely optional, just removes an extra header that PHP sends. The last line sets that all served php files should include the file pre.php as if you used include "pre.php" inside every PHP script. This is actually used later for the Expires header.

第一行使php发送text / css标头，而不是默认的text / html。 一些浏览器不喜欢带有text / html标头CSS文件。 第二行启用压缩，而下一行设置压缩级别(最大为9)。 第4行绝对是可选的，只需删除PHP发送的额外标头。 最后一行设置所有提供服务的php文件都应包含文件pre.php，就好像您在每个PHP脚本中都使用了include "pre.php"一样。 稍后将其实际用于Expires标头。

关闭ETag (turning ETags off)

That's super easy. Just add .htaccess rules in both i1 and i2 to say: FileETag none

超级简单。 只需在i1和i2中都添加.htaccess规则即可：FileETag none

过期标题 (Expires header)

To set the expires header, add these lines to .htaccess on both i1 and i2

要设置expires标头，请将这些行添加到i1和i2上的.htaccess中

ExpiresActive On ExpiresDefault "access plus 2 years"

ExpiresActive On ExpiresDefault“访问权限加2年”

This makes all files - images and CSS - on i1 and i2 expire in 2 years, if that's too much/not enough, feel free to change.

这样一来，i1和i2上的所有文件(图像和CSS)都将在2年后过期，如果太多/不够，请随时进行更改。

If it doesn't work for you (it didn't for me, because of the host), you can go the php auto_prepend route described above and add in the pre.php file header('Expires: ' .gmdate("D, d M Y H:i:s",time() + (60 * 60)) . ' GMT'); Feel free to set 60 * 60 to whatever you think makes sense for you. Note that this will only affect the CSS file, images will be served "normally". You can also have PHP serve all the images, like we did for CSS, but I think it's probably too much.

如果它对您不起作用(由于主机而对我不起作用)，则可以使用上述的php auto_prepend路由，并添加pre.php文件头('Expires：'.gmdate(“ D ，d MYH：i：s“，time()+(60 * 60))。'GMT'); 随意将60 * 60设置为您认为合适的任何值。 请注意，这只会影响CSS文件，图片将“正常”投放。 您也可以像我们对CSS一样，让PHP提供所有图像，但我认为可能太多了。

系统管理员摘要 (Sysadmin summary)

There was a lot of if-then above so let me summarize what worked for me, but try your other options first to see how "liberal" your host is in order to do a better job than me.

上面有很多“如果-那么”，那么让我总结一下对我有用的内容，但是请首先尝试其他选择，以查看您的主机的“自由”程度，以便比我做得更好。

http://i1.bgcanada.com/.htaccess

http://i1.bgcanada.com/.htaccess

AddHandler application/x-httpd-php .css
FileETag none

http://i1.bgcanada.com/php.ini

http://i1.bgcanada.com/php.ini

[PHP]
default_mimetype = "text/css"
zlib.output_compression = On
zlib.output_compression_level = 6
expose_php = Off
auto_prepend_file = "pre.php"

http://i1.bgcanada.com/pre.php

http://i1.bgcanada.com/pre.php

<?php
header('Expires: ' .gmdate("D, d M Y H:i:s",time() + (60 * 60)) . ' GMT');
?>

做完了！ (Done!)

We're done! Did it take more than an hour? Hope not, although with these computers and stuff, everything takes more time than expected.

大功告成！ 花费了一个多小时吗？ 希望不会，尽管有了这些计算机和东西，所有事情都花费了比预期更多的时间。

Do you see anything missing? Or something that can be improved? Or something didn't work for you? Please post a comment. The whole posting is a bit fast-paced and written in a rush (I really need to go to bed), so if there's something unclear please ask.

你看到什么了吗？ 还是可以改善的地方？ 还是有些东西对您不起作用？ 请发表评论。 整个帖子节奏很快，匆忙写着(我真的需要上床睡觉)，因此，如果有不清楚的地方，请询问。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/phpbb-front-end-optimization-1-hour-workshop/

phpbb seo