Використовуємо програми

244
  • Чистимо фонову графіку для зниження числа http запитів
  • Стиснення та оптимізації зображень на швидкому сайті
  • Стиснення скриптів для отримання швидкого сайту
  • Здрастуйте, шановні читачі блогу . Низька швидкість завантаження сторінок сайту може негативно позначитися на популярності вашого проекту (особливо до цього критично ставляться користувачі з високою швидкістю інтернету, які не звикли чекати).

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

    Використовуємо програми

    З допомогою Page Speed ми спробуємо максимально здійснити стиснення зображень, скриптів і CSS файлів. Хоча про стиснення CSS за допомогою Page Speed ми вже говорили, а значить залишилося здійснити стиснення зображень і різних скриптів, які завантажуються в браузер користувача з вашого сервера.

    Але давайте для початку я нагадаю те, про що ми говорили у перших статтях по створенню швидкого сайту:

  • Як виміряти швидкість завантаження сайту онлайн, а потім збільшити її за допомогою порад Page Speed
  • Оптимізація (стиснення) CSS Page Speed
  • Gzip стиснення для прискорення завантаження сайту
  • Чистимо фонову графіку для зниження числа http запитів

    Щодо картинок відразу варто обмовитися — перш, ніж приступити до їх оптимізації, вам, мабуть, слід вирішити, а чи потрібні вони у вас на сайті?! Справа в тому, що в шаблоні вашого ресурсу можуть бути описані в CSS файлі фонові зображення для відображення різних елементів дизайну, але при цьому їх ви з тих чи інших причин не використовуєте.

    Взагалі, зображення на сайті можуть виводитися двома способами: за допомогою Html-тега IMG (тут і тут читайте детальніше), а так само за допомогою CSS властивостей «background» або «background-image», який може виглядати, наприклад, так:

    background:url(https:///wp-content/themes/Organic/images/spriteme3.png) no-repeat;

    При завантаженні сторінок відбувається і завантаження картинок, заданих як через IMG, так і фонових зображень, описаних властивостями «background» в CSS файлі. Переглянути всі завантажувані в браузер користувача графічні файли можна в нашому засобі для отримання швидкого сайту — Page Speed на вкладці «Resources»:

    Використовуємо програмиВикористовуємо програми

    У колонці «Type» для графіки, вставленої через IMG, буде прописано «image», а для фонових зображень, вставлених через CSS — «cssimage». Тому за допомогою Page Speed вам буде досить просто їх розрізнити, до того ж, підвівши курсор до позиції з цікавлять вас зображенням, ви побачите його превьюшку:

    Використовуємо програмиВикористовуємо програми

    До чого я все це кажу? Справа в тому, що коли я дійшов до стиснення (оптимізації) зображень, бажаючи створити максимально швидкий і спритний блог, то перш за все уважно вивчив всю подгружаемую з мого web сервера в браузери користувачів графіку і прийшов до невтішного висновку.

    По-перше, об’єктів було занадто багато (близько 70), що зовсім не здорово, бо для передачі кожного з них формується окремий http запит. 70 http запитів витрачався тільки на завантаження графіки — це неприпустимо багато, бо сильно знижує швидкість сайту. Отже, одним з найбільш дієвих способів може бути зменшення числа http запитів при завантаженні сторінки вашого ресурсу.

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

    При первинній настройці теми під свої потреби, я не дуже коректно прибрав ці зображення з оформлення, забувши видалити відповідні їм CSS властивості («background») з файлу стильового оформлення теми (style.css), який зазвичай розташований по наступному шляху:

    /wp-content/themes/Звичайний/style.css

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

    До слова сказати, таким чином мені вдалося заощадити до 20 http запитів при завантаженні будь-якої сторінки мого блогу, видаливши, відповідно, style.css близько 20 записів про підвантаження фонових зображень (непотрібних або малозначних). Для проведення подібної операції вам потрібно буде підключитися до свого ресурсу через FTP-клієнт і відкрити на редагування файл стилів із зазначеної вище папки.

    Далі ви проводите пошук за нього за допомогою засобів того редактора, в якому ви його відкрили. Шукати слід за назвою графічного файлу, який ви бажаєте видалити. Знаходьте рядок з властивістю «background», з-за якої підвантажується це фонове зображення і видалити її. Перевіряєте через Page Speed коректність проведених вами дій.

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

    Стиснення та оптимізації зображень на швидкому сайті

    Найпростіший варіант стиснути всі зображення на своєму сайті — підключити сервіс OptiPic.io.

    Чому це так?

  • Підключається до сайту буквально за 2 хвилини.
  • Повний автопілот — OptiPic знайде і оптимізує всі зображення на сайті в автоматичному режимі.
  • Сервіс періодично буде моніторити додавання на сайт нових зображень. Вони автоматом будуть додаватися в чергу на стиск.
  • Це безпечно — зображень перед стисненням автоматично створюються копії кожного .
  • Є можливість автоматично зменшити ширину або висоту зображень (resize).
  • Підтримка будь-яких php-сайтів (будь CMS, фреймворки або навіть самописні движки).
  • Плюс у OptiPic є партнерська програма, за допомогою якої можна отримувати до 40% від залучених клієнтів.

    А взагалі, можна зробити дві речі — оптимізувати розмір кожного окремого зображення через Page Speed, а так само об’єднати деякі фонові картинки з файлу стильового оформлення в так звані CSS спрайт.

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

    Мені дуже подобається онлайн сервіс PunyPNG, який просто чудово стискає графіком формату PNG (я вже писав тут, коли краще використовувати формат PNG, коли JPG, а коли і GIF):

    Використовуємо програмиВикористовуємо програми

    Дуже непоганий був і Яховський Smush.it:

    Використовуємо програмиВикористовуємо програми

    Але для роботи з графікою шаблону простіше буде скористатися можливостями самого Page Speed (ну, або на худий кінець FastStone Image Viewer, описаного тут), тим більше, що він стискає графіком дуже ефективно і без втрати якості (іноді навіть в кілька разів зменшує розмір і, відповідно, прискорює сайт).

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

    Використовуємо програмиВикористовуємо програми

    Здогадайтеся, кому він може належати (підказую — пошуковій системі Google.ru, про яку йшлося тут). В принципі, створювати CSS спрайт з нуля в якому-небудь графічному редакторі дуже складно, бо потім треба буде style.css дуже чітко описати позиції того чи іншого малюнка на великому зображенні.

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

    Але про це ми поговоримо, напевно, вже в наступній статті (див. посилання на неї кількома абзацами вище), а зараз хочу сказати кілька слів про те, як в Page Speed стиснути зображення.

    Так, в принципі, точно так само, як і трохи раніше стискали CSS засобами Page Speed. Тільки виконати все теж саме потрібно буде для іншої рядки під назвою «Optimize images». Клацаєте по плюсику поряд з цим рядком і переглядаєте список тих картинок на відкритій у браузері сторінці, які на думку цього плагіна можна оптимізувати:

    Використовуємо програмиВикористовуємо програми

    Далі вам потрібно буде клацнути по»Save as» і викачати вже стиснуте зображення на свій комп’ютер. У першу чергу варто оптимізувати ті, які входять до складу вашого шаблону, і, отже, завантажуються на кожній сторінці.

    Навіть трохи оптимізувавши графіком шаблону, ви зможете вплинути на загальну швидкість завантаження всього сайту. До того ж вони, як правило, стискуються дуже сильно (до декількох разів, у всякому разі для моєї теми WordPress).

    Стиснення скриптів для отримання швидкого сайту

    Крім зображень з допомогою Page Speed ви можете так само стиснути скрипти JavaScript, jQuery), які завантажуються в браузери користувачів з вашого веб-сервера. Зробити це можна у рядку під назвою «Minify JavaScript»:

    Використовуємо програмиВикористовуємо програми

    Дуже здорово було б попередньо об’єднати всі зовнішні скрипти в один файл (це нам радить зробити сам плагін в рядку «Combine external JavaScript»), за аналогією з тим, як ми це зробили трохи раніше для CSS.

    Для блогу на WordPress відключити непотрібні зовнішні скрипти, після їх об’єднання в один великий файл, можна знову ж таки за аналогією з описаним мною раніше випадком.

    Правда, в файл functions.php, про який ми говорили тут (живе він в папці /wp-content/themes/назва теми WordPress/), потрібно буде прописати дещо інший код з зазначенням регістрів плагінів:

    add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );
    function my_deregister_javascript() {
    wp_deregister_script( ‘регістр 1-го WordPress плагін, який відповідає за підключення скрипта’ );
    wp_deregister_script( ‘реєстр 2-го плагіна WordPress’ );
    wp_deregister_script( ‘регістр 3-го плагіна WordPress’ );
    }

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

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

    Ще однією проблемою, яка була позначена в Page Speed червоним кольором, як дуже важлива для швидкості завантаження сайту, була завантаження всіх об’єктів з одного хоста () — «Parallelize downloads across hostnames». На думку цього інструменту краще було б розпаралелити завантаження об’єктів з різних хостів, збільшивши тим самим загальну швидкість.

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

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

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

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

    Redirect 301 /image http://images.

    Тут /image»» — каталог з картинками на основному хості (де і прописується код 301 редіректу в .htaccess), а http://images.»» нове розташування на альтернативному хості. Але виявилося, що, по-перше, швидкість роботи спеціалізованого хоста досить низька, а по-друге, при цьому перестало працювати кешування статичних об’єктів в браузерах користувачів.

    Page Speed відразу ж виділив червоним рядок «Leverage browser caching». Причому прописування в файл .htaccess на новому хості потрібних директив результату не дало. Швидше за все, той сервер просто-напросто ці директиви не був здатний виконати.

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

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

    Використовуємо програми«alt=»»>

    Удачі вам! До зустрічей на сторінках блогу