Прискорюємо сайт частина 3

Прискорюємо сайт частина 3
Навігація:

Замість цього, я розповім про продукті від творців webo.in під назвою WEBO Site SpeedUp. Про це сервісі і про цей продукт я вже згадував, коли говорив про інструменти для перевірки швидкості завантаження сайту (там же ви можете почитати про користь хорошій швидкості завантаження сайту).

Що являє собою WEBO Site SpeedUp?

Про WEBO Site SpeedUp написане досить багато інформації на його офіційній сторінці. Там міститься точна і перевірена інформація, яка розповідає про переваги цього продукту людям, знайомим з оптимізацією сайтів; але для простого блогера вона представляє мало цінності: на жаль, сучасні блогери, розбалувані широкосмуговим інтернетом, не знають не тільки про такий перспективний напрям як data: URI, але, навіть, не чули про те, що таке gzip стиснення.

Я збираюся розповісти про всі тонкощі прискорення завантаження сайтів в моєму циклі, а зараз я розповім про тонкощі натискання двох кнопок в Webo Site SpeedUp. Ось що робить продукт:

1. Об'єднує таблиці стилів (CSS) і ява-скрипти (JS).

З особистого досвіду знаю, що 97% блогерів використовують плагіни, якщо це можливо (що залишилися 3% або будують ГС, або є програмістами і розуміють, що будь-який плагін уповільнює роботу движка).

Творці плагінів намагаються зробити їх максимально простими в установці, тому мають місце два таких явища, як поява на блозі додаткових * .css і * .js файлів (іноді їх кількість досягає декількох десятків для обох типів). Знали б ви, скільки дорогоцінного часу витрачається на посилку запиту і очікування відповіді від сервера (подібну ситуацію я вже розглядав стосовно картинкам в статті про оптимізацію зображень).

Згадайте ситуацію, коли ви заливаєте файли на FTP: що довше буде заливатися 100 файлів по 10кб, або 1 файл розміром в 1мб?

2. Використовує GZIP стиснення.

Оптимізаційний пакет містить в собі набір інструментів для роботи із стисненням. Проведіть експеримент: візьміть будь-який HTML документ і заархівуйте його за допомогою WinRar або WinZip, або будь-якого іншого архіватора. Порівняйте розміри.

За час існування інтернету з'явилося багато інструментів для стиснення переданих даних (ob_gzhandler, функції .htaccess і інші). Webo Site SpeedUp використовує лічшіе з них, що дозволяє зменшити трафік до 88% (по завіреннях розробників).

Для кожного файлу застосовується свій алгоритм, який прибирає все непотрібне і оптимізує текст скрипта.

Обіцяна економія - 50% переданих даних.

4. Працює з .htaccess

Назвіть хоч одну функцію файлу .htaccess крім mod_rewrite. Важко? У мене в планах написати хорошу статтю, присвячену .htaccess, тому що він містить велику кількість корисних функцій.

Що стосується пакету від Webo, то він використовує деякі функції, що допомагають зменшити трафік і прискорити завантаження.

Має місце як клієнтське, так і серверне кешування.

У разі клієнтського, файли кешуються на 10 років вперед (як думаєте, ваш блог проживе так довго?)

У разі серверного, можна вибирати різні види кешування і їх комбінації.

6. Використовує технологію CSS Sprites.

Про цю технологію я писав трохи вище і давав посилання на ще одну статтю мого циклу.

7. Використовує data: URI (+ mhtml).

8. Чи влаштовує паралельну завантаження файлів.

Працюючи в інтернеті, багато хто забуває, що швидкість завантаження обмежена не тільки шириною каналу клієнта, а й швидкістю роздачі сервера. Уявіть, що завтра ваш сайт піддасться так званому Хабра-ефекту і на нього впаде кілька тисяч відвідувачів. Ви впевнені, що ваш дешевий хостинг витримає?

Засоби паралельної завантаження файлів дозволяють налаштувати одночасне завантаження файлів з різних хостів з різним пріоритетом. Це корисно не тільки для швидкості одиничної завантаження сайту. Повернемося до Хабра-ефекту: ви можете підготуватися до нього, заливши файлу на різні хости, а користувач навіть не відчує цього.

9. Оптимізує зображення.

Так, пакет виконує багато операцій з зображеннями, що дозволяє їх максимально оптимізувати. Хоча, тут існує одне «але»: SpeedUp не зможе за вас видалити інформацію з під альфа каналу, або перевірити одноцветность одноколірної поверхні.

10. Контролює порядок завантаження.

Погодьтеся, було б нерозумно завантажувати спочатку скрипт інформера з підвалу сайту, а вже потім ваш логотип і інформацію потрібну користувачу. Проте, на більшості блогів ми можемо зустріти саме це.

Встановлення та налаштування.

Webo Site SpeedUp може бути встановлений майже на будь-який сайт. Для найпопулярніших движків створені плагіни.

Якщо ви встановлюєте пакет без плагіна, то вам потрібно буде його розпакувати в папку на сервері, встановити права доступу (дозволити запис) і відкрити в браузері файл index.php з директорії пакета.

Так, як я використовую WordPress, то я скачав спеціальний плагін. Плагін необхідно розпакувати в директорію "plugins" і активувати з адмінки.

Зауважу, що це не сам пак, це лише інсталяційний файл. Йому треба дозволити повний доступ до папки в якій він знаходиться і він сам завантажить туди всі необхідні скрипти. У моєму випадку так просто не вийшло: плагін не зміг завантажити файли з сховища та мені довелося завантажити їх з офіційного сервера вручну і прописати всі права доступу.

Ось таку помилку видав мені плагін

Після цього з'являється спеціальний пункт з настройками.

Прискорюємо сайт частина 3

Нам необхідно відразу перейти на сторінку з персональними даними та отримати тестовий ключ.

Прискорюємо сайт частина 3

Нічого не потрібно вводити

Адаменко пакета дуже зручна, містить досить багато інформації, і налаштувань.

Але, як запевняють творців, їх пакет дозволяє оптимізувати сайт в 2 кліка. Іншими словами, нам не потрібно копатися в настройках: для цього створені чотири конфігурації:

безпечна, базова, оптимальна, екстремальна.

4 готових і одна для створення власної

Для чого їх 4? Для зручності користувача: будь-який маркетолог вам розповість про користь вибору. Вистачило б 3: безпечна (для параноїків, тільки не зрозуміло, навіщо їм купувати пакет, який нічого не робить), оптимальна (для людей, які люблять надійність і впевненість) і екстремальна (саме в ній вимірюються всі ці відсотки прискорень, але її як би рекомендується використовувати на свій страх і ризик).

Ви можете створити свою власну конфігурацію, якщо знаєте що робите і навіщо.

Після вибору конфігурації, вам залишається тільки включити Webo Site SpeedUp і перевірити результат.

Експеримент.

Я вирішив провести експеримент. Для цього встановив SpeedUp на двох блогах. Зауважу, що дизайни я для обох малював і верстав сам, так що на обох блогах були однакові помилки.

Для перевірки я вирішив використовувати два сервіси з описаних мною раніше. це сервіс перевірки швидкості webo.in і YSlow від Yahoo!

Перевіряв спочатку сайт абсолютно без оптимізації, потім (з оптимізацією в трьох конфігураціях по черзі) в разі екстремальної конфігурації. Я не став приводити статистику для інших конфігурацій, тому що не бачу в цьому сенсу: перші дві конфігурації нічого майже не роблять, а останні дві майже ідентичні.

Відразу після активації конфігурації «Екстремальна» мій сайт видав «500 Internal Server Error». Як це виправити - нижче.

До речі, можливо через цю помилку, якийсь лічильник скрипта збився і він показав ось таку картинку.

Прискорюємо сайт частина 3

Результати експерименту в таблиці.

Прискорюємо сайт частина 3

Чи не погані результати

Швидше за все, сервіс webo.in просто не помітив, що на першому блозі вже встановлено Webo Site SpeedUp і тому повідомив, що прискорення ще можливо.

Як я вже писав вище, відразу після включення екстремального режиму оптимізації я отримав помилку 500 internal server error.

Наступні рядки є універсальною інструкцією за рішенням схожих проблем. Нагадаю, що internal server error відноситься до помилок розряду «Все працювало, я натиснув - працювати перестало, що робити?»

«Internal server error» перекладається як «внутрішня помилка сервера». Значить, як тільки ви її отримали - бігом в папку logs (не забули, що на сервері крім папки www є ще й інші папки?). У logs знаходимо файл error.log, відкриваємо його і читаємо останню сходинку. У мене там було написано:

[...] .htaccess: Option SymLinksIfOwnerMatch not allowed here [...]

З цього можна зробити висновок, що помилка криється в опції SymLinksIfOwnerMatch файлу .htaccess. Файл знаходиться в кореневій папці вашого сайту (в тій самій www). Відкриваємо його і видаляємо + SymLinksIfOwnerMatch.

Я думаю, якщо у вас виникне інша помилка - ви зможете її з легкістю виправити.

Програма в цілому залишає приємне враження: акуратний зрозумілий інтерфейс, простота настройки і установки.

Думаю, що ця програма зовсім непогано оптимізувала б сайт, який не використовує громіздкий wordpress (нагадаю, що wordpress в будь-якому випадку є дуже гальмівним двигуном).

Чи варто програма співвідношення ціни і якості? Я купувати її не буду, не тому що вона мені не подобається, а тому що мені цікаво робити все вручну, а не використовувати чужі автоматизаторів. До речі, якщо захочете купити цю програму - можу дати посилання зі знижкою в 10%.

Удачі вам і успіхів в прискоренні ваших проектів.

Схожі статті