Як виміряти продуктивність сайту
User Rating: / 4
PoorBest 
There are no translations available.

Вимірювання продуктивність сайтуРозмови про процес оптимізації практично відсутні серед веб-дизайнерів нового покоління. Навіть багато веб-дизайнерів, які в бізнесі десять і більше років, не в повній мірі розуміють важливість оптимізації сайту.
Після тривалого періоду часу сайт почне грузнути. Інтерфейсні файли можуть містити перебільшені блоки коду або блоковані, приховані біти. Найчастіше це відбувається з файлами JavaScript або зображення. Вони можуть бути важливими для створення приємного користувачам веб-сайту, але без оптимізації сайту цей дизайн може навіть не мати можливості повністю завантажитись для нетерплячих користувачів.
Наведені нижче поради призначені для починаючих веб-розробників, які серед іншого в повній мірі зацікавлені в оптимізації своїх сторінок. Є багато доступних методів і кожен веде себе по-різному залежно від того, із-за чого страждає Ваш сайт. Спробуйте скімінг кількох областей і подивіться, чи можете Ви застосувати дані методи в своїх розробках.
HTTP-запити
Кожного разу, коли завантажується Ваш веб-сайт, він надсилає HTTP-запит до віддаленого сервера. Цей тип передачі даних називається мережевим протоколом, який використовується спеціально для передачі та зберігання текстових файлів. Вони часто містять коди Вашого основного інтерфейсу, такі як HTML, CSS і JavaScript.
Після відправлення запиту Ваш браузер буде аналізувати кожен елемент сторінки. Залежно від механізму аналізу кожен сайт буде завантажуватися по-різному і елементи з'являтися в тій чи іншій послідовності, в залежності від швидкості передачі. Наприклад, Internet Explorer буде надавати веб-сторінки іначе, ніж Chrome або Safari, і всі вони визиватимуть трохи різних двигунів розбору, ніж Firefox або Opera.
Отже, розглянемо питання, який час запиту потрібний для кожного файлу і чи ця тенденція має місце постійно. Розглянемо відвідування понад 100 тис. або 1 млн. користувачів на місяць. Це робота для браузера, щоб зібрати воєдино кожен елемент сторінки і завантажити зовнішні файли в пам'ять.
Часто фактором, стримуючим оптимізацію швидкості посиланням веб-сайту, є незграбний JavaScript або великі файли зображень. З популяризацією Verizon FiOS загальні для Інтернет швидкості досягли 600Kbps і продовжують рости! На жаль, це не норма, і навіть при високій швидкості з'єднання не можна пережити помилки оптимізації.
Ресурси для продуктивності сайту
Ми не самотні в області веб-розробок та оптимізації інтерфейсу. Для правильного виконання роботи є певні інструменти, необхідні для того, щоб справитися з поставленою задачею.
Google випустив проект під назвою Page Speed, який створений для того, щоб допомогти розробникам оптимізувати свої веб-сайти і перевірити їх для кращої продуктивності. Проект починався на базі відкритого джерела доповнення Firebug, а в даний час в якості третього учасника прийняте посиланням на сайт тестування.
Ще одним варіантом для користувачів Firebug є Yahoo!’s YSlow add-on. Скрипт аналізує кожен запит веб-сторінки і пропонує найбільш поширені способи для поліпшення продуктивності. Ці пропозиції грунтуються на ресурсах розробників Yahoo! для кращої практики оптимізації у веб-дизайні.
Програма може здатись, на перший погляд, трохи шорсткою, оскільки вона містить занадто інформації. Просто дотримуйтеся основи і, слідуючи простій документації, процес стане шматком пирога.
Розробники завжди зацікавлені у стрибках на проект, щоб зламати код таким чином, що це має бути не просто. Для невеликої допомогою можете скористатися YSlow help guide.
Методи прискорення
Є кілька простих трюків, які можна застосувати для Вашого сайту відразу для прискорення продуктивності. Перший і найпростіший спосіб полягає в розділенні Ваших CSS і JavaScript файлів.
CSS код лежить в заголовку документа. Це корисно, тому що властивості CSS повинні бути проаналізовані в той час, поки завантажується DOM. Як тільки веб-браузер розпізнає Ваші CSS-стилі в заголовку, він буде чекати, щоб повністю відобразити веб-сторінку, коли всі стилі будуть завантажені. Крім того, для будь-яких зображень, які використовуються для іконок або фонових конструкцій, також потрібен час для завантаження і це повинно бути зроблене в першу чергу.
З іншого боку, переміщення всіх JavaScript файлів вниз кожної сторінки Вашого сайту може драматично його підвісити кілька разів. Багато браузерів завантажують блоки паралельно, що означає, що до відображення сторінки веб-браузер користувача може зависнути протягом 4 секунд, щоб повністю завантажити зовнішні включені JS.
Це не завжди можливо і не завжди це необхідно для кожного сайту. Якщо Ваші сторінки завантажуються з однаковим часом відгуку, незалежно від місця розміщення включеного файлу, то не лякайтесь маневру будь-якого запуску.
Динамічний вміст не може завантажитися, поки не завершений весь DOM, але іноді це видаватиме помилки. Протестуйте доданий CSS/JS, щоб побачити, чи зможете Ви отримати яку-небудь вигоду від оптимізації.
Стиснення розміру файлу
Стиснення великих файлів стало дуже популярним. Тепер його навіть можна використовувати для веб-сторінки, щоб зменшити час завантаження і зберегти розміри файлів дуже малими. Велику частину роботи вже зроблено і з такими інструментами, як YUI Compressor, міні-розмір файлів вже є неенергетичним процесом.
Є багато інших безкоштовних послуг в Інтернеті, щоб допомогти у вирішенні цього завдання. Minify CSS має весь інтерфейс стиснення CSS, щоб зробити даний процес простим. На тому ж сайті також є звичайний компресор JavaScript, який виконує практично ті ж завдання, але зберігає сценарії організованими.
Ви можете також розглянути стиснення великих зображень на веб-сторінці. Це можна зробити з будь-яким програмним забезпеченням для редагування фотографій, таким як Adobe Photoshop або GIMP, просто виконавши передискретизацію зображення на більш низьку роздільну здатність. PNG зображення будуть при експорті у середньому набагато меншими, ніж JPG або TIFF формати. Є також безліч онлайн-інструментів, таких як Image Optimizer, для допомоги в процесі стиснення.
Перевірка коду і метрика
Ця рутина робота не часто практикується веб-розробниками, але може дати дивовижні результати. Аналізуючи всі елементи сторінки Вашого веб-сайту, Ви можете побачити, які з них довго завантажуються і порядок, в якому кожна частина була завантажена.
Найбільш популярним інструментом є Mozilla Firebug - плагін для браузера Firefox. Ця програма встановлює невелику панель в нижній частині вікна браузера, щоб перевірити час відгуку, заголовок, елементи сторінки і сценарії для кожного сайту. Сценарій також був перенесений до Firebug Lite у вигляді розширення для Google Chrome.
Apache з mod_pagespeed
Не всі установки запускаються на сервері Apache, так що ця опція не завжди доступна. Даний модуль безпосередньо пов'язаний з Google Page Speed монітором, який згадувався раніше. Дійсно, код для mod_pagespeed спочатку була зібраний з багатьох бібліотек бази даних Google Code’s.
Apache дозволяє адміністраторам серверів встановлювати невеликі пакети, так звані модулі, для підвищення продуктивності їх серверів. mod_pagespeed є одним з таких модулів, який автоматично використовує методи оптимізації під час виконання. Є дуже багато процесів у списку, хоча деякі з основних програм включають стиснення на льоту HTML/CSS/JS і кешування зображень.
Проект в даний час розміщений на Google і відкритий для розробників. Google працює з GoDaddy для впровадження mod_pagespeed в усі облікові записи хостингу, який працює на сервері Apache HTTP.
Також багато інших опцій доступно для роботи з інтерфейсом, який розвивається найбільш інтенсивно, особливо з урахуванням попередньої оптимізації для ключових веб-сторінок. Оптимізація сайту для заголовків і великих зображень може бути вкрай втомливим завданням, а не нагородою.
Розгляньте деякі з методів, представлених в цій статті, і подивіться, як вони можуть бути застосовані у Ваших веб-проектах. Часто розробники не мають достатньо часу, щоб оцінити свою роботу і очистити старі фрагменти коду. Якщо Ви все ще прагнете кількох порад, то прочитайте наш базовий посібник по оптимізації веб-сайтів (поради та краща практика) про поліпшення показників веб-інтерфейсу і зручні засоби підвищення продуктивності.
(Джерело EN: hongkiat.com)
 
>
BookNewsPractice SearchPartnersAbout
Підтримка та дизайн: Могильний С.С. Шаблон: Joomla Templates by BuyHTTP Joomla Hosting