Фото “з’їли” все місце на сайті

Не рідкість, коли власники веб отримують “листи щастя” від хостингу з повідомленням про вичерпання запасу вільного місця. Ця проблема найбільш актуальна для фотографів, адже їм необхідно демонструвати результат своєї роботи і робити це постійно. А значить все більше і більше фотографій будуть займати місце, і якщо ви активно оновлюєте і наповнюєте портфоліо, вичерпати свій ліміт можна дуже швидко. Як вирішити дану проблему покажу на прикладі Вордпресс.

Оптимізація зображень на сайті

Збільшити ліміт, перейшовши на інший тариф

Наприклад на хостингу Україна в стартовому тариф виділяється майданчик на SSD диску в обсязі 1Gb, А в максимальному 10Gb. Мінус даного способу – це ціна, не кожен власник малого бізнесу на стадії становлення розуміє, за що платить 3000грн / рік (за хостинг). Особливо якщо відношення до сайту “аби був” і не вкладає гроші в рекламу і просування, а значить не може отримувати якісний трафік клієнтів, який перетворить його витрати в інвестиції.

Видалити старі сторінки / записи з фото, що б розмістити нові

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

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

Оптимізувати розмір закачуваних фото.

Сучасна фотоапаратура дозволяє створювати зображення з високою роздільною здатністю. І власники / адміністратори сайту виставляють на сайті зображення прямо з фотоапарата, що абсолютно не потрібно.

Наприклад, дозвіл картинки 8000 * 6000 пікселів. Порівнюємо з самим дозволом великого екрану для ПК 1920 * 1068, тобто фото можна і потрібно зменшувати практично в 4 рази. Статистика говорить, що переглядів з таких моніторів близько 5%. Висновок: обрізайте фото по ширині контенту

Сжатие фотографии

В інеті є кілька ресурсів, що дозволяють стиснути фото без втрати якості. Іноді вони здатні зменшити вагу картинки на 95% в порівнянні з оригіналом

Вибір відповідного формату

Раніше все було просто і універсально: для великих фото використовувався формат .jpg, а зображення з наявністю прозорості, застосовувалися в .png. В останні пару років браузери пропонують свої формати, що дозволяють зменшувати вагу фотографій, при цьому залишаючи якість на високому рівні.

Найбільша активність в цьому Google з форматом WebP. Ті, хто користуються сервісом перевірки швидкості від Google Speed, знають, що гугл занижує показники вебресурса, яке ігнорує WebP

Сюрпризи від Вордпрес

CMS WordPress за замовчуванням, для кожного завантаженого зображення, створює 4 копії в різних розмірах. А якщо ви використовуєте платні теми і плагіни зображень, то число таких дублів може зрости до 10.

З усіх розмірів, вам може знадобитися розмір, який називається “мініатюра”, він повсюдно використовується для створення превью галерей. А все решта просто займають місце, тк домогтися виведення потрібного вам розміру можна через код, а не підстановкою чергового дубля. Щоб вирішити цю проблему необхідно, по-перше, відключити генерацію додаткових розмірів, а після цього вручну видалити дублі сформовані раніше.

Сторінка помилки 404: адекватне оформлення або втрата клієнтів?

Клієнти, додавали такі сторінки в закладки, або використовують ці старі посилання, наприклад, на форумах при переході потрапляють на сайт, але замість потрібної сторінки отримують повідомлення про те що такої сторінки не існує.

Також ви можете потрапити на таку сторінку, якщо:

  • не в повному обсязі скопіювали посилання
  • або структура змінилася і сторінка була переміщена в інший розділ;
  • а може сайт був перенесений на іншу CMS, в результаті чого змінилося розширення файлів.

Уникнути масових проблем можна за допомогою редиректу з віддалених і переміщених сторінок, на нові або на головну. Але все ж ще залишається фактор користувача, тому варто взяти цей процес під контроль і привести зовнішній вигляд помилки 404 до прийнятного виду. Перевірити відображення цієї області на вашому сайті, дуже просто. Перейдіть на ваш сайт і в адресному рядку, після домену, введіть кілька символів. Наприклад http://mysite.com/блаблабла (замість mysite.com вкажіть ім’я вашого сайту)

З яких секцій може складатися сторінка 404?

1-Шапка сайту, що б клієнт міг ідентифікувати ресурс на який він потрапив

2-Інформація, про те що такої сторінки не існує і пропозиція щодо вирішення проблеми

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

3-Підвал сайту

Приклади оформлення у деяких ЗМІ

Цензор – повний джентльменський набір: повідомлення про помилку і можливість повернутися перейти на головну + меню

Обозреватель
Картинка з вибухає логотипом) Повідомлення + пропозицію скористатися пошуком. Однак рядок пошуку забули поставити))

Корреспондент
1 Повідомлення про помилку
2 Посилання на пошук і на розгорнуте меню сайту
3 Блок з останніми новинами

Якщо у вас бурхлива фантазія і ви бажаєте скрасити розчарування клієнта зниклої сторінкою, оформіть її унікально, як це зробили деякі компанії

Хлібні крихти Woocommerce: як видалити, змінити, перемістити

Зіткнувся з проблемою: розмітка HTML мене не влаштовувала, тк погано підходила для динамічних сторінок. Здавалося б елементарна проблема, розв’язувана зміною коду верстки, в чому складність? Складність, а точніше нестандартність, в підході Woocommerce. І якщо ви не готові миритися зі стандартними сутностями цього інтернет-магазину, пора зрозуміти його принципи.

Хлібні крихти Woo – місце дислокації

Відповідальність за виведення несе функція

<?php woocommerce_breadcrumb(); ?>

прописана вона в файлі розташованому за адресою: site.com/wp-content/plugins/woocommerce/includes/wc-template-functions.php, а шаблон цієї секції знайдете тут: site.com/wp-content/plugins/woocommerce/templates/global/breadcrumb.php

А тепер про особливості – функція хлібних крихт не виводиться самостійно, а зазвичай у складі хука. в моєму випадку це виглядає так:

<?php
    /**
    * woocommerce_before_main_content hook.
    *
    * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
    * @hooked woocommerce_breadcrumb - 20
    */
    do_action( 'woocommerce_before_main_content' );
?>

За коментарями видно, що breadcrumb поключенія “другим номером” в хук з назвою woocommerce_before_main_content.


Breadcrumb Woo: перепозиціонування

Виходячи з необхідних завдань можна припустити 3 варіанти дій:

  • Видалити функцію зі хука;
  • Видалення, з перепідключеннями у вигляді окремої функції;
  • Видалення з включенням до складу іншого хука.

Процес видалення / виключення будемо розглядати на прикладі хука опублікованого вище. Зверніть увагу на 3 складових:

  • Назва хука з яким працюємо;
  • Найменування функції;
  • Цифра позначає порядок черговості.

Всі 3 складові у нас відомі, значить код буде виглядати так:

remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );

і розміщуємо його в файлі functions.php. Якщо цю або іншу функцію треба приєднати до іншого хуку то використовуємо такий код:

add_action( 'woocommerce_before_shop_loop_item_title(имя хука)', 'woocommerce_template_loop_product_title(имя функции)', 5(порядок очередности) );