Тема 8 Забезпечення ефективності web-сайтів Основи Web-дизайну з курсу Сучасні Internet-технології, НУДПСУ
« Назад
Тема 8. ЗАБЕЗПЕЧЕННЯ ЕФЕКТИВНОСТІ WEB-САЙТІВ
8.1. Загальні положенняНа сьогодні практично всі корпоративні інформаційні системи (КІС) тісно інтегровані з глобальною мережею Інтернет. При цьому представницьку роль КІС у мережі Інтернет, як правило, відігріє Web-сайт. Крім представницької ролі, сайт може забезпечувати функціонування електронного магазину, доступ до розподіленої бази даних, рекламу корпорації у мережі Інтернет. Цей неповний перелік функцій сайта вказує на значний вплив ефективності його функціонування на ефективність функціонування всієї КІС. Більше того для його створення, розміщення у мережі та підтримки потрібні досить значні фінансові витрати. Проблема ускладнюється тим, що на сьогодні не існує загальноприйнятого критерію оцінки ефективності сайта. Це пояснюється труднощами щодо визначення прибутків корпорації завдяки наявності сайта. З цієї причини рекомендується проводити оцінку ефективності сайта за кількістю його відвідувачів, отримала і практичне визнання. Наявність популярного сайта дозволяє корпорації одержувати прибуток завдяки розміщенню на ньому банерної реклами. Наприклад, за матеріалами сайта www.rambler.ru, у 2004 році вартість розміщення у його верхній частині банерної реклами коштує близько 10 000 доларів США. При цьому кількість відвідувачів сайта становить більше 100 000 на добу. Забезпечити достатню кількість відвідувачів сайта можливо за рахунок: - реалізації заходів, спрямованих на те, щоб потенційні клієнти знали про сам факт існування сайта; - заохоченні клієнтів повністю переглянути сайт при першому візиті та відвідувати його у майбутньому. Зазначимо, що потенційні клієнти можуть виявити сайт за допомогою реклами у традиційних джерелах інформації або Інтернет-орієнтованих шляхів. Досить поширеним методом реклами у традиційних джерелах інформації є рекламування самого сайта та його адреси у пресі та на телебаченні. Хоча вказаний метод реклами є досить ефективним, проте потребує значних витрат на реалізацію, що не завжди доцільно. Виходячи з можливих Інтернет-орієнтованих шляхів виявлення сайта потенційними користувачами, методика просування сайта може містити такі заходи: використання пошукових систем, каталогів та рейтингів, банерний обмін, застосування систем активної реклами, використання дощок оголошень, поштових розсилань, форумів та чатів.
8.2. Web-орієнтовані методи забезпечення ефективності сайтаВідомо, що пошукові системи, каталоги та рейтинги залучають від 20 % до 60 % відвідувачів сайта. При пошуку сайтів користувач уводить основні слова, що, на його думку, найкраще відображають тему сайта який цікавить, у деяких випадках користувач може вказати загальну тематику пошуку. Результатом роботи пошукової системи є список адрес сайтів, у яких зустрічаються основні слова. Крім адреси, у списку відображаються заголовок та опис сайта. Зазначимо, що список адрес формується у певній ієрархії та може відображатись на декількох сторінках. Принциповим моментом є місце адреси (рейтинг) сайта у цій ієрархії. Відомо, якщо адреса сайта розміщена не на першій сторінці, то ймовірність його відвідування практично дорівнює нулю. Для визначення методів підвищення рейтингу сайта розглянемо механізми пошуку за основними словами та формування рейтингу. На різних типах пошукових систем вказані механізми дещо відрізняються і, як правило офіційно не документаються. Але завжди пошук відбуваєть за допомогою: основних слів та опису сайта, що заносяться у базу даних при реєстрації сайта у пошуковій системі, основних слів у тілі сайта або основних слів та опису сайта у його заголовку у спеціальних тегах <meta>. Тому при реєстрації сайта у пошукових системах необхідно вказати основні слова, що найбільш характерні для теми сайта, а також зробити відповідний його опис, у якому також потрібно застосувати основні слова. Використання механізму пошуку на базі основних слів та опису сайта у його заголовку можливо за рахунок наступної програмної конструкції: <head><tіtle>придуманий вами заголовок</tіtle> <meta http—equіv="KEYWORDS" content="список основних слів через коми"> <meta http—equіv="DESCRІPTІON" content="опис сторінки з декількох фраз, з використанням основних слів"></head> Зазначимо, що основні слова та опис сайта при реєстрації та у його заголовку повинні співпадати. Як правило, пошукові системи вимагають, щоб основні слова та опис сайта не перевищували 200 знаків. Потрібно звернути увагу на зміст заголовка сайта, що міститься між тегами <tіtle>. Саме він відображається у результатах запитів на першому місці і має першорядне значення у справі залучення відвідувачів. Довжина заголовка сайта не повинна перевищувати 75 знаків. Теги <meta> не видні при перегляді документа, але помітно збільшують його розмір, тому їх додаткове застосування (наприклад <meta name ="tіtle" content="Ключові слова, словосполучення">) є недоцільне. Для застосування основних слів у тілі сайта необхідно на головній сторінці у перших 30-50 словах сформулювати основну тематику. Для збільшення кількості таких основних слів можливо записати їх на початку тіла сайта у тегах коментарів або (та) кольором фону. Ці основні слова не будуть відображені на сайті, але можливо будуть використані пошуковою системою. Окремо варто звернути увагу на застосування основних слів, які за статистицкою найбільше використовуються при пошуку. На наш погляд, недоцільно вживати основні слова, пов’язані з розвагами, як з етичних позицій, так із позицій використання не цільової аудиторії. Хоча вживання комп’ютерної, спортивної, радіотехнічної та автомобільної лексики є доцільне. У тих пошукових системах, які передбачають процес реєстрації необхідно внести сайт у максимальну кількість розділів. Слід зазначити, що на сьогодні існує досить велика кількість пошукових систем. Реєстрація сайта у кожній із них потребує певних матеріальних витрат. Тому, на наш погляд, доцільно провести реєстрацію сайта тільки у загально популярних пошукових системах, до яких (серед вітчизняних користувачів) можна віднести – www.rambler.ru, www.aport.ru, www.yandex.ru, www.meta.ua, www.google.com. Також, необхідно зареєструвати сайт у пошукових системах, якими користуються спеціалісти у галузі діяльності сайта. Зазначимо, що декілька років тому були розроблені спеціальні програми ¾ павуки, призначенням яких є автоматична реєстрація сайта у великій кількості пошукових систем. Проте у багатьох сучасних пошукових системах вмонтовані засоби, що не дозволяють проводити автоматичну реєстрацію, тому користуватись програмами ¾ павуками не доцільно. Для участі у рейтингу відвідувачів на сторінках сайта необхідно розмістити банер (лічильник відвідувачів) пошукової системи. Наявність цих банерів уповільнює завантаження сайта, тому слід їх розміщувати тільки на вузлових сторінках. Деякі пошукові системи не передбачають механізм реєстрації сайта його адміністратором. У таких пошукових системах використовується спеціальна програма-робот, яка автоматично індексує сайти. Перешкодою для її роботи може бути заборона на індексацію, встановлена на Web-сервері. Рекомендується цю заборону зняти, хоча це дещо зменшує безпеку сервера. Ще одним, загальновідомим, Інтернет-орієнтованим шляхом рекламування сайта та його адреси є використання банерів. Банер ¾ це текстова або графічна реклама сайта, розміщена на іншому сайті. Використання банерів доцільне у тому випадку, коли сайт, носій банеру відвідується тими клієнтами, які є цільовою аудиторією сайта, що рекламується. Наприклад, ефективність розміщення на сайті фірми-продавця автомобілів банера фірми-продавця автозапчастин може бути досить високою. Основним недоліком банерної реклами є те, що, за статистикою, кількість відвідувачів, що знайшли сайт за допомогою банерної реклами, становить близько 5 % від загальної кількості відвідувачів. При цьому реалізація банерної реклами можлива або шляхом обміну банерами, або потребує матеріальних витрат для публікації власних банерів на інших сайтах. Крім того, шлях обміну банерами досить часто не доцільний щодо зміни дизайну сайта та появи на ньому нетематичної інформації. Таким чином, використання банерної реклами пов’язане з певними труднощами та принципово не може стрімко підвищити ефективність функціонування сайта. Наступним можливим шляхом збільшення кількості відвідувачів може стати розміщення на сайті цікавої динамічної інформації, наприклад чату, новин, розкладу занять для сайта навчального закладу. Хоча здійснення цих заходів з технічних причин є досить складним, але їх реалізація ¾ перспективна. Так, відвідуваність сайта www.gala.net можна пояснити саме розміщенням на ньому популярного чату. Ще одним, вже популярним шляхом збільшення кількості відвідувачів є застосування автоматизованої системи розсилки електронної пошти, яка рекламує діяльність корпорації.
8.3. Оптимізація структури та змісту сайтаПісля того, як клієнт знайшов та вибрав адресу сайта, необхідно, щоб він дочекався відображення домашньої сторінки сайта, повністю переглянув інші сторінки, а згодом знову відвідав сайт. Для цього потрібно продумати змістову частину сторінок сайта, створити дизайн, що відповідає направленості сайта, та знищити технічні причини, внаслідок яких користувач може відмовитись від його перегляду. Найважливішою причиною є величина проміжку часу, за який сайт буде завантажуватись. Проведемо аналіз проміжку часу, який проходить від подачі клієнтом запиту на перегляд сайта до його відображення на екрані. Будемо мати на увазі, що сайт переглядається клієнтом при стандартних настройках браузера, а також, що клієнту для перегляду необхідно використати мережу WWW. Вказаний проміжок часу можливо розділити на проміжок часу для відображення основного та допоміжних файлів Web-сторінки. Зазвичай, як основний, виступає HTML-файл. Допоміжними виступають графічні, java (class) файли та об’єктні файли, до яких належать ActiveX та Flash. Важливим є той факт, що браузер спочатку робить спробу знайти означені файли у тимчасовій пам’яті і тільки у разі негативного результату робить запит у мережу WWW. Зазначимо, що негативним вважається результат, коли файли не знайдені або їх параметри не співпадають з настройками браузера. Час, необхідний на відображення основного та кожного з допоміжних файлів, витрачається на втрати у мережі, виконання серверної частини Web-сторінки, інтерпретацію браузером та на відображення на екрані. Втрати в мережі складаються з проміжків часу на встановлення з’єднання з сервером провайдера, встановлення з’єднання сервера провайдера з сервером, що обслуговує сайт, послідовну передачу основного файлу на сервер провайдера та на комп’ютер клієнта. Для їх зменшення можливо застосувати організаційні та програмні заходи. Організаційні заходи полягають у розміщені сайта на одному потужному сервері, що забезпечений потужними мережевими зв’язками. Як правило, таким вимогам відповідають тільки сервери спеціалізованих організацій-провайдерів. На Україні загальноприйнятою є схема, коли організації, що мають власну локальну мережу, а відповідно і великий трафік та з’єднані з мережею WWW малопотужним виділеним каналом, розміщують Web-сервер на своїй території. Перевагами такої схеми є відносна дешевизна, дещо простіше керування, використання практично будь-якого необхідного програмного забезпечення, відсутність виходу у мережу WWW при перегляді власного сайта з локальної мережі організації. Але така схема має серйозний недолік. У випадку великого трафіка сайт стає практично недоступним для зовнішніх клієнтів. Крім цього, обслуговування Web-сервера потребує залучення висококваліфікованого технічного персоналу. Тому кращою є дзеркальна схема, коли сайт розміщують на сервері спеціалізованої організації-провайдера, а його дублікат (дзеркало) розміщують на сервері, який знаходиться у середині локальної мережі. Головними перевагами цієї схеми є незалежність доступності сайта від трафіка організації та відсутність виходу у мережу WWW при перегляді власного сайта. Основним програмним засобом зменшення втрат часу у мережі є зменшення загального обсягу сторінок сайта. Можливе використання двох напрямів. Перший напрям полягає у зменшенні обсягу кожної із сторінок за рахунок оптимізації графіки та HMTL-коду сторінки. Оптимізація графіки полягає у мінімізації кількості графічного матеріалу, збереженні графічних файлів з достатньою якістю та розмірами зображення, можливому використанні одного малюнка з різним масштабом. Мінімізацію кількості графічного матеріалу можна проводити шляхом відмови від графічних меню, надписів та фонів. Як альтернативу можливо використовувати стилі. Графічні файли слід зберігати з безпечною кольоровою гамою, розмірами, які будуть використані на сайті, та якістю, достатньою для відображення на екрані комп’ютера. Наприклад, при збереженні графіки у редакторі PhotoShop у форматі jpg достатньою є якість для фотокарток 2-3, для малюнків ¾ 2. Зауважимо, що для публікації у WWW рекомендовано виготовляти фотокартки з мінімальною кольоровою гамою з чіткими переходами кольорів. Оптимізацію HTML-коду потрібно проводити шляхом урахування особливостей парних тегів, широкого застосування стилів та відмовою від використання візуальних HTML-редакторів. Особливості парних тегів полягають в тому, що багато з них не потребують закриваючого тегу, хоча це і є відступом від стандарту. При цьому такі теги коректно відображаються браузерами. Наприклад, можливо не використовувати закриваючі (парні) теги рядка (</tr>) та комірки (</td>) таблиці, оскільки їхня дія закінчується закриваючим тегом таблиці (</table>). Застосування стилів доцільне при складному повторюваному форматуванні однотипних елементів сайта. У цьому випадку необхідні параметри тегів потрібно визначити за допомогою стилів, винесених у заголовок сторінки або у окремий css файл. Відмова від використання візуальних редакторів пояснюється великим обсягом лишнього HTML-коду, який вставляється ними на сайт. Можливо рекомендувати використання редакторів типу HomeSite або Microsoft Visual Studio, які дозволяють будувати оптимальний код сайта. Іншим напрямом зменшення загального обсягу сторінок сайта є виділення спільної інформації у окремі файли (файл). При першому відвідуванні сайта ці файли завантажуються у тимчасову пам’ять комп’ютера клієнта (кеш). При відвідуванні інших сторінок сайта з мережі завантажуються тільки файли з новою інформацією. Його загальновідома реалізація є фреймовою структурою. Проте більшість комерційних організацій відмовляються від фреймів через трудомісткість їх модифікації та складність реєстрації пошуковими системами. Зазначимо, що у багатьох пошукових системах дуже складно зробити посилання на сторінки сайта з фреймовою структурою. Тому рекомендується використати пов’язаний з HTML-сторінками сайт js-файл. У цьому випадку загальну для більшості сторінок сайта інформацію можна записати у вигляді винесених у окремий файл функцій мови програмування JavaScript. Таку структуру сайта називають динамічною. Як показує досвід, js-файл коректно кешується загальнопоширеними браузерами, а час завантаження неосновних сторінок практично не відрізняється від сайта з фреймами. Модифікація статичної частини сайта з динамічною структурою полягає у зміні тільки одного js-файлу. Таким чином, до переваг сайта з динамічною структурою варто віднести швидкість завантаження, низьку трудомісткість модифікації та достатню адаптованість до пошукових систем. Для зменшення втрат часу, що пов’язані з встановленням з’єднання браузера клієнта з сервером, на якому розміщений сайт, рекомендується обмежити числом 12 кількість файлів, з яких складається Web-сторінка. Така кількість файлів зумовлена практичним досвідом, а також рекомендується у літературі. У протилежному випадку втрати часу на з’єднання непропорційно зростають, особливо при низькій якості зв’язку у мережі, що є характерним для більшості телефонних ліній. Ще один шлях для зменшення втрат часу можна застосувати наявності на сайті декількох невеликих за розмірами блоків інформації, що потребують логічного розподілу на декілька сторінок, доступ до яких необхідно проводити за допомогою різних пунктів меню. У цьому випадку можна об’єднати ці блоки інформації у одну сторінку, розділену на частини за допомогою внутрішніх посилань (якорів) або декількох таблиць з різними значеннями параметра id та стилем display, що дорівнює none. Стиль display відповідає за відображення елемента на екрані. Доступ до необхідних блоків інформації можливо проводити за допомогою внутрішніх посилань, або присвоюючи необхідній таблиці стиль display, що дорівнює block. Вказати таблицю можливо за допомогою її ідентифікатора id. Для зменшення втрат часу на виконання серверної частини сайта рекомендується будувати сайт з використанням тільки клієнтських технологій програмування. Особливо це стосується основної сторінки сайта, яка завантажується першою. У багатьох випадках застосування на першій сторінці серверних технологій пояснюється реєстрацією відвідувачів сайта, але така інформація фіксується Web-сервером і є доступною для Web-адміністратора. Як ще одну альтернативу можна запропонувати зовнішній лічильник відвідувань. Зазначимо, що широке застосування серверних технологій призводить до зменшення рівня безпеки Web-сервера з погляду реалізації атаки на відмову. Розглянемо втрати часу на інтерпретацію браузером сторінки сайта та відображення її на екрані. За специфікацією інтерпретація сторінки проводиться браузером послідовно зверху до низу. Але для найбільш розповсюдженого браузера Microsoft Internet Explorer послідовна інтерпретація та відображення мають місце тільки для тегів HTML. У випадку використання на сторінці скриптових мов програмування, аплетів або Flash-об’єктів вказана послідовність порушується. Це видно при перегляді сторінок сайтів, у верхній частині яких є анімація, що у багатьох випадках реалізована за допомогою викликів рекурсивних функцій. У таких випадках браузер не створює новий обчислювальний процес. Анімаційні обчислення відбуваються у тому ж потоці обчислень, у якому проходить завантаження сторінки. Відбувається різке навантаження на центральний процесор комп’ютера. Як показує досвід, при розміщенні у верхній частині сторінки трьох анімаційних об’єктів час її відображення на екрані може зрости у 2-5 разів. Положення ускладнюється тим, що для браузера Microsoft Internet Explorer почати запуск анімації при здійсненні події “Завершення завантаження сторінки” не вдається. З указаних причин рекомендується обмежити кількість анімаційних ефектів на сторінці двома, затримати виконання анімації на час, достатній для завантаження всієї сторінки, та проводити анімацію у окремих обчислювальних потоках. Наприклад, затримати час виконання анімації можливо за рахунок вставки у анімаційну функцію animhead наступного програмного коду: time=0; if (time==0) setTimeout('anim()',7000); else setTimeout('anim()',100); time=1; Вказаний програмний код написаний на мові JavaScript і затримує виконання анімації на 7 секунд, при виконанні анімації через 0,1 секунди.
8.4. Адаптація сайта до клієнтського програмного забезпеченняАдаптація сайта до клієнтського програмного забезпечення означає адаптацію до параметрів екрану комп’ютера, типу та настройок браузера та операційної системи користувача. Для проведення адаптації сайта до характеристик екрану необхідно у першу чергу його пристосувати до перегляду на екранах з різною кольоровою гамою та різною дозволяючою спроможністю. Хоча сучасні екрани, як правило, здатні передавати більше 1 500 000 кольорів, але відображатись ці кольори можуть по різному. З цієї причини рекомендується на сайті використовувати так звані “безпечні кольори”. Кількість цих кольорів 256 і вони гарантовано однаково відображаються на всіх екранах. Адаптацію сайта до дозволяючої спроможності екрану провести більш складно. Погано адаптований сайт або займає лівий верхній кут екрану, залишаючи праворуч і знизу пусті місця, або далеко виходить за межі екрану. З цих причин страждає дизайн сайта, крім того, ускладнюється навігація по сайта. Найпростішими методами адаптації є оформлення сторінки сайта у вигляді таблиці, вирівняної по центру сторінки. У випадку використання у заголовку малюнка має сенс розділити його на дві частини. Першу частину, яка містить інформаційну частину малюнка, вставити за допомогою тегу <img> у рядок або комірку таблиці. Іншу, фонову частину вставити як фоновий малюнок рядка або комірки таблиці. Це дозолить автоматично розмножувати фонову частину малюнка залежно від ширини сторінки. Зазначимо, що інформаційна частина малюнка повинна коректно відображатись на невеликих екранах, для цього її ширина повинна бути у межах 100 – 200 пікселів. Ширина фонової частини малюнка повинна бути у межах 15-25 пікселів. Таким чином заголовок сайта буде коректно виглядати на всіх екранах, а сумарний розмір його графічних файлів буде становити 15–20 кілобайт. Пристосованість текстової частини сайта до дозволяючої спроможності екрану можна здійснити шляхом встановлення коефіцієнта пропорційності між розміром шрифту та дозволяючою спроможністю екрану. Для коректного відображення сайта різними браузерами слід використовувати при його розробці тільки стандартні теги HTML, а також не застосовуючи ті теги, які не сприймаються ведучими браузерами. Так, наприклад не рекомендується використовувати стандартний тег шару <div>, який некоректно сприймається браузером Netscape Navigator. Адаптацію сторінки до настройок браузера можливо проводити шляхом урахування розмірів вікна браузера та встановлених клієнтом розмірів тексту. Погана адаптація до вказаних настройок може негативно позначитися на дизайні сторінок сайта, на яких важливим є взаємне розміщення графічного та текстового матеріалу. Негативний вплив відбувається завдяки переходу малюнків у непередбачені для них рядки. Щоб цього не сталось, можна за допомогою тегу <nobr> заборонити розрив найдовшого рядка на сторінці, або взагалі заборонити зміну користувачем розмірів вікна браузера. У такому випадку рекомендується відкрити вікно браузера на весь екран. Це можна зробити обчисливши ширину ( w ) та висоту ( h ) екрана. Після цього слід сполучити ліві верхні кути вікна браузера й екрана та перемалювати вікно браузера відповідно до розмірів екрана. Відповідний програмний код на мові програмування JavaScript має вигляд: h=window.screen.height; w=window.screen.width; window.moveTo(0,0); window.resizeTo(w,h); За необхідності заборони користувачем розмірів тексту сайта можна встановити цей розмір за допомогою стилів. Наприклад: <font style="font-size: 14px;">приклад</font> Розміри букв слова “приклад” практично завжди будуть 14 пікселів. 8.5. Контрольні запитання
З повагою ІЦ “KURSOVIKS”! |