Здрастуйте, шановні читачі блогу . Сьогодні хочу поговорити з вами на таку важливу тему, як швидкість завантаження сайту. Напевно, ви вже всі чули, що поряд з безліччю інших чинників, що впливають на просування Web проекту, пошукові системи з недавніх пір стали враховувати ще й це. Та й відвідувачів гальма на сайті сильно дратують, особливо тих, хто звик працювати в інтернеті на високих швидкостях.
Але тим не менш для багатьох вебмайстрів швидкість завантаження не є тією темою, над якою варто починати ламати голову негайно, зазвичай це відкладають на потім в довгий ящик, а на перший план виходять нагальні проблеми, пов’язані з наповненням ресурсу унікальними матеріалами, поліпшенням його внутрішньою оптимізацією, але при просуванні сайту потрібно враховувати всю сукупність факторів, що впливають на ранжирування і релевантність сторінок вашого ресурсу. Як говориться, міцність ланцюга визначається її найслабшою ланкою…
Онлайн сервіси для вимірювання швидкості завантаження сайту
В усякому разі саме так я ставився до недавніх пір до того, щоб спробувати прискорити свій ресурс. Але мені прийшло в голову, що краще не чекати неприємних тенденцій в статистикою відвідуваності свого сайту (а саме зменшення трафіку з пошукової системи Google.ru, бо вона більш критично ставиться до швидкості завантаження), а виправити очевидний недолік прямо зараз.
Треба просто усвідомити, що швидкість, з якою завантажується ваш сайт, блог або форум, є дуже важливим показником. Якщо у вашого проекту за цим показником не все в порядку, то це може спричинити за собою досить неприємні наслідки. І найважливіше з них те, що відвідувачі можуть відмовитися від роботи з вашим ресурсом, т. к. він дуже довго завантажує сторінки. Крім цього пошуковики, особливості Гугл, враховують її при загальній оцінці корисності того чи іншого ресурсу.
Для того, щоб зрозуміти, а як швидко завантажуються сторінки вашого ресурсу, можна скористатися, наприклад, можливостями такого розширення для браузера FireFox, як FireBug, докладно описаний у статті за наведеним посиланням. А можна скористатися послугами сервісів, які призначені для цього. Далі я наведу як приклад кілька таких.
В результаті буде представлена діаграма часу закачування окремих об’єктів веб-сторінки, а також їх Урл і вага. Чим менше об’єктів буде завантажуватися і чим легше буде важити кожен з них, тим краще. Наприклад, я для цієї мети:
Власне, деякі проблеми та історію вимірювання швидкості вашого сайту ви зможете відстежити на сусідніх вкладках верхнього меню Pingdom.
У спливаючому вікні вам запропонують скопіювати постійне посилання на пройдений тест, а також відправити його по E-mail або в Твітер. Також в нижній частині вікна можна підписатися на моніторинг сайту на предмет доступності. Якщо ваш ресурс впаде (стане недоступний для відвідувачів), то вам буде надіслано повідомлення на E-mail або SMS на стільниковий. Але ця послуга є платною, хоча і є можливість безкоштовного тріалу.
Для вимірювання пінгу для вашого сайту, а також для перегляду Traceroute, потрібно буде вибрати в самому верху сторінки вкладку «Ping and Traceroute». Вводите в пропоновану форму Урл без http, ставите галочку в чекбокс «Traceroute» або «Ping» під цією формою, і тиснете «Test now».
На першій діаграмі приділяєте увагу становищу фіолетовою вертикальній лінії — це буде час закінчення відтворення сайту. Друга вертикальна лінія (синя) буде означати час повного завантаження. Добре, якщо перша лінія знаходиться на 1-1,5 секундах завантаження сайту, а друга — раніше 4 секунд. Тоді наступні абзаци можна прочитати «для довідки». Якщо сайт завантажується довше 4 секунд потрібно озабачиваться виправленням цієї ситуації.
Як видно з наведеного скріншота, Google PageSpeed Insights дає комплексну оцінку — для комп’ютерного браузера і для мобільного. Крім цього, внизу буде наведена оцінка зручності користування вашим ресурсом на різних гаджетах. Якщо оптимізацією сайту під мобільні пристрої ви ще не турбувалися, то оцінка там буде дуже низька (та й на цьому справа скріні вашого сайту у вікні смартфона все буде наочно видно).
Але найголовніше те, що Google PageSpeed Insights дає рекомендації, як збільшити оцінку вашого сайту, тобто як його прискорити. Починати потрібно, природно, з самого верху, бо ці виправлення внесуть найбільший внесок в прискорення.
У мене, наприклад, була проблема з налаштуванням gzip стиснення і з завданням часу кешування статики (картинок, css файлів, скриптів) в браузерах користувачів, бо у мене Апач працює у зв’язці з nginx, а з ним я працювати не вмію. Довелося писати в техпідтримку Инфобокса з проханням налаштувати все — зробили, і навіть грошей не взяли (спасибі їм!). До речі, спочатку вони мені поставили час зберігання кеша в 1 годину, але Google PageSpeed Insights раніше лаявся:
Довелося покопатися в інструкції до цього онлайн сервісу і вичитати там, що мінімум потрібно ставити 1 день зберігання статики в кеші. Я попросив технічну підтримку хостингу поставити з запасом 1 тиждень, що вони і зробили. Теперича оцінка трохи підвищилася і дуже важливих претензій до мого ресурсу у Гугла в плані швидкості завантаження не є, що є добре.
Простенько і зі смаком, що називається. Можна підписатися на розсилку змін.
Про те, що доброго є в GTmetrix і як його використовувати я вже досить докладно писав і тому повторюватися не буду, щоб не ускладнювати і без того вже громіздку статтю (дочитаєте до кінця — можете вважати себе героєм).
Так важливо відслідковувати швидкість завантаження сторінок?
Але повернемося від вимірювання швидкості до пошуку можливостей її збільшення. В Гугл Вебмастере, про який я писав тут, раніше працювала експериментальна вкладка «Ефективність сайту», де давалася оцінка швидкості завантаження сайту.
В загальному-то нічого кримінального у зазначеній там швидкості завантаження немає, але ось те, що мій блог завантажувався повільніше, ніж 84 відсотки всіх веб ресурсів в інтернеті — це вже сигнал, на який варто було б відреагувати. Але раз Гугл думає, що по швидкості мій блог є аутсайдером, то варто серйозно поставитися до цієї проблеми і впритул зайнятися вирішенням питання — як її збільшити.
Власне, нічого особливо вигадувати і не довелося, бо Google сам підказує найбільш оптимальне рішення. Точніше, він пропонує скористатися інструментом, який в свою чергу допоможе зрозуміти, що саме потрібно зробити для того, щоб ваш сайт трохи (або багато) прискорити. Я кажу про онлайн-сервісі Page Speed (раніше були ще й однойменні розширення для браузера FireFox і Chrome, якими я в основному користувався).
Відразу обмовлюся, що цей інструмент оперує досить складним і не зовсім зрозумілими речами рядовим вебмайстрам, які в основному пов’язані з тонкощами і нюансами роботи Web сервера. Якщо ви ніколи сервер не адміністрували, але буде складно.
Є вихід — напружити вашого хостера на тему виконання дій, які пропонує Пейдж Снід. Погодиться чи ні — це вже інше питання. Наймати для цієї мети фрілансера я так і не зважився, бо стрьомно надавати доступ до серваку аби кому (ось такий я недовірливий).
На головній сторінці PageSpeed навіть пропонує встановити модуль на свій сервер, якщо він працює під управлінням Apache або Nginx (якраз мій випадок):
Але я так і не зрозумів, як це робиться, бо зовсім не тямлю в адмініструванні серверів і ніколи не працював з юнікс подібними системами. Це набагато складніше, ніж встановити програму або плагін в WordPress залити. Інший рівень занурення. Хостера теж не зважився з цього приводу напружувати. Загалом, цей модуль залишився мною не випробуваний — можливо, що ви його вже спробували і має місце що сказати…
Взагалі, в перший раз я використав Page Speed як розширення для браузера (зараз воно, як я зрозумів, не фунциклирует). Раніше воно інтегрувалися в інструменти для розробників у Фаєрфокс і в Хромі. Правда, попервости (кілька років тому) я лише мигцем подивився які поради він мені дає, і практично нічого не зрозумівши вирішив, що це не для мене, після чого з легкою душею видалив плагін PageSpeed як не потрібний і чужий моєму розуму елемент.
Справа в тому, що навіть розуміючи на що лається цей плагін, я толком не знав що потрібно зробити, щоб усе це усунути і хоч якось прискорити свій блог. Загалом, у мене знайшлося відразу дуже багато більш важливих справ, у порівнянні з якими мишача метушня з налаштуваннями Web сервера (тим більше, що я в них не розбираюся особливо) здалася дрібної і незначною.
Правда, у свій час я теж відклав в довгий ящик рішення проблеми безпеки при роботі з електронними грошима Webmoney і в результаті поплатився за це втратою всіх цих самих грошей. Пам’ятаючи про те, що трапилося, на днях вирішив впертися рогом і спробувати зрушити з місця проблему збільшення швидкості завантаження сайту, незважаючи на всю незрозумілість і складність для мене даного питання.
Коротше, я встановив повторно Пейдж Снід в Мазілу (зараз цього робити вже не треба), подивився на що саме він особливо сильно лається і дещо мені все ж вдалося поліпшити і, сподіваюся, хоча б трохи збільшити швидкість.
Звичайно ж, я вирішив не всі ті проблеми, на які звертав мою увагу на цей плагін, але дещо все ж вдалося зрушити з мертвої точки. Поки все не забув, поспішаю поділитися з вами, мої шановні читачі, тим, що вдалося нарити і зробити. Можливо, що вам це згодиться і швидкість сайту не буде для вас вузьким місцем, істотно утрудняє просування.
Page Speed — аналіз швидкості та поради щодо її збільшення
P. S. Зараз Page Speed можна використовувати тільки онлайн і встановлювати його в браузер вже не потрібно (у всякому разі з новими версіями хрому цей плагін несумісний), хоча суті це не змінює.
Отже, раніше потрібно було встановити на свій браузер плагін, але зараз достатньо перейти сюди, ввести Url-адресу сторінки, яку ви хочете проаналізувати (на різних типах сторінок можуть виникати різні проблеми зі швидкістю завантаження, тому в цьому інструменті має сенс перевіряти всі варіанти) і натиснути на синю кнопку «Аналізувати».
Дочекавшись результатів процесу перевірки ви побачите вікно подібне до того, що я вже наводив на скріншоті вище по тексту (в пункті 3 описів онлайн сервісів для перевірки швидкості завантаження сайтів). Т. о. в результаті ви побачите цілий список претензій, які цей онлайн сервіс має до вашого ресурсу, а саме до швидкості його завантаження. Бенкет цьому він дасть вам деякі рекомендації по оптимізації роботи Веб-сервера в купе з використовуваним вами движком.
Причому, в самому верху вікна Page Speed будуть розташовані зауваження та рекомендації, які вам бажано буде переглянути і змінити в першу чергу («виправте обов’язково»), бо це дасть найбільший ефект в плані збільшення швидкості завантаження і зажадає від вас не надто великих зусиль. Наведу приклад аналізу одного з моїх другорядних проектів, до яких руки особливо не доходять:
Тобто рекомендації та виявлені проблеми, позначені червоним прямокутником зі знаком оклику і розташовані в самому верху списку, є найбільш важливою і почати оптимізацію бажано саме з них (дешево і сердито, що називається), тим самим досягнете найбільшого ефекту.
Зауваження, позначені помаранчевим кольором, зажадають від вас великих зусиль по виправленню, але при цьому можуть і не призвести до дуже значного зростання швидкості. На жаль і ах, поки їх можна відкласти в довгий ящик і зайнятися першорядними завданнями, які допоможуть істотно прискорити проект.
У мене первісна картина кілька років тому (ще при використанні плагіна — зараз те ж саме можна побачити в http://gtmetrix.com/, бо він испльзует АПІ PageSpeed) для https:// була такою:
Я вирішив тоді почати з самого першого пункту «Leverage browser caching» (зараз це називається «Використовуйте кеш браузера»), бо за логікою роботи Page Speed, ці рекомендації повинні привести до найбільшого прискорення мого блогу.
Якщо натиснути на спойлер поряд з цим написом, то з’явиться список різних файлів, які не відповідають оптимальним вимогам кешування статичних об’єктів (скрипти, CSS файли, файли зображень, що використовуються на web сторінці) в браузерах користувачів (тобто у читачів):
Тобто PageSpeed Insights радить нам для збільшення швидкості завантаження налаштувати оптимальним чином кешування різних елементів web-сторінок в браузерах користувачів для того, щоб при перегляді інших ці статичні елементи не завантажувалися би заново з сервера. В теорії все це звучить досить заплутано, бо я поняття не маю про механізми кешування використовуваного браузерами (читайте про те, що таке кеш браузера і як його очистити).
До того ж, оптимізацію кешування статичних об’єктів ми будемо проводити за рахунок механізмів самого сервера вашого хостингу. Досить заплутано, але я вам запропоную вже готові рішення, знайдені на просторах рунета, а ви спробуєте в дії і вирішіть, яке саме найкращим чином буде працювати саме на вашому хостингу.
Оптимізація кешу в браузері і перевірка його роботи
Правда на моєму поточному хостингу це не спрацювало, бо в мене зараз стоїть зв’язка Апача з nginx (треба налаштовувати останній, що за мене зробив хостер не відомим мені способом). Але якщо у вас чистий Апач, то запропонований нижче метод може спрацювати.
Загалом, ми спробуємо вплинути на сервер де хоститься ваш проект таким чином, щоб він віддавав браузерам команди спрямовані на оптимізацію кешування статичних елементів. Робити це будемо з допомогою досить відомого інструменту віддаленого управління сервером — файлу .htaccess. Знаєте про існування такого?
Живе він зазвичай в кореневій папці. Природно, що всі нижчеописані буде працювати тільки на серверах під управлінням Apache, але їх, як правило, більшість. Після підключення до свого ресурсу по FTP (FTP клієнт FileZilla був описаний мною тут), відкрийте кореневу папку (зазвичай це або PUBLIC_HTML, або HTDOCS) і перевірте наявність у ній файлу .htaccess.
З цього моменту ви все робите на свій страх і ризик. Тому обов’язково скачайте на комп копію цього файлу, щоб у разі чого оперативно відкотитися назад.
Якщо .htaccess не видно, то спробуйте програму FileZilla вибрати з верхнього меню пункти «Сервер» — «Примусово відображати приховані файли». Якщо і після цього він в корені не проявився, то створіть у себе на комп’ютері порожній текстовий файл в будь-якому зручному для вас редакторі (я користуюся Нотепад плюс плюс), назвіть його як-небудь і скопіювати в корінь.
Після цього перейменуйте цей файл .htaccess в програмі FileZilla. Тепер потрібно буде відкрити його на редагування і додати в нього наведений нижче код. Але спочатку трохи поясню.
Найбільш популярні способи включення даної опції на веб-сервері під управлінням Апач — з помщью модулів mod_headers або mod_expires. Розташований нижче код допомогти вам допоможе увімкнути кешування статики в браузері, якщо онлайн-сервіс хоча б один з цих модулів Апача у вас на серваці й встановлено.
Спочатку наведу код модуля mod_headers. Звертаю вашу увагу, що в ньому використовується перевірка наявності у вашого хостера даного модуля. Якщо його знайдено не буде, то код виконуватися не буде і ніяких помилок це не викличе. Однак, я ще раз настійно рекомендую попередньо скопіювати оригінальний (до внесення розташованого нижче коду) файл .htaccess до себе на комп під уникнення ексцесів.
#кешувати html і htm файли на один день
Header set Cache-Control «max-age=43200»
#кешувати css, javascript і текстові файли на один тиждень
Header set Cache-Control «max-age=604800»
#кешувати флеш і зображення на місяць
Header set Cache-Control «max-age=2592000»
#відключити кешування
Header unset Cache-Control
Коментарі (їх рядки починаються зі знака решітки) потім можете видалити, але вони по-любому на роботу коду впливу надавати не будуть.
Можна буде ще додати блок коду, розрахованого на модуль для mod_expires, де знову ж таки використовується перевірка його наявності на вашому сервері, що гарантує безпеку використання цього фрагмента коду:
ExpiresActive On
#за замовчуванням кеш в 5 секунд
ExpiresDefault «access plus 5 seconds»
#кешувати флеш і зображення на місяць
ExpiresByType image/x-icon «access plus 2592000 seconds»
ExpiresByType image/jpeg «access plus 2592000 seconds»
ExpiresByType image/png «access plus 2592000 seconds»
ExpiresByType image/gif «access plus 2592000 seconds»
ExpiresByType application/x-shockwave-flash «access plus 2592000 seconds»
#кешувати css, javascript і текстові файли на один тиждень
ExpiresByType text/css «access plus 604800 seconds»
ExpiresByType text/javascript «access plus 604800 seconds»
ExpiresByType application/javascript «access plus 604800 seconds»
ExpiresByType application/x-javascript «access plus 604800 seconds»
#кешувати html і htm файли на один день
ExpiresByType text/html «access plus 43200 seconds»
#кешувати xml файли на десять хвилин
ExpiresByType application/xhtml+xml «access plus 600 seconds»
Коментарі знову ж потім можна буде видалити.
Якщо раптом не спрацювало, але ви сподіваєтеся на диво, то ось ще кілька варіантів того ж самого коду, але пробуйте їх по черзі, а не всі відразу:
ExpiresByType application/javascript «access plus 1 year»
ExpiresByType text/javascript «access plus 1 year»
ExpiresByType text/css «access plus 1 year»
ExpiresByType image/gif «access plus 1 year»
ExpiresByType image/jpeg «access plus 1 year»
ExpiresByType image/png «access plus 1 year»
Header set Cache-control: public
BrowserMatch «Mozilla/4.[0-9]{2}» force-no-vary
ExpiresActive on
ExpiresDefault «access plus 1 month»
Тепер після того, як ви вставили в .htaccess код, що дозволяє підвищити швидкість за рахунок оптимізації кешу в браузері на стороні відвідувача, і зберегли зроблені зміни, знову перевірте сторінку вашого ресурсу в PageSpeed Insights і переконайтесь, що проблема зникла:
Як бачите, в моєму випадку «Використовуйте кеш браузера» вже не є критичною недоробкою уповільнює завантаження, і значок поряд з цим зауваженням змінився на помаранчевий, але не на зелений. На жаль, вплинути на сторонні сервіси, звідки мій сайт довантажує статики (типу Янедкс, Гугла, Фидбернера і Аптулайка), я не в змозі.
Що і потрібно було довести. Ось так, граючись, ми з вами розібралися з однією з найбільш істотних і вагомих проблем знайдених Page Speed.
Як включити стиснення статичних об’єктів на сервері
Також дуже частою проблемою, на яку лається сервіс GTmetrix, буває відсутність стиснення файлів на сервері перед їхньою передачею в браузери користувачів.
Використовується при цьому технологія gzip, про який я вже писав. Якщо ви аналізуєте не безпосередньо через PageSpeed Insights, а за допомогою GTmetrix, то в області PageSpeed «Включити стиск» називається «Enable gzip compression», а в YSlow — «Compress components with gzip».
Для того, щоб це саме Gzip стиснення включити на хостингах, де використовується сервер Апач, досить буде додати в файл .htaccess (він є дистанційним файлом управління сервером) відповідний фрагмент коду. У Апача є два модулі для стиснення і який-небудь із них буде встановлений у вашого хостера (хоча не факт).
Найбільш поширений модуль mod_deflate — з нього і почнемо. Ми знову ж додаємо код перевірку наявності цього модуля, щоб не отримати 500 помилку для всього сайту.
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml, text/css-text/javascript application/javascript application/x-javascript
Трохи менш популярним модулем є mod_gzip і для нього код включення Gzip стиснення для потрібних типів файлів буде виглядати так:
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^text\.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image\.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
Власне, пробуйте і перевіряйте сторінку в PageSpeed Insights після установки коду. Якщо проблема пішла, то вважайте, що вам пощастило. Мені ж в силу наявності Апач з nginx все це не допомогло (хостер сказав, що за статику відповідає nginx, при такому розкладі і налаштовувати треба саме його — як він це зробив мені не відомо).
Удачі вам! До зустрічей на сторінках блогу
