Внесення коду на дієту - блог Miva
Це гостьовий допис Брюса Голуба з Phosphor Media. Погляди автора повністю відповідають його власним і можуть не відображати погляди Міви Мерчант.
Широкосмуговий доступ до Інтернету зараз майже універсальний у США, і його прийняття сягає в середньому 70%. Європа закриває 50%, а деякі сфери - фактично 100%. То чому б нам піклуватися про збереження пари K-байтів тут, десятків секунд там?
Тому що в Інтернеті ніколи не знайдеться місця для роздутого та неефективного коду. Хоча за 10 років середня швидкість доступу до Інтернету зросла з 54 Кб до 4,2 Мб, очікування середнього користувача Інтернету зросли ще більше. Тоді, коли 56 Кбс було нормою, пересічний відвідувач Інтернету нічого не думав чекати до 20-30 секунд для завантаження сторінки. Тепер це очікування менше 2 секунд. Навіть коли сайт розміщує вміст із швидкістю менше 1 секунди, дослідження показали, що зменшення часу завантаження сторінки на 10-20 відсотків має суттєвий позитивний вплив на тривалість та глибину відвідування сайту. (Час, який відвідувач проводить на сайті; і кількість сторінок, які відвідувач переглядає.) На сайті електронної комерції збільшена тривалість та глибина сторінки, як правило, прямо пропорційні конверсіям продажів.
Отже, питання полягає в тому, як зробити свій сайт швидшим, навіть якщо він уже швидкий? Продовжуйте, і ми розглянемо деякі методи, що призводять до ефективного кодування та впровадження вітрин магазинів Miva Merchant. (Зверніть увагу, що кодування, про яке ми маємо на увазі тут, обмежується технологією Store Morph Technology, HTML та іншими сценаріями на основі браузера, такими як Javascript.)
Трохи передумови
Давайте подивимося на частини та процеси сторінки Miva Merchant та як ці частини витрачають ресурси та час:
Коли клієнт запитує сторінку у продавця:
- Сервер обробляє початковий запит і направляє його на движок MivaMerchant Empressa (що забезпечує керування сценарієм Miva Merchant). Як правило, це займає дуже мало часу, і механізми контролю його ефективності, як правило, не в руках власника магазину.
- Сценарій Miva Merchant починає проходити свою логіку для створення сторінки HTML, яка потім передається назад на сервер. Ця логіка включає обробку логіки SMT у ваших шаблонах продавців Miva. Ось одне з місць, завдяки яким ваші зусилля можуть значно збільшити швидкість.
- Сервер надсилає клієнту HTML-сторінку. Сторінка, звичайно, повинна подорожувати через Інтернет, потім відвідувачі Інтернет-провайдерів і назад через Інтернет до відвідувача. Ми не можемо тут багато чого зробити.
- Вміст сторінки HTML надходить на комп’ютер відвідувача, і браузер зчитує (відображає) HTML на сторінці. Під час читання сторінки на оригінальний сервер надсилаються додаткові запити на отримання таких елементів, як зображення, таблиці стилів та пов’язані сценарії. Тут ми також можемо знайти можливості для збільшення швидкості.
Визначення швидкості - Отримання радарної гармати
Отже, крім натискання на перезавантаження та підрахунку одного Міссісіпі, двох Міссісіпі тощо, як ви знаєте, як швидко завантажується ваша сторінка? Є секундомір; але навіть вони будуть більше залежати від рефлексів, ніж продуктивність сервера та кодів. Одним із варіантів є використання інструменту контрольної оцінки, такого як безкоштовна функція в нашому модулі Merchant FAST. Ще дві альтернативи, які я знаю, - це набір інструментів Emporiumplus.com та інструментальний пояс PCINet.com. Будь-який із цих інструментів чудово підходить для моніторингу прогресу вашої SMT та оптимізації шаблонів, але вони не вимірюють загальний час (завантаження зображень, час переходу сервера та аналіз браузера). Для цього вам потрібно вийти за межі сайту та використовувати такі інструменти, як: Веб-очікування.
Організація, оптимізація та ефективність
Існує прямий зв’язок між ефективним кодом та добре організованим кодом; навіть якщо деякі організаційні заходи насправді додають основу коду. Вміння „бачити” структуру коду та вмісту полегшує виявлення неефективності, помилок та інших проблем. Отже, давайте почнемо з організації:
Код документа
Що? Хіба це не ДОДАТЬ до розміру отриманої сторінки? Чому, так це робить. Але розмір сторінки не настільки важливий, як інші елементи, такі як скрипт-виклики функцій і функцій, які більше не використовуються. Наприклад, додавши:
// Використовується для запуску функції Bouncing Foo Ball
до вбудованого сценарію, такого як:
Означає, що якщо функцію Bouncing Foo Ball буде видалено пізніше, ви, клієнт або інший розробник легко побачите, що цей код зайвий і може бути видалений.
Різні області коду вимагають різних методів коментування
Зміст документа
Подібно до документування коду, документування вмісту полегшує виявлення надмірностей, підтримує порядок і допомагає запобігти неправильним макетам, які можуть уповільнити візуалізацію сторінки. Це також чудова економія часу, коли ви тільки починаєте дізнаватися, як Miva Merchant складає сторінку. Це може запобігти зловживанням вмістом, таким як декілька типів документів, теги голови та тіла та роздутий код макета. Якщо ви тільки починаєте, перегляньте принаймні загальні елементи для вашого сайту (вкладки, позначені зірочкою) і додайте коментар про відкриття та закриття.
Наприклад, у Глобальний заголовок додайте
як перший рядок і
як останній рядок у цьому шаблоні. Отже, коли ви переглядаєте свій вихідний код, шукаючи проблеми з макетом, ви можете легко побачити, що є частиною глобального заголовка, розкриває сторінки іншим вмістом.
Наприклад, я часто знаходжу такі речі, як наведене нижче, у вихідних даних сторінки Miva Merchant:
Коли буде достатньо наступного:
Мало того, що менше рядків і, можливо, легше зрозуміти, але швидше відтворити браузером. Додавання коментарів HTML допомагає зрозуміти, звідки надходить неефективність та як їх виправити.
Макет CSS проти таблиці
CSS (каскадні таблиці стилів) значно перевершують макет на основі таблиці як з точки зору організації, так і з точки зору зручності пошуку та швидкості. Остання версія MivaMerchant міститиме серію шаблонів, повністю засновану на CSS Layout. Хоча перетворення веб-сайту, заснованого на таблиці, у CSS виходить за рамки цієї статті, все ще існує кілька методів, заснованих на CSS, які можна застосувати, щоб зробити навіть макет на основі таблиці більш ефективним.
Встановлення таблиці за допомогою CSS
Є кілька простих методів CSS, які можна використовувати з таблицями. Ці методи можуть замінити дзвінки шрифтів, форматування комірок, вирівнювання, фони та кольори. Давайте поглянемо на декілька, щоб розпочати.
Шрифти
Ніщо не говорить, як:
Особливо, коли це повторюється для кожного шматка тексту в кожній комірці таблиці. Натомість простий клас стилю може впоратись із усім цим та іншим. Наприклад: якщо ви створили клас CSS з назвою mySpecialTable і призначили йому весь необхідний стиль шрифту, ви просто використали б: