код сайта

Код сайта это запись контента на языке программирования

Ккод сайтаод сайта выражается в совокупности: HTML, CSS стилей и скриптов, например, JavaScript. в Интернете такую совокупность  веб-серверы посылают браузерам, по запросам пользователей. Запрос пользователь пишет в строке браузера  о том, что его интересует, в той или иной теме. Блогеры должны строить свои сайты так, чтобы в них были ответы на эти запросы. Потом они становятся ключевыми словами, по которым блогеры пишут статьи.

Код сайта – что в себя включает

В настоящее время  так устроен Интернет. Хотя в недалеком будущем будут свободные темы, как в книгах. В таком направлении Интернет уже делает шаги.

Код страницы включает в себя: html-разметку; таблицу стилей или ссылку на сторонний файл CSS; программы, написанные на JavaScript или ссылки на файлы с кодом; изображения.

Эти разделы обрабатывает браузер. Но для сервера это только текст,  который он отправляет в ответ на запрос.

Зачем это изучать блогеру. Например, иногда придется поправить на сайте коды, вставить социальные кнопки . Сервис Гугл предлагает оптимизировать неиспользуемые CSS, для ускорения загрузки сайта. Приходится самостоятельно вставить коды счетчиков, а так же рекламы. Исправить  ошибки и замечания ПС Яндекса и Гугла. Знать нужно не на уровне программиста, но хотя бы элементарно, когда мы ведем свой сайт. Исходный код мы можем посмотреть несколькими способами.

Код сайта — как посмотреть

Увидеть всю разметку кода  можно, нажав на странице правую кнопку мыши /ПКМ/. Выбирать опцию «Просмотр кода страницы», после чего получим страницу с кодом сайта.

Его можно анализировать, чтобы было удобнее выделим его и скопируем, например, в блокнот -notepad++, где сохраним. Еще его можно открыть, нажав: ctrl+a, ctrl+c, ctrl+v, или ctrl+u.

Но можно получить интерактивный код с помощью инструментов разработчика. Для этого нажмем 3 полоски или 3 точки вверху, справа браузера, это  значок меню. В разделе дополнительных инструментов выбираем «Инструменты разработчика». Откроется окно, в котором отображается активное состояние кода.

Например, вкладка «Source» показывает содержимое некоторых файлов: скрипты, шрифты, изображения. Их можно сохранить. Для этого нажимаем правую кнопку мыши (ПКМ) и выбираем «Save». Сохраним на своем компьютере, который откроется, например, в папке  документы или в загрузках.

Вкладки: Console  и Coverage  

Они станут видны внизу страницы. Во вкладке  Coverage видим много файлов  CSS. Рядом с файлами в виде цветного графика расположены полосы красно-голубого цвета. Голубой цвет показывает, насколько полно скрипт используется на сайте. Нажатие на любую полосу вызовет, чуть выше, показ кода, соответствующего файла.

Все скрипты можно скачать, они с расширением json. Открыла их  в блокноте notepad++. Или можно скачать  другие программы из интернета, для прочтения таких файлов.

В браузере красным цветом обозначается не используемый фрагмент скрипта. Например, совсем у себя отключила  иконки daschboard. Во вкладке «Coverage» теперь они обозначены только красной полосой, то есть не используются совсем, но в коде они остаются сохранными.

Файлы в блокноте

Они скачаны сюда, но отображаются уже без  подсветки голубой и красной,  зато их можно просмотреть. Хотя  сайты веду уже 7 лет, но за это время ни разу эти файлы не просматривала. В результате просмотр произвел на меня большое впечатление, громадными размерами. Файлы CSS расположены на хостинге, в папке WP- includes. Все вместе они представляют собой огромный код, состоящий из 12426 строчек.

Не зря сервис Pagespeed insights  постоянно предлагает удалить неиспользуемые файлы CSS. Но этого пока делать не умею. Однако кое-что сделать для лучшей загрузки сайтов можно. Например, в темах сайта, но в ущерб дизайну. Пожалуй, пойду на такие жертвы в пользу улучшения скорости загрузки сайтов.

Например, в последнем обновлении WordPress  отключил плагин  » jquery-migrate.min.js». Блогер может включить его принудительно, но только временно, Word Press об этом нас предупредил. Со временем этот плагин все равно из приложения исчезнет.

У меня на сайте это можно сделать в плагине «Clearfy pro». Однако после отключения не стал работать красивый слайдер – карусель и еще перестал функционировать поиск сайта. Автор  темы мне эти настройки вернул, после чего карусель и поиск опять работают.

Но сейчас посмотрела в блокноте, как много места занимает плагин  » jquery-migrate.min.js».  К тому же еще дополнительные картинки в карусели, тоже имеют вес не малый. Так что теперь мои сайты будут без плагина и каруселей. Вместо поиска на сайте теперь использую только Яндекс поиск .

Еще вкладки

Во вкладке «Security» -«безопасность» доступна проверка сертификата сайта.

«Audits» поможет провести проверку выложенного на хостинг ресурса. Если расположение панели справа неудобно, можно нажать три точки и поменять его, выбрав желаемый пункт.

Во вкладке «Console» — «приставка» заметим ссылку chrome-extension: //jlipcaflaocihnmlhnhcfombgmmfglho/lib/backbone-min.map на огромный файл. У меня он отмечен, как ошибка 404, но файл открылся, в браузере. Пока не знаю, что с ним делать.

Зайти в код можно еще иначе.  Откроем консоль своего сайта, нажмем на клавиатуре F12 — увидим код. Далее меню – 3 полоски, в выпадающем меню выберем опцию «Moore Tools»- «инструменты меню», найдем «Coverage» — «покрытие», в дополнительном меню. Кстати здесь очень много пунктов, с которыми стоит блогеру познакомиться, постепенно.