(Онлайн чек-лист) самостійна оптимізація швидкості сайту - як збільшити швидкість завантаження сайту

Самостійна оптимізація швидкості сайту

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

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

У даній статті і чек-листі я постараюся не прив`язуватися до конкретної CMS, а писати таким чином, щоб рішення підійшли для будь-якого сайту.

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

Етап 1. Визначте "рамки" оптимізації швидкості сайту

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

визначивши "рамки", Ми будемо знати кінцеву, до якої потрібно йти. А допоможе нам знайти дані"рамки оптимізації швидкості сайту"Сервіс, створений Джонатаном Філдінгом - performancebudget.io.

Подивіться невелике відео по роботі з даним сайтом, де я наочно показав що потрібно вибрати, щоб визначити "рамки оптимізації швидкості сайту":

Етап 2. Дізнаємося реальну швидкість сайту

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

  • WebPagetest
  • GTmetrix

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



сервіс WebPagetest дозволяє вибрати сервер тестування і браузер. Даний сервіс показує у вигляді діаграм якими операційними системами (CSS, JS) найбільше в процентному співвідношенні на вашому сайті. Що найбільше радує, так це докладна статистика по запитах у вигляді графіків. Також є інформація про те, до яких файлів застосовується GZIP стиснення і стає відразу зрозуміло чи все вірно вказали в налаштуваннях .htaccess.

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

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

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

(Чек-лист) Самостійна оптимізація швидкості сайту

1. Оптимізація зображень

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

    Часто зустрічаються ситуації, коли використовуються зображення, у яких дозвіл велике (наприклад, 800x600px), а на сторінці використовується лише мініатюра (наприклад, 300x225px). Особливо часто зустрічається дана помилка при створенні галерей. Використовуйте тільки те дозвіл зображення, яке необхідно в конкретній ситуації.

  2. Об`єднайте всі іконки (якщо SVG, то в SVG-спрайт) в одне зображення (спрайт).

    Це зменшить кількість запитів до сервера. Зараз існують онлайн рішення: css.spritegen.com, iconizr. Так і рішення для збирачів (для Gulp - gulp-svg-sprites, для Grunt - grunt-svg-sprite, для Webpack - Webpack SVG sprite loader).

  3. Оптимізуйте зображення: PNG, JPG, SVG.

    Тут є як онлайн рішення: TinyPNG, Kraken.io. Так і автоматизовані рішення для збирачів: Gulp - gulp-imagemin, gulp-pngquant- Grunt - grunt-contrib-imagemin- Webpack - imagemin-webpack-plugin.

  4. Deferring images without lazy loading or jQuery - https://varvy.com/pagespeed/defer-images.html

2. Зменшіть кількість запитів

  1. Використовуйте SVG-спрайт і PNG-спрайт.

    Про це я писав в блоці "Оптимізація зображень", який знаходиться вище.

  2. Об`єднайте всі CSS файли в один.

    Як я говорив раніше - це зменшить кількість запитів до сервера. Модулі для збирачів (для Gulp - gulp-concat-css, для Grunt - grunt-concat-css, для Webpack - css-concat-loader).

  3. Об`єднайте всі JS файли в один по можливості.

    Модулі для збирачів (для Gulp - gulp-concat-js, для Grunt - grunt-contrib-concat, для Webpack - webpack-uglify-js-plugin).

  4. Максимально зменшіть кількість запитів до бази даних.

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

3. оптимізуємо CSS і JS

  1. Стискаємо все CSS файли.

    Онлайн рішення: CSS Compressor, CSS Minifier. Модулі для збирачів: Gulp - gulp-clean-css- Grunt - grunt-contrib-cssmin- Webpack - clean-css-loader.

  2. Стискаємо все JS файли.

    Сервіси онлайн: javascript Compression Tool, JS Minifier. Модулі для збирачів: Gulp - gulp-uglify- Grunt - grunt-contrib-compress- Webpack - плагін, який вказаний в попередньому пункті також стискає JS.

  3. Завантажуйте всі CSS і JS файли в самому кінці. Розміщуйте їх перед закриває тегом .

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

  4. Видаліть з адрес JS і CSS файлів все рядки, які вказують версію скрипта і т.д.

    Ці параметри вказуються в адресі через знак ?v = 1.0.1 (Питання).

висновок

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

Якщо ви знаєте цікаве рішення, яке дозволяє прискорити завантаження сторінки, будь ласка, пишіть про це в коментарях, будемо разом ділитися корисними матеріалами та разом зробимо інтернет ще швидше і комфортніше! # 128521;

Успіхів!

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!