Швидкість завантаження сайту. 4 головні фактори.

Tags: SEO

Швидкість завантаження сайту. Як збільшити швидкість завантаження? Основні проблеми.

Рекомендована швидкість завантаження сайту гуглом - 2 секунди. (а тепер подивіться на вашу швидкість)

(Як перевірити швидкість завантаження сайту?)Найпростіший і найшвидший спосіб це відкрити інструменти розробника CTRL+SHIFT+IДалі вибрати вкладку “Network”, потім оновити сторінку, щоб побачити швидкість завантаження потрібно оновити сторінку, оновити без кешу: потрібно натиснути CTRL+F5/CTRL+R. І внизу буде швидкість завантаження.

Перевірити швидкість завантаження сайту
за допомогою сервісу від Google: PageSpeed Insights

Основні моменти, які впливають найбільше:

Кеш
CSS (стилі)
JS (Скрипти)
Картинки (їх вага, розмір – та саме розмір HxW, Мета дані – та й таке є, це їхня інформація така як: Дата, назва, тема та ін.)

Щоб не розписувати багато непотрібної інформації про дрібні моменти, які особливо не впливають або мізерно впливають – про них не писатиму.

#1 КЕШ

Кешування (абокеш) – це буфер (місце), де зберігаються будь-які дані. У нашому випадку це Картинки, код, стилі та інше.

Найпростіше що можна зробити самому – це увімкнути кешування на хостингу.
(Якщо у вас хостинг Ukraine.com.ua тоді вам потрібно зайти в "налаштування сайту" -> "основні налаштування" і там буде пункт "Кешування" і там вибираєте необхідну кількість часу на яке буде виконуватися кешування вашого сайту. Від себе порекомендую ставити 2 тижні – при цьому періоді кешування google page speed insights додає чимало пунктів.)

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

#2 CSS (стилі)

CSS – (Cascading Style Sheets – каскадні таблиці стилів).
Що можна зробити із стилями?
Ну по перше стиснути їх.
По-друге скоротити кількість файлів, тобто. об'єднати максимум, щоб скоротити кількість звернень до сервера.
По-третєосновні стилі, які впливають на відображення видимої частини першого екрану, вбудувати безпосередньо в , а решту залишити у файлику.

також залишаю пару корисних посилань:

сервіси для стиснення css
спосіб стиснення css файлів

#3 JS (скрипти)

Тут також у нас кілька способів оптимізації скриптів.

Відкласти завантаження скрипту. Запхати його якнайнижче, винести аж за або ще нижче іноді це допомагає, іноді це не варіант. На допомогу приходить пункт під номером 2.
ASYNC - асинхронне підвантаження скрипта. Робиться за допомогою параметра "async"
Тут докладніше про async.
Ще трохи інформації про JS та його вплив.
Мало значущий пункт.
JS також можна стиснути. Також поєднати в 1 файл.

#4 Картинки

Вічно можна робити три речі: дивитися на вогонь, дивитися на воду та оптимізувати картинки.

Тема досить велика, тому постараюся тільки важливу інформацію вам дати.

Оптимізувати вагу.

Як? За допомогою програми чи сервісу.

Програма для масової роботи з картинками FastStone Imageза допомогою неї можна
масово змінити обсяг зображень. Як і що вже гуглить там не складно.
Завантажити Faststone Image.
Сервіс для зменшення розміру картинок Panda. А точніше TinyPNG&TinyJPG.
Головна перевага ОНЛАЙН. Просто закидає файли і отримуєте назад в стислому варіанті - Якість абсолютно не страждає (it's Magic).
Посилання: tinypng.com & tinyjpg.com

Оптимізувати розмір.

Розмір, як я писав вище, можна змінити за допомогою програми FastStone Image.
Розмір це Height x Weight (Висота на Ширину).

Приклад:

Розмір	Пікселі	розмір файлу
100 х 100	10 000	39 КБ
200 x 200	40 000	156 КБ
300 x 300	90 000	351 КБ
500 x 500	250 000	977 КБ
800 x 800	640 000	2500 КБ

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

Наприклад, у нас є 2 зображення:
1) Вага 100кб Розмір 500х500
2) Вага 100кб Розмір 2500х2500
Здавалося б яка різниця важать то вони однаково, тому і завантаження їх має бути однакова складна або проста, але не тут було якщо перевіряти по google page speed insgiht то він все одно лаятиметься на зображення з великою роздільною здатністю.

Резюмуючи: Розмір має значення. Вага також. (Інше не так важливо, але з доводів деяких фахівців також має вплив, зараз я говорю про Мета даних зображень)

Про ці дані нічого до ладу не написав, ну тут писати те й нічого…
Просто очистити повністю всі ці дані у всіх картинок, за легендою можна зменшити розмір в 2 рази. Дізнався сам недавно (про вплив розміру файлу, думав це зовсім незначно).

Коротко про випуск: