Быстрый сайт — способы создания быстрого сайта.

Быстрый сайт — привожу ряд опробованных способов, позволяющих быстро создать быстрый сайт.

Пламенный привет посетителям этой страницы, пришедшим из социальных сетей, да и всем остальным тоже!

В апреле 2021-го года наблюдал удивительное явление: обильный поток посетителей из 4-х социальных сетей. В связи с этим настоятельно рекомендую всем неоднократно и регулярно посещать сайт rtbsm.ru — там в общих чертах изложена Российская Теннисная Балльная Система Марии (Шараповой).

Приглашаю всех полюбоваться на Фото и Видео красавицы Марии — надеюсь, что Вы поделитесь адресом сайта rtbsm.ru с друзьями и знакомыми.

Главная проблема — известить Марию, чтобы она лично как можно скорее заявила на весь мир о РТБСМ.

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

Зачем нужен быстрый сайт? Чтобы повысить вероятность того, что его полюбят поисковые системы, что повысит вероятность того, что его полюбят посетители, приходящие, в основном, из поисковых систем, что повысит вероятность того, что его полюбят  поисковые системы, и так далее до бесконечности…

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

Для затравки публикую таблицу, в которой лучшие значения показателей выделены жирным шрифтом:

№ пп	Сервис / пункт	google.com	yandex.ru	ep-z.ru Н, М, Т
1	PageSpeed
1.1	Скорость для мобильных	91	75	88, 90, ТТ
1.2	Выполнено правил:	8/10	8/10	5, 7, Т
1.3	Удобство для пользователей  мобильных	100	99	74, 74, ТТ
1.4	Выполнено правил:	5/5	4/5	3, 3, Т
1.5	Для компьютеров	97	96	94, 96,ТТ
1.6	Выполнено правил:	8/10	7/10	4, 6, Т
2	PingDom
2.1	Perf. grade	82/100	84/100	73, 91, ТТ
2.2	Requests (запросы)	15	43	31, 5, ТТ
2.3	Load time	1.09s	675ms	620, 245, ТТТ ms
2.4	Page size	143.3kB	290.1kB	209.5, 24.9, ТТТ kB
2.5	Faster than	87%	94%	95, 99, TT%
2.6	Size (текста)	0 (НОЛЬ) байт!	43.7kB	8.3, 6.8, Т.Т kB
2.7	Size (прочего)	143.3kB	246.4kB	201.2, 16.1, ТТ.Т kB
3	Валидатор
3.1	Ошибок	23	167	0, 0, 0
3.2	Предупреждений	4	7	1, 1, T
3.3	Строк	15	7	299, 225, ТТТ
3.4	Уплотнение кода	Да	Да	Нет
3.5	Читабельность HTML-кода	Плохая	Плохая	Хорошая
3.6	Динамическая страница сгенерирована за	?	?	0,131с. 0,115с., ТТТс.
4	Битые ссылки	не проверял	не проверял	нет, нет, мало

Обратите внимание на пункт 2.6 у Google: «а король-то голый», но исключительно хитрый — страница целиком формируется из заготовок!

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

Н — начальные, зафиксированные 23.03.14;

М — минимальные, достигнутые при отключении всего дополнительного обвеса: счётчиков, баннеров, … — зафиксированы 25.03.14;

Т — текущие, которые будут вписаны после установки всего необходимого  дополнительного обвеса сайта.

Обратите внимание на жирную 5-ку в пункте 2.2: там должна стоять 3-ка, но 1) непонятно откуда вылез внешний запрос adsbygoogle.js длиной 8.1 kB (прочие запросы являются внутренними); и 2) запрос значка wordpress.png длиной 1.1 kB, который имеет смысл удалить или заменить на более короткий — вскоре сделаю замену. Заменил на фавикон сайта с жёлтым фоном, теперь всего лишь 499-ть байт.

Возиться с удалением внешнего запроса adsbygoogle.js нет смысла: всё равно вскоре собирался восстановить верхний баннер Google. Вот когда придёт время расстаться с Google, тогда и займусь, а пока что финансово неоправданный рекламный эксперимент продолжается.

С 05.04.2014 показ рекламы Google прекратился из-за того, что до меня не дошло письмо с INN. Теперь наладил ротацию своих баннеров, от которых сайту больше пользы.

Таким образом, на самом деле сайту реально требуется лишь 3 внутренних запроса: http://ep-z.ru/ длиной 6.8 kB, style.css — 4.8 kB и cherryblossoms.jpg — 4.1 kB, их суммарная длина 15.7 kB.

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

Длина второго файла на сервере хостинга составляет примерно 19-ть kB, но как он обработан и чем сжат — мне неизвестно, его наличие на 2-м месте подчёркивает ещё раз важность этого файла. Уплотнил рабочий экземпляр файла стилей style.css — теперь 4.5 kB

Длина третьего файла столь мала из-за того, что изображение содержит только цветной фон. При появлении надписи длина файла возрастает до десятков kB, а при появлении многоцветного изображения может вырасти за сотню kB. Шаблон случайным образом выбирает одно из восьми изображений, некоторые из которых ещё не заменил. Собираюсь 5-ть изображений заполнить надписями, а три — фотографиями, сделанными собственным фотоаппаратом, и только после этого провести сжатие файлов изображений без потери качества.

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

Прекрасно осознаю, что вскоре мне предстоит восстановить FeedBurner, установить новый набор кнопок социальных сетей и снова, возможно, поставить рекламные баннеры Google и/или Яндекса — это неизбежно ухудшит показатели сайта. Стараться к тому времени создавать некие запасы, чтобы значения показателей не выскочили за приемлемые границы, бесполезно. FeedBurner, кнопки и рекламные баннеры их мгновенно скушают и не поперхнутся. Вот какие они наглые прожоры!

Пункты 1.1 — 1.4 считаю слегка лукавыми: зачем втискивать страницу сайта в неразвёрнутый экран смартфона?! Не проще ли его развернуть? Поэтому я склонен обращать мало внимания на первые четыре показателя, хотя и постараюсь их улучшить, если хватит упорства.

Лично я считаю глупостью просматривать сайты на смартфоне: для этого существуют планшетофоны и планшеты — 6-тидюймового экрана планшетофона достаточно для комфортного просмотра сайтов, а всматривание в мелкие изображения на маленьком экране смартфона даёт лишнюю нагрузку на глаза. Оно нам надо?

Огромным преимуществом мобильных гаджетов является быстрое масштабирование изображений разведением и сведением двух пальцев на экране. По примеру мобильных гаджетов некоторые модели современных ноутбуков уже обзавелись touch-screen экранами. Так что, если Вам нравится елозить пальцами по экрану, покупайте современный ноутбук — я же пока воздержусь, ибо не хочу переходить с Windows 7 на Windows 8 и боюсь проткнуть пальцем экран ноутбука.

Многие показатели Google и Яндекса можно принять за эталонные — они позволяют выявить значения, которые, в принципе, являются достижимыми. Анализируя правила, можно понять, что нужно сделать, чтобы поднять показатели в PageSpeed, и принять соответствующие меры.

Многие строки таблицы требуют отдельного анализа — предлагаю делать его самостоятельно: пользы для Вас больше будет.

Можете скопировать таблицу к себе на сайт и использовать её при ускорении своего сайта. Можете даже свести значения показателей 2-й и 3-й колонок во 2-ю колонку, а третью колонку использовать для своего сайта.

А теперь публикую ряд способов, обещанных в первом абзаце страницы:

1. Начиная борьбу за скоростные показатели сайта, нужно прежде всего выявить и зафиксировать показатели своего сайта в четырёх упомянутых сервисах, чтобы  сравнивать показатели трёх или более сайтов. За нулевую точку отсчёта лучше взять показатели до начала внедрения способов ускорения сайта: перемены будут более разительными, а результаты — просто поразительными.

2. Можете провести и сравнение с сайтами Ваших прямых конкурентов, чтобы постараться превзойти их сначала в значениях показателей четырёх сервисов, а затем и во всём остальном.

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

4. Просматривая 15-ть правил PageSpeed и выполняя приведенные в них рекомендации, можно весьма существенно улучшить показатели сайта.

5. PingDom даёт более чёткие и конкретные показатели, чем PageSpeed. Мне сначала хватало информации, представленной на странице Full Page Test. С 24.03.14 начал заглядывать и в другие три вкладки — оказывается, что там много полезной информации: в правой вкладке есть даже графики изменения значений.

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

Получается, что они действуют по принципу «А что ему сделается? Он же железный!» Из чуть выше упомянутой троицы (браузер — компьютер — пользователь) железный только компьютер, да и то по стоимости в незначительной мере. Браузер же тратит лишнее время на разбор некачественного кода.

Конечно, это можно заметить только на медленных компьютерах и планшетах при медленном 3G, но думаю, что браузеры матерились бы от таких кодов во весь голос, если бы создатели браузеров догадались научить их материться или более прилично выражать своё возмущение скрипом, скрежетом, кряхтением, …

Вот идея для создателей браузера Яндекса! Пусть только владельцы Яндекса не забудут сделать достойный Яндекса взнос в Фонд развития экопарка. Реализация голосового возмущения наличием ошибок валидности наверняка поднимет популярности браузеру Яндекса и позволит ему опередить IE по популярности в Рунете. Он и так весьма хорош, но пребывание за спиной IE его явно не красит!

7. Пример Яндекса наглядно показывает, что надо бороться буквально за каждый лишний символ кода. Просмотрите в Валидаторе обнаруженные ошибки и HTML-код главной страницы Яндекса, чтобы убедиться в этом. Он, пожалуй, переусердствовал в этой борьбе, но это его проблемы.

8. Очень ощутимый эффект даёт использование плагина кэширования WP Super Caсhe. Настоятельно рекомендую обязательно его использовать. Подробности смотрите по ссылке.

9. Главный принцип — выявляйте всё лишнее, что мешает ускорению, прежде всего, главной страницы сайта. Многое сработает и на всех страницах сайта. После главной страницы у меня наступит очередь 25-ти самых посещаемых за последние 30-ть дней страниц сайта, которые легко выявить с помощью счётчика HotLog или какого-либо другого.

10. Убрал временно со страниц сайта прочие счётчики, оставив только один HotLog, которым активно пользуюсь. 24.04.2014 восстановил счётчики Яндекс.Метрики и Рамблера, хотя пользуюсь ими редко. Никак не могу заставить себя отказаться от привычного HotLog’а и перейти на Яндекс.Метрику! 25.04.2014 снова убрал счётчик Рамблера, чтобы он не снижал на 4-ре единицы значение показателя PageSpeed. Убеждён, что на сайте должен быть только один счётчик, но сам раздваиваюсь между двумя счётчиками!

Начал определять Трастовость страниц сайта, пришлось снова подключить счётчик Liveinternet, показания которого вроде бы учитываются при вычислении трастовости. Понаблюдаю до 08.08.2014, повлияют ли показания Liveinternet на значения трастовости.

11. Чтобы сократить длину HTML-кода, в коде главной страницы сайта заменил <strong> на <b> и </strong> на </b> — визуально ничего не изменилось, а каждая пара даёт экономию в 10-ть символов.

Этот процесс занимает примерно одну минуту на страницу, так как поддаётся автоматизации в простейшем редакторе Notepad с помощью стандартных команд Windows. Теперь в HTML-коде каждой страницы, которая имеет длину более 400-т слов, провожу  замену <strong> на <b> и </strong> на </b> .

Скажете, что это мелочи? Тогда загляните в рекомендации к правилам PageSpeed: там есть и сотни выявленных лишних байтов, и цифры (а не числа!) процентов достигаемой при этом экономии. Из таких мелочей и создаётся быстрый сайт, ибо не всегда удаётся «одним махом семерых убивахом». Хотя есть несколько подобных способов, некоторые из них у меня уже реализованы — надо бы все их вспомнить и опубликовать.

12. Особенно хорош один: он даёт скачок в PageSpeed с 48-ми на 74-ре после вставки одной строки! Вот этот способ: в файле header.php под <head> для лучшего отображения сайта на экранах смартфонов и планшетов вставьте строку

<meta name=viewport content=»width=device-width, initial-scale=1″>

13. Заодно в этом же файле найдите строку

<meta charset=»<?php bloginfo( ‘charset’ ); ?>» />

и, чтобы явно задать набор символов, замените её на такую:

<meta charset=UTF-8 >

14. Чтобы иметь быстрый сайт, файл стилей style.css нужно, по моему мнению, иметь в трёх вариантах: исходном, откомментированном и рабочем, из которого удалены почти все лишние символы пробелов и который почти максимально уплотнён (разделители строк убирать не стал, чтобы сохранить для себя читабельность файла).

Судя по длине этого файла в PingDom, его уплотнение происходит и автоматически, но рабочий вариант должен скушать лишние миллисекунды в показателе 3.6, что может оказаться важно для некоторых страниц, чтобы попасть в заветные 0,200 сек. при кэшировании страницы.

Уверен, что файл стилей style.css любого шаблона содержит много лишних фонтов, да и многое другое из него можно было бы убрать. У меня нет времени на оптимизацию этого файла, ибо это достаточно сложная и кропотливая работа — оставляю такую возможность пока что в резерве.

15. Заметка мне на память: 1+5=6 возможностей слегка ускорить сайт. Надо укоротить ещё 5-ть тегов <meta …>, которые затаились в php-файлах. Пока что нет на это времени, да и особой необходимости …!

16. Чтобы получить быстрый сайт, нужно обязательно найти короткие коды кнопок социальных сетей, чтобы вставить их на все страницы сайта после текста страницы. Уверен, что плагин для кнопок не следует использовать. Подробности смотрите по ссылке в начале п. 10.

Нашёл короткий скрипт со спрайтом 12-ти выбранных мной кнопок — это кнопки Share42.

Что сказать тем, кто использует кнопки PLUSO? Вот подходящая фраза: «Мдаа, из Вас выйдет толк, а бестолочь останется, если и дальше будете использовать кнопки PLUSO«! Не буду излагать подробностей о проекте PLUSO, замечу лишь, что в него вложены сотни тысяч долларов ради того, чтобы собирать информацию о пользователях Интернета на радость владельцам коммерческих сайтов. Причём кнопки PLUSO внаглую сильно нагружают сайт и существенно ухудшают его скоростные показатели.

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

18. Счётчик статистики, рекламные баннеры, подписки, … весьма желательно  располагать ниже первого экрана: пусть подгружаются тогда, пока посетитель занят первым экраном.

19. Старайтесь не перегружать страницы сайта изображениями, обязательно масштабируйте и уплотняйте файлы изображений. Давно знал, что WordPress нерационально использует HDD (SSD) сервера хостинга. Вот подтверждение: при добавлении изображений появляются два подкаталога с привязкой к дате, в которых каждому изображению соответствует несколько файлов. Подробности смотрите по ссылке.

20. Постарайтесь минимизировать использование плагинов. Без сомнения, многие проблемы проще всего решить с помощью плагинов. Но при вдумчивом подходе зачастую можно обойтись без плагина. Самый наглядный пример — кнопки социальных сетей.

Не рекомендуется иметь более 10-ти активных плагинов. Мне 03.05.2014 года удаётся обходиться 5-ю активными и 4-мя неактивными плагинами. Опробовал несколько десятков плагинов, но все лишние удалил.

21. Несколько полезных способов ускорения сайта описаны на страницах Оптимизация, Оптимизация Базы Данных и Сокращаем длину кода. Переносить их на эту страницу нет смысла: она и так получилась весьма длинной. Более того, некоторые новые способы буду излагать на трёх вышеупомянутых страницах, если они более соответствуют им по тематике .

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

23. Обязательно отключите аватарки в настройках WordPress!

Вот уж воистину «Век живи, век учись, дураком помрёшь!» Лишь 25-го апреля 2016-го года, на 1260-тые сутки существования сайта, я окончательно осознал вред аватарок и додумался отключить аватарки в Комментариях! Подробности смотрите по ссылке.

24. …!

Прочие опробованные способы ускорения сайта пока что разбросаны по страницам раздела Сайт и в кодах множества файлов — буду постепенно формировать  описания способов ускорения на этой странице и на трёх страницах, упомянутых в пункте 21.

Длинные и сложные способы ускорения сайта принципиально не использую, а потому и не упоминаю. Их в Рунете можно найти не один десяток, но пока что без сложных способов вполне удаётся обходиться.

Более-менее досконально использование PageSpeed, PingDom, Site-Auditor’а, Валидатора,  Ликвидатора битых ссылок и Определителя позиций сайта описано на отдельных страницах, которые доступны по ссылкам (обязательно читайте и страницу Тестирование — вскоре она станет родительской для 7-ми страниц).

Рекомендую заглянуть в разделе Сайт на страницу Меню сайта, чтобы получить представление о всех страницах сайта, на которых можно найти полезную информацию о способах развития сайта.

Главный вывод из изложенного: внося существенные изменения в тексты страниц сайта, нужно чётко осознавать, к каким изменениям значений показателей сайта они приводят и являются ли эти изменения терпимыми!

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

Считаю, что достаточно добиться в сервисе PingDom (Амстердам) времени загрузки главной страницы сайта и наиболее посещаемых страниц сайта менее одной секунды, а нереализованные пункты можно оставить на потом и заняться ими тогда, когда время загрузки превысит одну секунду.

Эта страница создана 23.03.2014 в 02:16, а к концу суток она уже была проиндексирована Google! Через 10-ть суток по запросу «как сделать быстрый сайт» в Яндексе она уже стояла на 4-й позиции! В Google было 13-е место, а в Bing — 3-е место.

Похоже, что Яндекс поставил её на первую страницу поисковой выдачи сразу после индексации, дата которой мне осталась неизвестной. Причём Яндекс умудрился сформировать очень интересный сниппет на основании информации со страницы.

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

К 24.04.2014 Яндекс исправился: переставил на 1-е место — вот какой он стал умный, среагировав на слово «лопухнулся»! Конкретную дату перестановки на 1-е место не  отследил, ибо не считаю это особо важным: только приток посетителей конкретно на эту страницу докажет ценность первого места.

Полюбуйтесь на сформированные Яндексом заголовок и первоначальный сниппет:

Как сделать быстрый сайт? — Эта проблема часто возникает…

Эта страница создана 23.03.2014 в 02:16, а к концу суток она уже была проиндексирована Google! Через 10-ть суток по запросу «как сделать быстрый сайт» в Яндексе она уже стояла на 4-й позиции!

Меня особо умиляет, что роботы Яндекса умудрились докопаться до абзаца, который близок к концу страницы, и выдернуть из трёх фраз абзаца две фразы для формирования сниппета, причём порядок следования фраз был сохранён, а смысл абзаца не искажён!

Впрочем, я считаю этот сниппет неудачным, ибо он вряд ли способствует притоку посетителей на сайт и выглядит похвальбой. С трудом сдерживаюсь, чтобы не выкинуть абзац целиком: это должно вынудить Яндекс поменять сниппет. Потерплю до 23.05.2014.

По состоянию на 07.05.2014 за последние 30-ть дней было 314-ть посещений этой страницы, она по посещаемости находится на 33-м месте среди всех страниц сайта и даёт в среднем каждое 123-е посещение.

26.04.2014 у этой страницы в Яндексе — 1-е место, в Google — 1-е место, а в Bing — 2-е.

Укорачиваем поисковый запрос до сделать быстрый сайт и получаем в Яндексе 1-ю позицию среди 129-ти миллионов ответов, в Google — тоже 1-ю позицию среди  примерно 20 400 000 результатов, а в Bing — 3-ю позицию! Вроде бы великолепно, но почти такой запрос за месяц делают всего лишь 610-ть раз, как уверяет сервис WordStat Яндекса.

Укорачиваем поисковый запрос до двух слов быстрый сайт и получаем 27.04.2014 в Яндексе 13-ю позицию, а в Google — 23-ю позицию. По информации от http://wordstat.yandex.ru этот запрос имел 14 518 показов за месяц, то есть он оказался высокочастотным!

В Рунете принято считать
- низкочастотными (НЧ) те запросы, которые пришли до тысячи раз за месяц;
- среднечастотными (СЧ) те запросы, которые пришли от 1000-чи до 10000-ч раз за месяц;
- высокочастотными (ВЧ) те запросы, которые пришли более 10000-ч раз за месяц.

Изменил первый и второй абзацы страницы, чтобы сменить сниппет в Google и попытаться  поднять позиции по этому короткому запросу в Яндексе и в Google, ибо приближение к ТОП10 и удачный сниппет повышают вероятность перехода на страницу сайта, а высокочастотность запроса даёт надежду и на массовый приток посетителей на эту страницу, и на рост общей посещаемости сайта. Яндекс и Google не особо спешат поменять сниппет.

В сниппете Яндекса тоже должен был бы измениться к 29.04.2014 заголовок поисковой выдачи. Как изящно вынудить Яндекс изменить сниппет, пока не придумал. Вдруг роботы сами додумаются так поменять его, чтобы он больше способствовал притоку посетителей. Додумались 07.05.2014

Понаблюдаю некоторое время за сниппетами и за изменением позиций и посещаемости. Для наглядности оформил таблицу:

Дата	Яндекс	Google	Bing
27.04.2014	13	23	>10
02.05.2014	13	18 — ползёт вверх	>10
03.05.2014	12 — апдейт	17	>10
04.05.2014	11	16, сниппет старый	На 2-ю стр. выдачи Bing не заглядываю «пиринцыпияльно»
06.05.2014	8 — без учёта региона	15, сниппет обновлён	Позиция вне Топ10 в Bing мне абсолютно неинтересна
07.05.2014	5 — сниппет иной, но сильно устаревший  неудачный	15 — два варианта сниппета	…
21.05.2014	1 — сниппет обновлён до желанного варианта	9 — сниппет обновлён до укороченного желанного варианта	…
23.05.2014	1	8	Два месяца со дня создания сайта!
03.06.2014	1 — сниппет снова обновлён роботом Яндекса	1 — сниппет в укороченном желанном варианте	71-н день со дня создания сайта! Пара 1-х позиций получена была в браузере Яндекса.
26.10.2014	1	2	Тупой Бинг      по-прежнему выдаёт плохие результаты

В Яндексе, как мне ни странно, позиция обычно оказывалась выше, если искать без учёта региона. Теперь же выше некуда…

Google, если установить в Инструментах поиска опцию Точное соответствие, раньше выдавал более интересный сниппет — эта опция, как мне показалось, стала недоступной. У меня создалось впечатление, что регулярные дополнения текста страницы вынуждают Google улучшать позицию страницы в поисковой выдаче.

Позиции этой страницы в разных браузерах, при разных настройках поиска и на разных компьютерах немного отличаются, привожу наиболее высокие обнаруженные позиции. Если уж браузеры и компьютеры страдают субъективностью, мне она тоже простительна!

Зачем я растёкся мыслями по концовке этой страницы? Только для того, чтобы ещё раз показать, что даже новая страница по запросу, соответствующему её названию (полному или укороченному), может за 10-ть — 30-ть дней попасть в ТОП10 Яндекса, Google и Bing!

Если Вам нужна помощь в ускорении сайта, смотрите страницу Услуги.

Наткнулся в Интернете на интересный перевод ( habrahabr.ru/post/311704 ), выдержки из которого публикую ниже:

Как спроектировать супер-быстрый сайт из песочницы

Предлагаю Вам перевод статьи How to Design Your Site to Make it Super-fast с сайта Awwwards, в которой говорится, как малыми средствами добиться большого результата в деле увеличения скорости работы вашего сайта.

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

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

Те дизайнеры, которые заботятся о скорости своего сайта, ценятся гораздо выше тех, кому наплевать. Что же такое быстрый сайт для пользователей? Как можно выразить это в численных значениях?

Мы провели несколько исследований и вот что они показали:

1. 47% пользователей не хотят ждать загрузки сайта больше двух секунд;
2. Посетители интернет-магазинов тоже не хотят ждать больше двух секунд, но Google намерен добиться уменьшения этого времени до половины секунды;
3. 57% пользователей уйдут с сайта, если на телефоне он будет загружаться дольше трех секунд.

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

Проектируйте минималистичный дизайн

Всё просто – чем меньше элементов используется на сайте, тем меньше информации придется загружать. Снижение количества используемых элементов может значительно ускорить загрузку сайта. Многое зависит от того, как Вы подходите к дизайну сайтов.

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

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

Вот несколько примеров минималистичного подхода:

1. Гамбургер меню вместо стандартного раскрытого;
2. Больше белого или отрицательного пространства (выворотки);
3. Короткие формы отправки;
4. Легкие изображения;
5. Всего один шрифт вместо кучи разных шрифтов на одном сайте.

Википедия – отличный пример такого минималистичного подхода в дизайне.

Проверим скорость сайта и со страницы wikipedia.org поищем статью по слову «tiger». Проходит меньше секунды, прежде чем мы попадаем на страницу статьи, описывающей тигра.

Если мы посмотрим на расширение для браузера Alexa, то сможем убедиться, что это действительно так!

Важно то, как воспринимается производительность Вашего сайта

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

Несмотря на то, что сейчас важно создавать быстрые сайты, Вы можете просто создать «впечатление» быстро работающего сайта и тогда большинство пользователей будет довольно.

В этом прекрасном Видео ( youtu.be/biXNASoSK9s ) Luke Wroblewski объясняет, что скорость — очень важная часть пользовательского опыта взаимодействия. Вместо реализации сложных технических решений для уменьшения времени отклика сайта, используя хороший дизайн, мы можем заставить пользователей думать, что интерфейс работает быстрее, чем на самом деле.

Воспользуйтесь помощью Google

Google хочет, чтобы ваш сайт работал быстро. Это соответствует глобальной миссии компании – сделать интернет быстрее. Google объявил о ней в прошлом году во время релиза нового алгоритма сжатия Brotli. Так почему бы не использовать потрясающие инструменты, который Google предлагает нам, как веб-дизайнерам?

Лучше всего начать с инструмента Google Developer, который называется Make the Web Faster. Здесь вы найдете широкий ассортимент инструментов и информацию о том, как ускорить работу вашего сайта.

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

Интересно здесь то, что Вы можете получить детальный отчёт и рекомендации как по мобильной, так и по десктопной версии Вашего сайта. Теперь все Ваши отговорки по поводу того, что Вы не знаете, как сделать сайт быстрее, недействительны!

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

Балл для мобильной версии моего сайта, как Вы можете видеть, — 72 из 100. Это хорошо, но могло бы быть и лучше. Ниже под баллами можно увидеть список рекомендаций, выполнение которых приблизит меня к заветным 100 из 100. В категории UX мой сайт получил почти идеальный балл, что говорит о том, что скорость не единственный фактор, определяющий удобство использования.

Если переключиться на вкладку с баллами для десктопной версии, то можно увидеть, что здесь балл значительно выше – 84 из 100. И также приведен список рекомендаций. Чем больше рекомендаций Вы выполните, тем быстрее будет работать Ваш сайт.

Попробуйте «отложенную загрузку»

Слышали когда-нибудь про отложенную загрузку (lazy loading)? Это принцип работы, согласно которому браузер отрисовывает элементы сайта только тогда, когда они необходимы. Например, находящиеся за пределами области просмотра объекты отрисовываются только тогда, когда попадают в область просмотра. Этот принцип «отрисуй только тогда, когда нужно» помогает разгрузить Ваш сайт и позволяет ему работать быстрее.

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

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

Вот список неплохих:

• Lazy Load Plugin for jQuery
• Lazy Load WordPress Plugin
• BJ Lazy Load
• Unveil.js
• bLazy.js
• Angular Lazy IMG
• ocLazyLoad
• React-Lazy-Load
• Jason Slyvia’s React-Lazyload

Страница продажи iPhone 6S – хороший пример длинной страницы. Это делает её прекрасным претендентом на использование отложенной загрузки. Если посмотреть на данную страницу, можно увидеть много качественных изображений, и каждое из них нужно загрузить.

Такая страница только выиграет от использования отложенной загрузки, что подтверждает расширение Alexa – сейчас страница грузится около двух секунд и показывает средний результат.

Оптимизируйте свой сервер

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

Обязательно обратите внимание на следующие моменты, чтобы убедиться, что Ваш сервер отвечает быстро:

• используйте меньше количество ресурсов для каждой страницы (откладывайте загрузку изображений, комбинируйте внешние CSS файлы, комбинируйте внешние JS файлы);
• используйте Сеть доставки контента (CDN);
• включите кэширование;
• обновите конфигурацию Вашего веб-сервера.

Быстрые сайты посещают больше пользователей, покупателей и читателей

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

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

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

!…

Приглашаю всех высказываться в Комментариях. Критику и обмен опытом одобряю и приветствую. В хороших комментариях сохраняю ссылку на сайт автора!

И не забывайте, пожалуйста, нажимать на кнопки социальных сетей, которые расположены под текстом каждой страницы сайта.
Продолжение тут…