WordPress привлича начинаещия именно с тази простота, която му е обещана. Системата се инсталира по спартански начин и предлага моментална работа за равитие на сайта без всякаква предварителна подготовка. Това крие известен риск за младия блогър, ако той не получи желания резултат и съответно ще доведе до разочарование и отказ.
В своите обяснения ще се придържам към тестови блог, издигнат на безплатна площадка, задвижван от WordPress 2.8.2. Нашата задача се свежда до два пунка, касаещи работата с шаблона.
Авторът на статията не носи отговорност за каквито и да било вреди, възникнали в следствие от ползване или невъзможност за ползване описани и предоставени тук. Ползвайте на ваш риск и страх!
При зареждане на вашият сайт, той няма да приеме правилния изглед, докато не бъдат заредени всички стилове и не бъдат изпълнени всички обращения към Базата Данни (БД). Задачата тук ще се сведе до замяна на някои запитвания към БД - от php на html. Разбира се така не може да се подходи към всички обръщения, защото системата оперира с динамично съдържание, но възможните php функции ще изменим, за да ускорим зареждането на сайта.
Нека разгледаме файл header.php. Той е задължителен компонент на всеки wordpress шаблон и там присъства следния код:
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php if (is_home()) { bloginfo('name'); ?><?php } elseif (is_category() || is_page() ||is_single()) { ?> <?php } ?><?php wp_title(''); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if (is_single() || is_page()) $logo = 'div'; else $logo = 'h1'; ?>
<?php wp_head(); ?>
<title><?php if (is_home()) { bloginfo('name'); ?><?php } elseif (is_category() || is_page() ||is_single()) { ?> <?php } ?><?php wp_title(''); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if (is_single() || is_page()) $logo = 'div'; else $logo = 'h1'; ?>
<?php wp_head(); ?>
А сега преброим повторението на следния ред - <?php. Отговор - 11 пъти. Това означава, че в самото начало имаме 11 пъти запитване към базата без да е настъпило същинското зареждане на изгледа. Време, което може да се съкрати. Активирайте сайта на главната страница. С комбинация Ctrl+U отворете изходния код на сайта и копирайте същите редове в html формат. Веднага след таг <head> до <meta name="generator".
В моя случай нещата изглеждат така:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Profruit blog</title>
<meta name="description" content="Страната на чудесата" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="http://profruit.byethost15.com/wp-content/themes/theme/style.css" type="text/css" media="all" />
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="alternate" type="application/rss+xml" title="Profruit blog RSS Feed" href="http://profruit.byethost15.com/?feed=rss2" />
<link rel="pingback" href="http://profruit.byethost15.com/xmlrpc.php" />
<link rel='stylesheet' id='wp-pagenavi-css' href='http://profruit.byethost15.com/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.50' type='text/css' media='all' />
<script type='text/javascript' src='http://profruit.byethost15.com/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://profruit.byethost15.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://profruit.byethost15.com/wp-includes/wlwmanifest.xml" />
<link rel='index' title='Profruit blog' href='http://profruit.byethost15.com' />
<title>Profruit blog</title>
<meta name="description" content="Страната на чудесата" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="http://profruit.byethost15.com/wp-content/themes/theme/style.css" type="text/css" media="all" />
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="alternate" type="application/rss+xml" title="Profruit blog RSS Feed" href="http://profruit.byethost15.com/?feed=rss2" />
<link rel="pingback" href="http://profruit.byethost15.com/xmlrpc.php" />
<link rel='stylesheet' id='wp-pagenavi-css' href='http://profruit.byethost15.com/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.50' type='text/css' media='all' />
<script type='text/javascript' src='http://profruit.byethost15.com/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://profruit.byethost15.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://profruit.byethost15.com/wp-includes/wlwmanifest.xml" />
<link rel='index' title='Profruit blog' href='http://profruit.byethost15.com' />
Единствено оставям неизменен php код, намиращ се между тагове < title> и < /title>, защото той е важен за SEO и се мени в зависимост от името на публикацита. По този начин намалихме запитванията към БД с цели 10 бройки, което е приличен резултат на фона на простата замяна. Тук се явява възможност да отпишите тага за генератор. За него преди всичко се интересуват хакерите.
Два реда добавен хак в кода дават възможност да ускорите вашия сайт на WordPress близо 3 пъти. На практика това означава n-пъти съкратено време за зареждане. Настъпи реч за zlib компрессия. Това е един от традиционните предложения на хостинга, отговарящ за компресия на данните. Защо да не го приложим към нашия WordPress и по този начин го ускорим? Zlib събира php кода и го компресира. Когато потребител се обърне към вашия интернет- сайт, Zlib изпраща компресия на броузъра. Това значително съкращава времето за зареждане спрямо некомпресията. Zlib компресията работи с еднакъв успех на стари и нови броузъри и проблеми с несъвместимостта не би трябвало да съществуват. Остава да разберем имаме ли активен zlib на нашия хостинг и ако е изключен, да помолим поддръжката на хоста, да го активира. За начало създаваме малък php файл с произволно име - phpinfo.php. Съдържанието му е следното:
<?php phpinfo(); ?>
Този файл качвате в корена на сайта (htdocs/, public_html/). След това наберете в броузъра пътя до него http://www.вашият сайт.com/phpinfo.php. По този начин ще получите нагледни характеристики описани в таблици. Потърсете опция zlib. За съжаление в примерния блог zlib е наличен, но изключен. Това може да се види в дъното на страницата на следния адрес:
http://profruit.byethost15.com/phpinfo.php
Остава да сложите ускорителя. Отворете файл header.php на вашия шаблон и в самото начало преди ред <!DOCTYPE html PUBLIC поставете този код:
<?php
ini_set(’zlib.output_compression’, ‘On’);
ini_set(’zlib.output_compression_level’, ‘1′);
?>
ini_set(’zlib.output_compression’, ‘On’);
ini_set(’zlib.output_compression_level’, ‘1′);
?>
Съхранете изменението и готово. По идея може да проверите изменението преди и след на този адрес http://tools.pingdom.com.
Примерен резултат на теста
Възниква въпрос - какво правим с разширения: wp-cache, wp-supercache, hypercache? Нищо. Всеки сам решава за себе си. WordPress е CMS конструктор. Всяко допълнение е преподставка за дупка и нови потребности на ресурси, защото е своебразен php - скрипт. Колкото по-малко ги има - по-бърз сайт. От друга страна zlib е интегриран в хостинга и по-малко ще товари пре-процесора на сървъра отколкото разширението. Позовавайки се на скромния си опит с WordPress ползата от wp-supercache e скромна секунда спечелено време.
Наличие на файл phpinfo.php повече не е нужен и може да го премахнете, той е информативен. Ще ми бъде интересно да узная резултатите от вашите коментари.
Благодарности на Brad Ney за тази хак.
до нови срещи ^.^
25.10.2009 profruit
Винаги съм се чудал, когато ползваме снимки в блога дали е по-добре те да бъдат качени или да ползваме линк към тях? Имам един анлгоезичен блог и забелязах, че голяма част от bandwich-а е именно от снимките. Възможно ли е снимките да забавят скороста на зареждането му?
Решението на чуденката произтича от upload-а на сървъра, носещ снимките. Mozilla Firefox+Fireburg дават чудесен анализ по този въпрос. Сървъра на Picasa намирам без конкуренция, при това безплатен. Аз ползвам safe for Web опцията на Photoshop, като подбирам по-малкия резултат между png и jpeg/jpg.
Отделен е въпросът що за снимки са вашите като формат, обем и разширение. Как е конструиран блога и по-точно галериите.
gracepointafterfive.com/punypng е отлична алтернатива за оптимизация на снимки. Пробвайте го.
Видеоуроци като VTC Adobe Photoshop CS4 for the Web е само пример, учещ как да оптимизираме графика за своя сайт.
поздрави
Не разбирам от Фотошоп. С удоволствие ще пробвам сайта за оптимизация на снимки+мозилата и фаяр бъга. В този ред на мисли ще ми бъде интересно да прочета и статия за плъгините за Уордпреса.
Поздрави и от мен.
Веднага се сещам, че за една галерия не са нужни EXIF-и и те може да се убият с "ShowExif":
profruit.blogspot.com/2009/10/showexif-imagecut.html
За Firefox+Fireburg препоръчвам урока на Ванков - "Firebug - едно малко чудо":
gatakka.eu/2009/04/29/firebug-%d0%b5%d0%b4%d0%bd%d0%be-%d0%bc%d0%b0%d0%bb%d0%ba%d0%be-%d1%87%d1%83%d0%b4%d0%be/
Разширенията на WordPress са хиляди и аз не покривам с толкова свободно време, но намеря ли нещо интересно за себе си ще го споделя с вас тук. Струва си да се регистрирате в скромния бг форум за целта:
bg.forums.wordpress.org/forum/%d0%9f%d1%80%d0%be%d0%b1%d0%bb%d0%b5%d0%bc%d0%b8