Оптимізація сайту для мобільних пристроїв

2997

Google – дивна організація. Гугл надсилає мені окреме повідомлення про помилки на моїх сайтах, хоча на його ж основній сторінці та дочірніх сервісах присутні ці самі невирішені проблеми. Достатньо перевірити тими ж інструментами, на які Гугл посилається
https://developers.google.com/speed/pagespeed/insights/
https://www.google.com/webmasters/tools/mobile-friendly/

P.S.: треба зазначити, що сьогодні Гугл  багато своїх помилок виправив, хоч вчора, коли я опрацьовував ситуацію, все було печально.

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

Серед його претензій: зображення виходять за межі екрану, а інтерактивні елементи знаходяться занадто близько один до одного. Це все, звісно, стосується екранів з шириною 320 пікселів та пальцевого способу тикання.

Щоб слідкувати за тим, як відображається сайт на мобільниках, в Хромі є хороший інструмент – права кнопка, “Перевірити елемент”, клацнути на іконку мобіли знизу.

В зображенні треба виставити ширину 320 пікселів і дивитись, чи не з’явиться горизонтальна прокрутка в адаптивному дизайні вашого сайту.

тестування мобільного пристрою

оптимізація блоків реклами

У мене одразу показало, що виперлась реклама Адсенс, бо ширина оголошення – 336 пікселів. Щоб адаптувати рекламу від Адсенс для ширини 320, я створив нові оголошення шириною 300 пікселів, а на сторінках підлаштував виведення асинхронного коду Адсенс залежно від ширини екрану. Як це зробити? Просто:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script type="text/javascript">
var td_screen_width = document.body.clientWidth;
if ( td_screen_width >= 340 ) {
 /* large monitors */
 document.write(\'<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-*****" data-ad-slot="*****"></ins>\');
 (adsbygoogle = window.adsbygoogle || []).push({});
 } else {
 /* mobile phone devices */
 document.write(\'<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-*****" data-ad-slot="*****"></ins>\');
 (adsbygoogle = window.adsbygoogle || []).push({}); 
 }
</script>

Замість зірочок і розмірів треба ввести дані своїх оголошень, якщо захочете скористатись цим кодом.

оптимізація стилів та скриптів

Використовуючи в css @media screen and (max-width:480px), для всіх <li> в списках меню я додав більший padding. В коментарях зменшив віконця вводу тексту і підправив дерево відповідей.

Переніс всі скрипти в футер, щоб вони виконувались вже після завантаження сторінки. Для цього в файлі шаблону function.php дописав:

remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);

Ще Гугл сварився на те, що в хеадері завантажуються файли стилів. Але забирати і їх в футер – це вже якесь збоченство, як на мене. Тому я просто об’єднав їх в один style.css і закомпресував.
Ще один файл стилів нахабним чином вставляв один плагінчик. Довелось його каструвати теж в function.php

add_action( 'wp_print_styles', 'deregister_styles', 15 );
function deregister_styles() {
wp_deregister_style( 'yarppWidgetCss' );
}

 

Тепер все працює ідеально, але Гугл і далі свариться на “випирання картинок і близькі елементи”. Овва…

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

Тут я знайшов лише один вихід – скористатись джаваскріптом, подібним на той, що я застосував для блоків Адсенс, і виводити картинки кодом. А на малих екранах або взагалі забирати картинки, або виводити мініатюри.

Але навіть після всього зробленого і далі Гугл висуває претензії на те, що якісь елементи не в порядку. Які саме, встановити неможливо (наприклад, якісь системні повідомлення флеша з відео на ютубі) або незрозумілі натяки на те, що маленька кнопка того ж Гугл+ розпирає екран.

Передаю окреме вітання програмістам Гугла – поздоровляю, ви балбєси.

НАПИСАТИ ВІДПОВІДЬ

Please enter your comment!
Впишіть своє ім'я