Оптимізація структури та змісту сайту

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

Проведемо аналіз проміжку часу який проходить від подачі клієнтом запиту на перегляд сайту до його відображення на екрані. Будемо мати на увазі, що сайт переглядається клієнтом при стандартних настройках браузера, а також, що клієнту для перегляду необхідно використати мережу 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 секунди.