Остаточне керівництво по веб-оптимізації (поради та найкращі практики)

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

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

Ми розбили речі на 3 окремі секції для кращої читаності - відповідно оптимізація на стороні сервера, оптимізація активів (яка включає веб-компоненти, такі як CSS, Javascript, зображення тощо) і платформа, де ми зосередимося Оптимізація WordPress. В останньому розділі ми кинемо в пару посилань, які ми вважали корисними. Повний список після стрибка.

Оптимізація: на стороні сервера

1. Виберіть гідний веб-хост

   Ваш обліковий запис хостингу не має прямого відношення до оптимізацій, які ви збираєтеся виконати, але ми вирішили, що вибір правильного акаунта хостингу настільки важливий, що ми вирішили спочатку звернути його до уваги. Хостинг акаунт є основою вашого веб-сайту / блогу, в якому важливу роль відіграють безпека, доступність (cPanel, FTP, SSH), стабільність серверів, ціни та підтримка клієнтів. Вам потрібно переконатися, що ви перебуваєте в хороших руках.

   Рекомендоване читання: Як вибрати веб-хост від wikiHow це відмінна стаття, яка дає вам кроки і поради, які ви повинні знати перед покупкою будь-якого акаунта хостингу.

2. Окремо розміщення активів

   Коли ми згадуємо активи, ми мали на увазі подібні веб-компоненти зображення і статичні сценарії які не вимагають обробки на стороні сервера. До них належать будь-які веб-графіки, зображення, Javascript, каскадні таблиці стилів (CSS) і т.д. Власники хостингу окремо не є обов'язковими, але ми бачили величезний результат з точки зору стабільності сервера, коли цей блог мав сплеск трафіку.

   Рекомендоване читання: Максимізація паралельних завантажень в Carpool Lane.

3. Стиснення за допомогою GZip

   Коротше кажучи, вміст переміщується з боку сервера на сторону клієнта (vicet versa), коли виконується HTTP-запит. Стиснення вмісту для надсилання значно скорочує час, необхідний для обробки кожного запиту.

   GZip це один з кращих способів зробити це, і він відрізняється залежно від типу серверів, які ви використовуєте. Наприклад, Apache 1.3 використовує mod_zip, Apache 2.x використовує mod_deflate і ось як ви це робите Nginx. Ось деякі дійсно хороші статті, які допоможуть вам ознайомитися зі стисненнями на стороні сервера:

   • Прискорити веб-сайт, увімкнувши стискання файлів Apache
   • Стиснути веб-вихід за допомогою mod_gzip і Apache
   • Як оптимізувати ваш сайт за допомогою стиснення GZIP
   • Серверне стиснення для ASP

4. Мінімізувати перенаправлення

   Веб-майстри постійно переадресують URL-адресу (будь то перенаправлення Javascript або META). Іноді його призначення полягає в тому, щоб вказувати користувачів зі старої сторінки на нову або просто направляти користувачів на правильну сторінку. Кожне переспрямування створює додатковий HTTP-запит і RTT (зворотний час). Чим більше переадресації ви отримаєте, тим повільніше користувач потрапить на цільову сторінку.

   Рекомендоване читання: Уникайте переадресацій Google Code надає вам хороший огляд цього питання. У статті також рекомендуються деякі практичні способи мінімізації перенаправлення для збільшення швидкості обслуговування.

5. Скорочення пошуку DNS

   Згідно з Yahoo! Блог мережі розробників, DNS (система доменних імен) дозволяє вирішити IP-адресу для вказаного імені або доменного імені, а браузер не може нічого робити, поки процес не буде виконаний належним чином..

   Автор Стів Соудерс припустив, що поділ цих компонентів на щонайменше два, але не більше чотирьох імен хостів знижує кількість пошуків DNS і дозволяє здійснювати паралельні завантаження з високим ступенем. Дізнайтеся більше на статтю.

Оптимізація: активи (CSS, Javascripts, Images)

1. Об'єднати кілька Javascripts в один

   Люди в rakaz.nl ділиться способами поєднання декількох Javascript, наприклад:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   Ввести в один файл, змінивши URL-адресу на:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   маніпулюючи .htaccess і використовуючи PHP. Натисніть тут читати далі.

2. Стисніть Javascript і CSS

   Зменшити це додаток PHP5, який може об'єднувати декілька файлів CSS і Javascript, стискати їх вміст (тобто видаляти непотрібні пробіли / коментарі) і подавати результати за допомогою кодування HTTP (gzip / deflate) і заголовків, які дозволяють оптимально кешувати на стороні клієнта.

   

   Стискайте їх в Інтернеті!Є також деякі веб-сервіси, які дозволяють вручну стискати файли Javascript і CSS в Інтернеті. Ось декілька, які ми дізнаємося:

   • compressor.ebiene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • Оптимізатор CSS (CSS)

3. Налаштування закінчення терміну дії / кешування

   Кредит: httpwatch

   Використовуючи налаштований заголовок Expiry, ваші веб-компоненти, такі як зображення, статичні файли, CSS, Javascript, пропускали непотрібний HTTP-запит, коли той же користувач перезавантажив сторінку вдруге. Це зменшує необхідну пропускну здатність і, безумовно, допомагає швидше обслуговувати сторінку.

   Рекомендовані читання:

   • Yahoo! Блог мережі розробників - додайте заголовок Expires
   • Як додати хороші терміни заголовків зображень в Apache 1.3
   • Кешування HTTP
   • Кешування Керівництво для веб-авторів і веб-майстрів

4. Вивантаження активів

   Під завантаженням ми маємо на увазі відокремлення Javascript, зображень, CSS і статичних файлів від головного сервера, на якому розміщено веб-сайт, і розміщення їх на іншому сервері або використання інших веб-служб. Ми бачили тут значне поліпшення Hongkiat шляхом завантаження активів до інших доступних веб-сервісів, в результаті чого сервер виконує обробку PHP. Ось кілька пропозицій онлайн-служб для розвантаження:

   • Зображення: Flickr, Smugmug, платні *
   • Javascript: Google Ajax Library, Google App Engine, платні хостингу *
   • Веб-формаs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Опитування та опитування: SurveyMonkey, PollDaddy

   * Платні проживання - Платні послуги завжди мають кращу надійність і стабільність. Якщо ваш сайт постійно вимагає активів, потрібно переконатися, що вони знаходяться в хороших руках. Ми рекомендуємо Amazon S3 і Cloud Front.

5. Обробка веб-зображень

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

   • Оптимізуйте зображення PNGЛюди в Smashing Magazine описують деякі розумні методи, які можуть допомогти вам оптимізувати PNG-зображення.
   • Оптимізація для Web - Що потрібно знати (формати) Докладніше про JPEG, GIF, PNG і про те, як слід зберігати зображення для веб-пошуку.
   • Не масштабувати зображенняЗавжди практикуйте вставлення ширина і висота для кожного зображення. Також не зменшуйте масштаб зображення лише тому, що вам потрібна менша версія в Інтернеті. Наприклад: Не примушуйте масштабувати зображення розміром 200 × 200 px до 50 × 50 пікселів для вашого веб-сайту, змінюючи значення ширина і висота. Замість цього отримайте 50 × 50 px.

   Оптимізація за допомогою веб-служб і інструментів. Доброю новиною є те, що вам не потрібно бути експертом Photoshop для оптимізації зображень. Є багато веб-служб і інструментів, які допоможуть вам виконати цю роботу.

   • Smush.itМожливо, це один з найбільш ефективних інструментів для онлайн-оптимізації зображень. Там навіть плагін для WordPress!
   • Знімач JPEG та PNGЗасіб Windows для видалення / очищення / видалення непотрібних метаданих (небажаних) з файлів JPG / JPEG / JFIF & PNG.
   • Оптимізатор зображеньДозволяє легко оптимізувати ваші картинки, анімовані картинки, jpgs та pngs, щоб вони завантажувалися якомога швидше на ваш сайт за допомогою динамічного диска
   • SuperGIFЗробіть всі ваші зображення та анімацію GIF меншими.
   • Ось ще.

6. Обробка CSS

   Сучасні веб-сайти використовують CSS як основу стилю, а також зовнішній вигляд. Не тільки CSS дає велику гнучкість у змінах, але й менший з точки зору необхідних кодів. Однак, якщо вони погано закодовані, це може бути зворотним ефектом. Ось кілька контрольних списків, а точніше довідники, щоб переконатися, що ваш CSS правильно оптимізований:

   • Тримайте дітей у відповідності з потомствомЯк зберегти розмітку чистою за допомогою CSS Selectors.
   • Зберігайте CSS короткіКоли вони дають один і той же стиль, коди краще, чим вони коротші. Ось a Стислий посібник CSS можливо, вам знадобиться.
   • Використовуйте CSS SpriteТехніка CSS Sprite зменшує HTTP-запит при кожному завантаженні сторінки, об'єднуючи декілька (або всіх) зображень разом на одному файлі зображення та керуючи його виведенням за допомогою CSS фонове положення атрибут. Нижче наведено кілька корисних посібників та методів створення CSS-спрайтів:
     • Онлайн-генератор CSS Sprite
     • Кращий онлайн і оффлайн CSS спрайт генератор
   • Використовуючи кожну декларацію лише один разОптимізуючи файли CSS, одним з найпотужніших заходів, які можна застосувати, є використання кожного оголошення лише один раз.
   • Зменште кількість файлів CSSПричина проста: чим більше файлів CSS, тим більше HTTP-запиту потрібно робити, коли запитується веб-сторінка. Наприклад, замість того, щоб мати кілька файлів CSS, наприклад:

     Ви можете об'єднати їх у один єдиний CSS:

   Рекомендовані читання:

   • Корисні інструменти для перевірки, очищення та оптимізації файлу CSSДеякі корисні інструменти, які можна використовувати для оптимізації вашого CSS-коду, навіть якщо ви повністю не знаєте кодування CSS.
   • 7 принципів чистого і оптимізованого CSS-кодуОптимізація - це не тільки мінімізація розміру файлу, але й організація, безладдя та ефективність.
   • Кращі практики оптимізації CSSРозгляньте цю статтю більше як академічну вправу, а не поради з оптимізації реального життя.

Оптимізація для WordPress

Час від часу ми контролюємо, аналізуємо та аналізуємо продуктивність нашого блогу WordPress. Якщо сайт працює повільно, ми повинні знати, чому. Ось деякі основні зміни, які ми зробили, і ми зрозуміли, що значно збільшить швидкість вашого блогу WordPress.

1. Кеш блог Worpress

   WP-Cache є надзвичайно ефективною системою кешування сторінок WordPress, щоб зробити ваш сайт набагато швидшим і чуйним. Ми також рекомендуємо WP Super Cache що покращує від попереднього згаданого плагіна і теж робить велику роботу.

2. Вимкніть та видаліть невикористані модулі

   Коли ви помітили, що ваш блог завантажується дуже повільно, перевірте, чи встановлено багато плагінів. Вони можуть бути винуватцем.

3. Видалити непотрібні теги PHP

   Якщо ви подивитеся на вихідні коди вашої теми, ви знайдете багато тегів, таких як:

   Вони можуть бути значною мірою замінені текстовим вмістом, який не викликає навантаження на сервер. Перевіряти Майкл Мартін's 13 Теги для видалення з вашого WordPress Blog

Рекомендовані читання:

• 3 Найпростіших способів прискорити WordPressДжон Позадзідз поділяє, як його блог плавно плаває через трафік Digg.
• 13 Великий WordPress Швидкість Поради та хитрості для MAX продуктивності Ось кілька речей, які можна спробувати, якщо ви виявите, що ваш сайт WordPress не працює так само добре, як через високий трафік або приховані проблеми, про які ви не знаєте..
• 40 Поради щодо оптимізації WordPressПоради щодо оптимізації у слайдах. 40 порад за 40 хвилин.

Не в останню чергу…

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

• Yahoo! YSlow

  YSlow аналізує веб-сторінки та пропонує шляхи підвищення їх продуктивності на основі набору правил для високопродуктивних веб-сторінок. Це дає вам гарне уявлення, що потрібно зробити для того, щоб веб-сайт швидше завантажувався.

  (Потрібен Firebug)

  

• PageSpeed

  Схожий на Yahoo! YSlow, Google Швидкість сторінки це додатковий компонент Firebug з відкритим вихідним кодом для оцінки показників роботи веб-сайтів та їх покращення. (Потрібен Firebug)

  

• Інструменти Pingdom

  Інструменти Pingdom повне завантаження веб-сайту, включаючи всі об'єкти (зображення, CSS, JavaScript, RSS, Flash і фрейми / фрейми) і показує загальну статистику про завантажену сторінку, наприклад загальну кількість об'єктів, загальний час завантаження та розмір, включаючи всі об'єктів.

  

Рекомендовані читання:Ось більше порад та інструментів, які варто перевірити.

• Google Web Optimizer
• 15 Інструменти, які допоможуть вам розробити більш швидкі веб-сторінки
• 15 + Поради для прискорення вашого веб-сайту, і оптимізувати свій код!