Базовий посібник по оптимізації веб-сайтів (поради та краща практика)
Рейтинг статті: / 9
НайгіршеНайкраще 
Базовий посібник по оптимізації веб-сайтівВеб оптимізація є життєво важливою частиною веб-розробки та обслуговування, а її щось часто забувають вебмайстри. Подумайте про ті кошти, які Ви можете зберегти, і як оптимізація може потенційно допомогти збільшити читацьку аудиторію і трафік, коли її правильно виконати.
Якщо Ви ще досі не зробили ніякої оптимізації Вашого сайту (чи блогу), або Вам просто цікаво, як це може допомогти прискорити Ваш сайт, будь ласка, подивіться цей список порад з оптимізації, які ми зібрали разом. Ми розділири все на 3 окремих розділи для кращого ознайомлення - відповідно, оптимізація на стороні сервера, оптимізація активів (яка включає в себе веб компоненти, такі як CSS, JavaScript, картинки і т.д.) і платформи, де ми зосередились на оптимізації WordPress. В останньому розділі ми вирішили кинути пару корисних посилань.
Оптимізація: сторона сервера
1. Виберіть гідний веб-хостинг
Ваш хостинг-аккаунт не має прямого зв'язку з оптимізацією, яку Ви збираєтеся виконувати, але правильний вибір хостинг-акаунта настільки важливий, що ми вирішили звернути Вашу увагу на нього, в першу чергу. Хостинг-аккаунт є основою Вашого сайту/блогу, на якому він розміщується, забезпечується його безпека, доступність (CPanel, FTP, SSH), стабільність роботи сервера, вартість і підтримка клієнта - все відіграє важливу роль. Ви повинні переконатися, що Ви в хороших руках.
Радимо прочитати:
  • Як вибрати веб-хостинг - велика стаття від wikiHow, яка надає Вам поради і про які кроки Ви повинні знати перед покупкою будь-якого веб-хостингу у провайдера.
2. Окремі хостинг-активи
Коли ми говоримо про активи, ми маємо на увазі веб-компоненти, наприклад, зображення та статичні сценаріїв, які не вимагають обробки на стороні сервера. Це включає будь-яку веб-графіку, зображення, JavaScripts, каскадні таблиці стилів (CSS) і т.д. Хостинг-активи окремо не існують, але ми бачили величезний вплив на стабільність сервера від їх реалізації, коли вилазили шипи на трафіку блогу.
Радимо прочитати:
3. Стиснення з GZip
Якщо коротко, то передача контенту зі сторони сервера до клієнта (навпаки), якщо виконується запит HTTP. Стиснення контенту для відправки значно скорочує час, необхідний для обробки кожного запиту. GZip є одним з кращих способів це зробити, але це робиться по різному, залежно від типу використаних Вами серверів. Наприклад, Apache 1.3 використовує mod_zip, Apache 2.x використовує mod_deflate, а тут, як Ви це зробите в Nginx.
4. Мінімізація перенаправлення
Вебмайстри роблять URL-перенаправлення (будь то, Javascript або META перенаправлення) завжди. Іноді метою перенаправлення є вказівка користувачам зі старих сторінок на нові, або просто допомога користувачу перейти на потрібну сторінку. Кожне перенаправлення створює додатковий запит HTTP і RTT (час в обидва кінці). Чим більше перенаправленнь у Вас є, тим довше користувач переходитиме на сторінку призначення.
Радимо прочитати:
  • Мінімізація переадресацій на Google Code дає хороший огляд з цього питання. У статті також рекомендуються практичні способи мінімізації перенаправлень для збільшення швидкості.
5. Скорочення DNS-запитів
Згідно даних блогу Yahoo! Developer Network, близько 20-120 мілісекунд витрачається на DNS  (Domain Name System) для дозволу IP-адрес для даного хоста або доменного імені і браузер нічого не може робити, поки цей процес не завершений належним чином.
Автор Стів Саудерс запропонував розщеплення цих компонентів принаймні на два, але не більше чотирьох хостів, щоб зменшити DNS-запити, дозволивши швидке паралельне завантаження.
Оптимізація: активи (CSS, JavaScripts і Images)
1. Злиття кількох Javascripts в один
Відвідувачі на rakaz.nl поділились, як можна об'єднати декілька подібних Javascripts:
в один файл, змінивши URL так:
2. Стиснення Javascript і CSS
Minify є PHP5 додатком, який може об'єднати кілька CSS і Javascript файлів, стиснувши їх вміст (наприклад, видаливши непотрібні прогалини/коментарі) та доповнить результати HTTP-кодуванням (GZIP/викачати) і заголовками, які дозволять оптимальне кешування на стороні клієнта.
Стиснення в Інтернеті.
Є деякі веб-сервіси, які дозволяють вручну стиснути Javascripts і CSS файли в Інтернеті. Ось декілька з відомих нам:
3. Налаштування терміну заголовка/кешування
При використанні налаштовуваного терміну заголовка такі веб-компоненти, як зображення, статичні файли, CSS, Javascript, пропускають непотрібний запит HTTP, коли користувач перезавантажує сторінку повторно. Це знижує необхідну пропускну здатність і, безумовно, допомагає швидше обслужити сторінки.
4. Активи для розвантаження
Під активами для розвантаження ми розуміємо окремі Javascripts, зображення, CSS і статичні файли з основного сервера, де розміщується сайт, і розміщення їх на іншому сервері або використання інших веб-служб. Можна мати значне поліпшення з розвантаження активів, доступних на інших веб-сервісах, залишивши сервер виконувати в основному обробку PHP. Ось деякі пропозиції онлайн послуг для розвантаження:
* Платний хостинг - Платні послуги завжди мають більш високу надійність і стабільність. Якщо Ваш сайт постійно вимагає активів, то Вам необхідно переконатися, що він знаходиться в хороших руках.
5. Обробка веб зображення
Зображення є важливою частиною Вашого сайту. Однак, якщо їх неправильно оптимізувати, вони можуть стати тягарем і в кінцевому підсумку щоденно використовувати непередбачувано велику ширину каналу доступу.
Ось деякі кращі рекомендації для оптимізації Вашого зображення:
Не масштабуйте зображення
Завжди практикується вставка ширини і висоти для кожного зображення. Також не зменшувати зображення лише тому, що Вам потрібна менше версія для Інтернету. Наприклад, не застосовуйте сильне зменшення масштабу зображення 200 × 200 пікселів до 50 × 50 пікселів для Вашого сайту, змінюючи ширину і висоту. Отримайте 50 × 50 пікселів конвертуванням.
Оптимізація за допомогою веб-служб і інструментів.
Хороша новина в тому, що Ви не повинні бути експертом Photoshop для оптимізації Ваших зображень. Є багато веб-сервісів та інструментів, які допоможуть Вам у роботі:
Ймовірно, один з найбільш ефективних онлайн-інструментів для оптимізації зображень. Так навіть є WordPress plugin для нього!
6. Обробка CSS
Сучасні веб-сайти використовують CSS як основу стилю, а також для оформлення зовнішнього вигляду. CSS надає не тільки велику гнучкість для змін, він також вимагає меншого коду. Однак, якщо поганий код, то це може дати зворотний ефект.
Ось деякі контрольні списки, або, вірніше, направляючі, щоб Ви переконалися, що CSS правильно оптимізований:
CSS Sprite техніка зменшує HTTP-запит кожен раз при завантаженні сторінки шляхом об'єднання декількох (або всіх) зображень в єдиний файл образу і керування його виведенням через CSS атрибут background-position.
Ось кілька корисних настанов та методів для створення CSS Sprites:
Сумарне скорочення CSS-файлів.
Причина проста: чим більше CSS-файлів є у вас, тим більше HTTP-запитів при цьому доведеться зробити, коли запитується веб-сторінка. Наприклад, замість того, щом мати кілька CSS файлів, таких як наступні:
Ви можете їх об’єднати в один CSS-файл:
Радимо прочитати:
Оптимізація для WordPress
Час від часу, ми відстежуємо, тестуємо та аналізуємо продуктивність нашого блогу WordPress. Якщо сайт працює повільно, ми повинні знати, чому. Ось деякі основні зміни, які ми зробили і вирішили, що це дозволить значно збільшити швидкість Вашого блогу WordPress.
1. Кешуйте Ваш блог Worpress
WP-Cache є надзвичайно ефективною системою кешування сторінки WordPress, щоб зробити Ваш сайт набагато швидшим і чуйними. Ми також рекомендуємо WP Super Cache, який є розвитком попереднього згаданого плагіна і теж робить велику роботу.
2. Відключіть та видаліть невживані плагіни
Коли Ви помітите, що Ваш блог завантажується дуже повільно, і у Вас встановлено багато плагінів, то саме вони можуть бути причиною.
3. Видаліть непотрібні PHP теги
Якщо подивитеся на джерело кодів Вашої теми, то знайдете багато таких тегів, як ці:
В них в значній мірі може бути змінений текстовий зміст, який не викликатиме навантаження на сервер. Майкл Мартін: 13 тегів для видалення з Вашого WordPressблогу.
Радимо прочитати:
Не в останню чергу ...
Ось кілька корисних веб-сервісів та інструментів, які дають Вам більш широку перспективу і кращий аналіз, щоб допомогти в оптимізації веб-сайтів.
YSlow аналізує веб-сторінки та пропонує шляхи для поліпшення їх роботи на основі набору правил для високої продуктивності веб-сторінок. Це дає корисну інформацію, що необхідно зробити для того, щоб прискорити завантаження веб-сайту (потрібний Firebug).
Як і в Yahoo! YSlow, Google Page Speed є відкритим вихідним кодом доповнення Firebug для оцінки параметрів сайту і того, як їх поліпшити. (потрібний Firebug)
Pingdom Tools приймає повне навантаження Вашого сайту, включаючи всі об'єкти (зображення, CSS, JavaScripts, RSS, Flash і кадри та фрейми) і показує загальну статистику про завантажені сторінки: загальне число об'єктів, загальний час завантаження і розмір, включаючи всі об'єкти.
(Джерело EN: hongkiat.com)
 
>
КнигаНовиниПрактика пошукуПартнериПро нас
Підтримка та дизайн: Могильний С.С. Шаблон: Joomla Templates by BuyHTTP Joomla Hosting