Четверг, 06 Октября 2016 20:11

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

Written by 
Оцени эту запись
(1 Голос)

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

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

 

  • швидкість відповіді серверу;
  • кешування ресурсів;
  • кількість запитів, що надсилає сторінка для отримання зовнішніх ресурсів (css, js);
  • розмір html сторінки;
  • розмір зовнішніх ресурсів;
  • розмір картинок;
  • наявність блокуючих ресурсів.

 

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

 

Аналіз швидкості сайту

 

http://pr-cy.ru/analysis/  - простий у використанні та безкоштовний (до певної міри) ресурс, який я часто використовую для аналізу сайту. Він показує швидкість сайту та дає поради по покращенню показників, а також аналізує та видає інші важливі дані по ресурсу - посилання на сайт, відвідуваність, контент тощо.

 

https://developers.google.com/speed/pagespeed/insights/ - аналіз швидкості сайту від Google та поради по прискоренню сторінки. Тут вже детально описані методи покращення показників, наведено перелік ресурсів, які варто покращити для мобільної версії та для десктопа.

 

https://tools.pingdom.com/ - ще один цікавий ресурс для визначення швидкості. Інформація аналогічно, але зроблено яскравіше :)

 

Зменшення часу завантаження

 

Якщо почати по списку, що наведено вище, то першим варто розглянути швидкість відповіді сервера. Проте це швидше питання до вашого хостингу. Єдине що можу сказати, що безкоштовний хостинг гарної швидкості точно не дасть :)

 

Кешування ресурсів

 

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

 

Для налаштування кешування в Joomla потрібно піти в меню "Сайт" -- "Общие настройки" -- "Система" -- "Установки кеша" -- "Включить кеширование" та обрати варіант "Так". Окрім цього включити чи відключити кешування можна окремо для кожного модуля, зайшовши в його налаштування на вкладку "Розширені параметри".

Для деяких модулів може бути потреба відключити кеш. Наприклад, у мене було дивне "залипання" меню категорій Virtuemart'а, в якому js'ом змінювався клас для відображення активної категорії. Довелось трохи понервувати, поки не зрозуміла, що справа в кеші :)

 

Також більш глобальний кеш можна налаштувати на стороні хостера. Мій улюблений хостинг Ukraine.com.ua пропонує окремими галочками кешувати скрипти, стилі та картинки. Нюанс тільки в тому, що моїм рукам верстальника часто хочеться сходити якісь стилі змінити, а в такому випадку доводиться кешування відключати, щоб бачити свої зміни на сайті :)

 

Зменшення кількості запитів сторінки

 

Використовуючи CMS Joomla ми зазвичай маємо звичку наставити багато цікавих компонентів та модулів, більшість з яких підключає в <head> документа свої js та css файли. Виклик кожного такого файлу при завантаженні сторінки робить додатковий запит на сервер, чим збільшує час завантаження. Вихід - зменшити кількість ресурсів, об'єднавши їх між собою. Для цього є кілька способів.

 

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

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

Третій варіант - пошукати можливість подібної опції у хостера :) У моєму випадку все спокійно об'єдналось і нічого не зламалось.

 

Оптимізація ресурсів

 

Для зменшення HTML коду сторінки деякі ресурси рекомендують видалити зайві переноси рядків, коментарі та інше. Для оптимізації розміру підключених JS та CSS файлів варто зробити їх мінімізацію, для чого є багато готових рішень. При мінімізації з файлу видаляються всі коментарі, переноси рядків, зайві розділові знаки тощо. Це робить файл незручним для читання, проте значно легшим.

 

Для оптимізації картинок є кілька порад. По-перше, не забуваймо, що не варто на веб-сторінку розміщувати великі за розміром картинки. Сучасні монітори та екрани ноутбуків мають висоту до 1000 пікселів та ширину не дуже більше 2000 пікселів. В залежності від розміщення картинки на сторінці можна визначити її максимальний необхідний розмір та попередньо обрізати за допомогою Adobe Photoshop або онлайн-інструментів. По-друге, в тому ж Photoshop можна картинку зберегти для Web, задавши якість збереження фото. Така функція здатна зменшувати вагу картинки в кілька разів, що не може не радувати :) Проте можна піти і далі, а точніше скористатись окремими онлайн-ресурсами, що спеціалізуються на оптимізації картинок.

 

http://www.jpegmini.com/main/shrink_photo - Оптимізація розміру JPG картинок

 

https://tinypng.com/ - Для картинок з прозорістю

 

 

Наявність блокуючих ресурсів

 

Блокуючими ресурсами в даному випадку називаються JS та CSS, що викликаються в <head> документа. Вони блокують завантаження контенту сторінки, оскільки знаходяться вище тексту і браузер намагається завантажити їх в першу чергу. Тож при аналізі швидкості сайту, ви отримаєте пораду перенести виклики всіх скриптів та стилів вниз документа, щоб вони не заважали швидкому відображенню контента сторінки. Подібний перенос пропонують компоненти-плагіни, які також обіцяють мінімізацію та об'єднання тих же файлів, але не гарантують адекватний вигляд сторінки після цього. Можна перенести частину файлів руками, правлячи свій шаблон та, можливо, окремі функціональні елементи сайту. Я поки що вирішила проігнорувати цей пункт, бо вважаю, що ідеал недосяжний :) Проте рішення за вами! Можливо ви знаєте або знайдете гарний варіант переносу викликів в кінець сторінки та поділитесь інформацією в коментарях до статті :)

 

Бажаю вам швидких сайтів та терплячих клієнтів!

 

 

Additional Info

Еще в этой категории: « Мета теги для сайта на Joomla!

Комментарии  

 
-1 #1 Anemonalove 17.07.2017 10:33
Hello guys! Who wants to meet me? I'm live at HotBabesCams.co m, we
can chat, you can watch me live for free, my nickname is
Anemonalove , here is my photo:

https://3.bp.blogspot.com/-u5pGYuGNsSo/WVixiO8RBUI/AAAAAAAAAFA/JWa2LHHFI2AkHParQa3fwwHhVijolmq8QCLcBGAs/s1600/hottest%2Bwebcam%2Bgirl%2B-%2BAnemonalove.jpg
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов