2 прості кроки до оптимізації HTML/CSS-коду Вашого сайту

За підтримки: Bestellen Sie schon Heute ein brillantes Webdesign von der Internetagentur aus NRW.

1. Не використовуйте багато зображень для оформлення сайту. Це нікому не потрібно, люди цінують вміст сайту, його інформативне наповнення, а не зовнішнє оформлення. Використання багатьох зображень не лише збільшує вагу сайту, а і створює непотрібні додаткові запити до серверу. Це можна порівняти із походом у магазин за кожною річчю окремо, у той час як можна прийти один раз і купити все необхідне. Гадаю, що так швидше.  Можна обійтися кількома картинками, а інше зробити за допомогою фонових зображень, спрайтів і CSS. Наприклад, можна об’єднати зображення у спрайти, як я зробив це на своєму сайті —  у мене для відображення зовнішнього вигляду сайту використано лише дві картинки, одна із них наразі не може бути у спрайті, тому і дві. Хоча, можливо згодом знайду спосіб як зробити 1 зображення.
   • Стаття про технологію спрайтів(рос.) — http://www.css-tricks.ru/Articles/Details/CSSSprites
2. Не використовуйте багато CSS і JS файлів. Звісно це зручно коли у Вас є великий сайт і необхідно мати кілька CSS-стилів. Наприклад, один для обнулення стандартних значень, інший для форматування тексту, третій для оформлення сторінок сайту і тд. Для завантаження кожного файлу потрібен додатковий запит до сервера і додатковий час на завантаження. Для чого це все? Це можна оптимізувати склеївши усі CSS/JS файли в один. Таким чином отримаємо по одному файлу CSS і JS. У Drupal стандартний механізм кешування дозволяє обієднувати усі файли в один і видаляти пробіли, зменшуючи таким чином розмір файлу. А у WP таке теж можна зробити за допомогою скрипту PHP Speedy, про цю технологію писав Lilumi, я від себе додам кілька речей.
   • Даний скрипт не є плаґіном, його потрібно розпакувати і помістити у кореневу теку сайту.
   • Для інсталяції потрібно у бравзері запустити встановлення скрипту, у мене це http://skinik.name/php_speedy_wp/libs/php_speedy/, налаштовуєте його на свій смак.
   • Для роботи скрипту змініть файл wp-blog-header.php(він знаходиться у кореневій теці сайту), після внесених змін він має виглядати так:

   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

   <?php require ( dirname(__FILE__) . '/php_speedy_wp/libs/php_speedy/php_speedy.php'); ?>     <?php /** * Loads the WordPress environment and template. * * @package WordPress */   if ( !isset($wp_did_header) ) {   $wp_did_header = true;   require_once( dirname(__FILE__) . '/wp-load.php' );   wp();   require_once( ABSPATH . WPINC . '/template-loader.php' );   }   ?>   <?php $compressor->finish(); ?>

P.S. Після такої простої оптимізації головна сторінка мого сайту відкривається за 4.7с — http://tools.pingdom.com/fpt/?url=http://skinik.name/&id=1648756

Коротке посилання на публікацію: http://tinyurl.com/ykkack7