Частина перша. Оптимізація коду, Статті, HTML, XML, DHTML, статті

Запускаємо улюблений Notepad і відкриваємо свою сторінку. І бачимо ми дуже
красивий html, дбайливо відформатований вручну або різними програмами, щоб
і читався зручніше, і редагувався швидше. А заодно і повільніше завантажувався. Так
що, може бути відразу варто прибрати пробіли, табуляції і переклади рядків, щоб не
мучитися із завантаженням цих порожніх символів? Багатьом ліньки це робити, а шкода –
швидкість Інтернету ж не тільки від швидкості модемів залежить … Сумно мені, та
і вам як не стане сумно, коли відкриєте исходники парочки відвіданих сайтів,
а там пустот більше ніж тексту. Ось і пошкодуєте, що взагалі туди заходили. І
власникам таких сайтів як не сумно – це ж скільки зайвого трафіку!


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

і всякі

<td><a href="d.htm">download</a></td>
<td><a href="l.htm">links</a></td>

то що тут можна сказати? Від склерозу овочі допомагають. І ще: якщо зустрінете
рада прописувати ключові слова в коментарях – не вірте.

Тепер про типові нераціональність коду. Такі нераціональності рідкісні при
ручному введенні html, але у зв’язку з повсюдним користуванням FrontPage і йому
подібних софтин вони зустрічаються на кожному кроці. Найпоширенішим
надмірністю є криве використання тега font. Наприклад:

  Текст  

замість

 Текст 

Але це ще нічого, набагато гірше, коли візуальний редактор видає нічого не
непідозрюючому автору подібний перл:

 Текст1 
Текст2
Текст3

замість простого

 Текст1 Текст2 Текст3 

Особливо на тег font грішать старі версії FrontPage. Ось так ось. А адже
багато любителів цієї програми і не підозрюють … До речі, таке використання
я вперше виявив в початковому тексті сторінки, яка як раз за
цей самий FrontPage і агітувала.

Перед тим як оформляти сторінки тегами задумайтеся: а чи не простіше
Чи можна використовувати css? Завдяки css можна зменшити розмір кожної
сторінки, винесення ж заголовка css у вигляді окремого файлу зменшить сумарний
розмір сайту. Але тут-то доведеться складніше. Адже якщо і html <зі словником>, то куди вже там css вчити!

Тег font – це, звичайно ж, півбіди. Візуальні редактори взагалі видають масу
надлишкового коду: бездумно прописують ширину (Width) та висоту (height)
таблиць і осередків (часто хоча б висоту можна видалити), іноді додають зайві
прогалини в кінці тега або в середині (таке можливо і при ручному введенні коди):

Абзац ,

Текст1 Текст2 ,


частенько повторюють вирівнювання:

<td align="center">
<div align="center">
<center>

Абзац по центру
</center>
</div>
</td>


Лапки, до речі, теж можна прибрати. Усі програми-редактори ставлять їх куди ні
попадя, хоч насправді лапки потрібні тільки в атрибутах alt і href, а також
в meta-тегах.

Ось згадав, що і в meta-тегах частенько бувають надмірності. Надмірністю
буде занадто довгий список ключових слів (Keywords), а також
розлоге опис (description) сайту. Пошукові сервера і каталоги не люблять
базік, тому списку слів не повинно перевищувати довжину в 1000 символів, а
опису – 200 символів. До речі, деякі <іскалкі> взагалі ігнорують
такі meta-теги, а всі пошуковики, як змовившись, ігнорують відомості про
автора (author), програми-редакторі (generator) і тому подібну інформацію. Так
що, якщо вже користувалися візуальними редакторами, то видаліть рядки, подібні

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

заодно і ганьби серед професіоналів уникнете.

У початковому тексті будь-якої сторінки багато місця займають імена файлів –
вставлені картинки, посилання на інші сторінки сайту, звернення до зовнішніх css.
Обтяжувати сайт, на кожній сторінці багаторазово звертаючись до зображення під
назвою my_new_website_logo2001.gif, Звичайно ж, нерозумно. До того ж,
тому що звичайно на сторінках багато картинок, що зберігаються в одній окремій папці –
часто Images, то просте перейменування її в Im або I дуже істотно зменшить
розміри сайту. Інші папки називати, звісно, ​​теж треба з розумом.

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

Частина друга. Прискорення


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

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

Перейдемо до картинок. Браузери зберігають всі завантажені малюнки в особливій
папці – кеші – і при повторному завантаженні малюнків підхоплюють їх звідти. Тому
на різних сторінках не можна використовувати однакові малюнки з різних каталогів.
Правильний варіант – скинути всі зображення в одну папку – як уже говорилося,
краще за все з ім’ям Im або I. До речі, обов’язково пропишіть атрибути
width і height тега . Тільки таким чином можна дати браузеру
інформацію про те, скільки пікселів треба виділити для картинки, адже інакше при
підвантаження кожного нового зображення весь уже відкритий на сторінці контент буде
зсуватися.

Через можливість паралельної закачування картинок в сучасних браузерах
виходить, що одна велика картинка в 40 Кб буде грузиться повільніше, ніж
чотири картинки по 10 Кб. Розріжте великі картинки і відчуйте різницю. Але
не варто різати на дуже багато маленьких шматків, інакше вийде зворотний
результат – браузер паралельно закачує певне число файлів, та й вам
воно вийде боком: уявіть, як організувати всю цю мозаїку в коді
сторінки! А уявіть, скільки місця може займати десяток тегів
з усіма їх атрибутами, плюс таблиця для розміщення картинок. І ще, при
правильному підході до розрізання можна зменшити сумарний розмір – можна
замінити картинку в 40 Кб кількома, які займають в сумі значно менше.
Як? Дуже просто – ріжте розумно, знаючи, що зменшення розміру кожного
окремого шматка можна досягти зменшенням кількості кольорів (gif) або
зменшенням якості (jpeg).

Вкрай загальмовують відкриття сторінки банери і лічильники. Сервери, з яких
вони завантажуються, часто повільні самі по собі, та до того ж постійно
перевантажені. Але тут вже нічого не можна вдіяти, хіба що обмежитися одним
лічильником і одним-двома банерами на кожній сторінці.

До речі про лічильники. Якщо не хочете грунтовно загальмувати відкриття
сторінки, то не слідуйте рекомендаціям різних рейтингів по встановленню лічильника
вгорі сторінки. Лічильник (навіть однопиксельний, адже не в картинці справа) завжди
ставте внизу.

Давайте ще раз подумаємо, чи потрібні деякі скрипти на сторінках вашого
сайту. Чи варті враження відвідувача від якого-небудь примітивного таймера тих
грошей, які йому доводиться витрачати на час його завантаження та відкриття? Особливо
якщо згадати, що у всіх сучасних операційних системах є свій таймер,
всім звичний і на всьому звичному місці … Взагалі, java-скрипти
професійні веб-майстри рідко вживають. Іноді реалізують ефект
перекочування зображень (rollover effect), іноді (частіше на західних сайтах)
роблять, що випадає. І все …

Частина третя. Остання


Справедливості заради слід зазначити, що існують програми стиснення
сторінок, але заради тієї ж справедливості зауважу, що жодна з них не
відповідає викладеним вимогам повною мірою. Як правило, програмісти
цих програм рідко дозволяють собі щось більше, ніж просте видалення
форматування коду або чищення html, згенерованого Word “ом. Та й
втручання в свій код ні хороший веб-майстер, ні поганий FrontPage 🙂 НЕ
любить.

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

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*