Сайт к любым санциям готов! - Веб-студия WebTend г. Екатеринбург

Блог веб-студии WebTend. Блог веб-мастера Алексея Блохина. Публикации, статьи

Сайт к любым санциям готов! - Веб-студия WebTend г. Екатеринбург

Сайт к любым санциям готов!

Сейчас везде ключевое слово против РФ - санкции. Большинство из них не несет нам россиянам никаких угроз, хотя и напрягают. В этой публикации я хочу рассмотреть апокалипсический сценарий - изоляция Рунета. И расскажу как подготовиться к этому для вашего сайта ("на всякий случай").

В данной статье я в большей степени раскажу о устранении зависимости от Google, но так же и от многих внешних загрузок на сайте. Это кстати и повысит скорость загрузки сайта, так что в любом случае будет полезно.

Конечно, скорее всего, полностью заблокировать международный трафик не получится - будут придуманы новые технические и программные средства обхода запрещений. На подходе система глобального спутникового интернета OneWeb, которая будет покрывать всю планету.

Но подготовиться к некрасивым действиям каких то крупных американских компаний можно уже сейчас. "Подстелить соломку" для сайта...

Как все в курсе, недавно прошли две новости касательно Google в России:

Российский суд оштрафовал мировых ИТ-гигантов на ₽9,2 млрд.

Роскомнадзор: Google, Apple, Meta и другие компании игнорируют требование открыть офисы в РФ к 1 января.

Компании пока игнорируют эти требования, но что если они решат отказаться от работы в России? И со своим уходом решат громко хлопнуть дверью, несмотря на колосальную потерю прибыли? Мы уже не раз видели неадекватные действия бизнеса, под давлением политиканов - "стреляющих себе в ногу"...

Итак, пофантазируем, в соотношении с вашим сайтом:

В одно доброе российское утро вместо привычной заставки будет:

Сайт к любым санциям готов! - Веб-студия WebTend г. Екатеринбург

Что будет с сайтом?

Вроде бы и ничего страшного, но есть важные вещи.

1. Если ваш сайт использует Google AdSense и Google AdWords - рекламные сервисы гугл, то это пропадет.

Используйте - Яндекс директ и Яндекс маркет.

2. Пропадет статистика Google Analytics.

Используйте Яндекс Метрику. Она не чем не хуже и во многом даже лучше и понятней.

3. Пропадут инструменты и отчеты Search Console.

Используйте Яндекс вебмастер. Он во много раз информативней гугл консоли и дает больше информации и сервисов.

4. И пожалуй самое важное для сайта - большинство их использует Google Fonts https://fonts.google.com, которые подкачиваются при их открытии с гугл сервера.

Иначе, ваш сайт потеряет уникальный дизайн, так как эти шрифты не загрузяться и произойдет их замена на стандартные шрифты браузера. На этом я и хочу подробно остановится.

Вначале определите, какие шрифты загружает ваш сайт. Для этого откройте его в режиме просмотра кода и посмотрите между тегами <head> и </head> есть ли тег link href с fonts.googleapis.com.

Пример:

<link href="https://fonts.googleapis.com/css?family=Roboto+Sans:300,300i,400,400i,600,600i,700,700i&display=swap&subset=cyrillic-ext" rel="stylesheet" type="text/css">

Как видим на этом примере используется Google Fonts - Roboto.

Чтобы сделать загрузку шрифта не с Google, а локально с вашего же сайта, можно проделать следующие действуия:

- Набрать в поиске https://fonts.google.com этот шрифт и загрузить его в архиве.

Или в фильтре сверху выбираем:

    категорию — самая популярная Sans Serif;
    нужный язык (Cyrillik -русские / кириллические);
    сортируем (при необходимости).

Что мы видим в архиве, довольно скучно и годится для современного сайта мало, хотя можно и конвертировать:

Сайт к любым санциям готов! - Веб-студия WebTend г. Екатеринбург

Идем на наш российский сайт: https://webfonts.pro и так же в поиске набираем нужный вам шрифт и загружаем архив. Тут уже почти все что нужно есть, но к сожалению не все:

Сайт к любым санциям готов! - Веб-студия WebTend г. Екатеринбург

А теперь, подробно разберем, что нужно современному сайту. Это зависит от браузеров, который использует пользователь.

Сайт к любым санциям готов! - Веб-студия WebTend г. Екатеринбург

Сайт к любым санциям готов! - Веб-студия WebTend г. Екатеринбург

Уже понятно, что формат шрифтов svg и eot мы использовать не будем. Это не актуально для современных браузеров, как стационарного компьютера, так и мобильных гаджетов.

К вопросу - "Нужно ли подключать все форматы шрифтов?". Ответ - нет!

Остаются три расширения шрифтов - TTF, WOFF и WOFF2.

Мы же хотит кросс браузерности? Правильно!

Чтобы закончить подготовку шрифтов используемых на вашем сайте (пусть и на всякий пожарный случай) вам не хватает WOFF2 формата.

Его легко можно получить на сервисах конветации из WOFF:

https://www.onlinewebfonts.com/woff2-converter

https://cloudconvert.com/woff-to-woff2

https://everythingfonts.com/woff-to-woff2

https://anyconv.com/ru/konverter-woff-v-woff2

Конечно, весь нужный вам пакет шрифтов надо подготовить заранее. На всякий случай, на всякий случай...

Немного про современные CSS3 - шрифты, используемые современными браузерами. Немного теории:

В CSS3 поддержка сложных шрифтов обеспечивается посредством возможности @font-face, которая применяется следующим образом:

  1. Требуемый шрифт (или, более вероятно, несколько версий шрифта для поддержки разных браузеров) загружается на сайт.

  2. Каждый шрифт регистрируется в таблице стилей с помощью команды @font-face.

  3. Зарегистрированный шрифт используется в правилах стиля указанием его названия, точно так же, как и обычные веб-шрифты.

  4. Когда браузер обнаруживает таблицу стилей, в которой используется специальный веб-шрифт, он загружает этот шрифт с сервера в свой кэш для временного хранения страниц и изображений. После этого браузер использует этот шрифт только для данной страницы или сайта. Если этот же шрифт указывается в другой странице, он должен быть зарегистрирован на этой странице и загружен на ее сервер, откуда он может быть загружен браузером в свой кэш.

TTF (шрифт True Type)

Это основные типы шрифтов, созданные Microsoft и Apple, и поэтому они предустановлены как на компьютерах Windows, так и на iOS. Он состоит из одного двоичного файла, поэтому им легко управлять. Это наиболее часто используемые форматы для файлов шрифтов, и все основные браузеры поддерживают его, но единственная проблема с этим форматом заключается в том, что шрифты TTF не сжимаются, а размер файла довольно велик по сравнению с другими форматами.

WOFF (формат открытого веб-шрифта)

WOFF — это в основном OTF или TTF с метаданными и сжатием, поддерживаемыми всеми основными браузерами. Он был создан, чтобы жить в сети. Это результат сотрудничества Mozilla Foundation, Microsoft и Opera Software. Поскольку шрифты сжаты, они загружаются быстрее. Метаданные позволяют включать данные о лицензии в файл шрифта для решения проблем с авторским правом. Это рекомендация консорциума World Wide Web, которая, несомненно, является будущим форматов шрифтов.

WOFF2

Очевидно, это следующая версия WOFF с улучшенным сжатием. WOFF2 поддерживает почти все популярные веб-браузеры и широко используется веб-разработчиками. Кроме того, он поддерживает спецификации OTF и TTF, а также коллекции шрифтов и вариативные шрифты.

Сайт к любым санциям готов! - Веб-студия WebTend г. Екатеринбург

Сайт к любым санциям готов! - Веб-студия WebTend г. Екатеринбург

Сайт к любым санциям готов! - Веб-студия WebTend г. Екатеринбург

И так пакет шрифтов у вас готов. Как же его подключить локально к сайту.

Как подключить его к сайту.

Вначале уберите по возможности вызов загрузки шрифта с сервера гугл из шаблона, сотрите строку:

<link href="https://fonts.googleapis.com/css?family=Roboto+Sans:300,300i,400,400i,600,600i,700,700i&display=swap&subset=cyrillic-ext" rel="stylesheet" type="text/css">

Он может у вас и загружаться из таблицы стилей - css.

Там прописано так, как правило в самом верху:

@import 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,600,600i,700,700i';

Далее загружаете подготовленный ранее пакет шрифтов в свой шаблон. Чаще всего это папка шаблона fonts/

Теперь идем в таблицу стилей CSS вашего сайта и в самом верху пишем следующее правило для подключения шрифтов:

@font-face {font-family: Roboto; src: url(../fonts/Roboto.ttf); src: url(../fonts/Roboto.woff; src: url(../fonts/Roboto.woff2;}

Путь относительный и выглядит имено так  url(../fonts/Roboto.ttf);

@font-face  — это сообщение браузеру, что будут подключаться сторонние шрифты на сайте.

Обычно достаточно такого:

@font-face {
  font-family: 'Web font';
  src: url('../fonts/webfont.woff2') format('woff2'),
       url('../fonts/webfont.ttf')  format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */
       url('../fonts/webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Теперь, чтобы применить стиль шрифта ко всему тексту (параграфы, заголовки, ссылки, списки и т.д) мы сделаем одну маленькую хитрость. Ведь вы все знаете, что в CSS используется правило наследование, т.е родительский тег распространяет свое влияние на все дочерние элементы. Этим мы и воспользуемся и я объясню почему.

Во-первых, мы пропишем в css правило только один раз и оно будет распространяться автоматически на все другие элементы и классы от родителя к «дочкам».

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

Теперь как нам это сделать? Все просто. Мы знаем, что самый главный тег в веб структуре это  <html>  и <body> .

Вот к ним то мы и применим наше правило следующим образом:

html, body {font-family:'Roboto', sans-serif;}

Мы просто задали семейство шрифтов вот такой строчкой  font-family:'Roboto', sans-serif; 

Вот и все. Ваш google шрифт будет загружаться локально с вашего сайта и никакие отключения этого сервиса вам больше не страшны. Дизайн сайта останется прежним.

5. Давно известно, чем меньше внешних загрузок чего либо на сайте, тем быстрее он загружается и ничего не зависнет, даже если нет асинхронной загрузки (шрифты, скрипты, картинки, сервисы и т.д.).

И так рассматриваемая апокалипсическая ситуация прежняя - санкции гугл, других многих американских сервисов и почти изолированный Рунет.

Теперь настало время проверить, не загружаются ли у вас от "буржуинов" какие то скрипты. Как правило это js.

Их так же видно в просмотре сайта в режиме кода, смотреть между тегами <head> и </head> тег script и выглядит это обычно так:

<script src="https://kit.fontawesome.com/b36cb93fac.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Как подготовится. Введите адрес скрипта в строку своего браузера, откроется код, скопируйте его в бесплатную программу Notepad++ и сохраните в том же формате, например jquery-2.1.1.min.js.

У вас будет архив загружаемых внешних скриптов. После чего загрузить их в шаблон, обычно это папка js, но можно и создать ее, если нет.

После чего в главном файле вашего шаблона переопределить загрузку кажого скрипта локально, стерев код внешних вызовов.

Пример:

$script = array('jquery.isotope.min.js','jquery.carouFredSel-6.1.0-packed.js','template.js'); 

Это должен делать специалист! Так как в каждом шаблоне это реализуется по разному.

Главное, чтобы у вас был архив этих внешних скриптов.

Что то можно оставить и внешним, но уже с загрузкой с яндекса:

https://yandex.ru/dev/jslibs/ 

https://yandex.ru/dev/jslibs/#jquery

6. Проанализировать другие внешние сервисы. Что возможно, замените на аналогичные российские уже сейчас.

7. Я уже не раз писал, что домены для наших сайтов лучше иметь в зонах ru и рф (последний, лучше вторым с 301 редиректом на ru).

Если это так, то проблем не будет.

8. Почта gmail. Многие пользуются. Заведите альтернативу на яндекс почте или mail.ru. Если вы пользуетесь сервисами яндекс, то она уже у вас есть. Смените на сайте мейлы на нее.

9. На сайте представлены документы с подгрузкой с Google Документы https://www.google.ru/intl/ru/docs/about/. Это может быть критично.

Имейте их архив.

Загружайте документы в pdf формате локально.

Пользуйтесь Яндекс Документы. Это совершенно бесплатно: https://docs.yandex.ru/

10. На сайте представлены видеоролики с youtube, который как известно так же пренадлежит Google.

Имейте архив видеороиков.

Пользуйтесь нашими сервисами, типа https://rutube.ru/info/about_company/

11. Достаточно большая проблема - спам. Большинство используют сервис Google Recaptcha. Надо заранее подумать о локальных капчах и других способах защиты от спама. Это вполне решаемо и без гугл рекапчи.

12. Ну и последнее, серьезная проблема, но уже не относящаяся к сайтам - это смартфоны на андроид. Это конечно серьезно, но думаю то же решаемо, я в этом не специалист.

Я не призываю сразу менять что то, я и сам не изменил вызов шрифтов с гугл фонтс. Но архивы у меня есть, чего и вам советую.

CMS Joomla

CMS Joomla!

CMS Joomla (джумла) – один из мировых лидеров среди систем для создания сайтов и интернет-магазинов. Предельно простая, удобная, многофункциональная, полностью русифицированная административная часть. Простой и интуитивно понятный интерфейс, позволяющий, не имея специальных технических знаний или навыков программирования, работать с системой управления любому пользователю.

Веб-студия WebTend работает исключительно с системой управления контентом CMS Joomla!

Интернет-магазины создаем на CMS Joomla с немецким компонентом электронной коммерции - Joomshopping.

Подробнее о Joomla