archelon

Судя по данным GPS, на что лично я бы обратил внимание в первую очередь:

1) включите кэш браузера.
Это делается в htaccess + на стороне хостинга должно быть включено. Проще всего если ISP панель используется. Ставьте срок 365 дней. Если лень разбираться просто напишите хостеру: прошу поставить кеш браузера для всех статических элементов (картинки, шрифты, стили и т.п.) на 365 дней. Нормальный хостер сделает бесплатно или подскажет где сделать. Если хостер ненормальный, то попробуйте сами всунуть правила в htaccess (они если погуглить - найдутся, просто их много разных вариаций, надо пробовать какие подойдут к конкретному хостингу)

вообще это самый простой пункт обычно.

2) Настройте подходящий размер изображений
Тут тоже все просто - у вас фотка большая, а стоит она в мелком квадрате. Зачем? Поставьте туда мелкие фото. То есть просто сохраните их в редакторе с меньшей шириной и высотой.

3) Удалите неиспользуемый код JavaScript - ничего вы тут толком не сделаете.
скрин i.imgur.com/qEbmxsh.png - все скрипты что можно укажите async - вот как в первом сделано. И проверьте чтобы страница норм отображалась.

4) рекомендую выкинуть шаринг, скрин i.imgur.com/6z5kK1d.png - им обычно уже не пользуются, а он влияет на page speed

Хотя бы так, думаю, баллов 10-15 может дать такая штука.

chat, favourites, profile

user-area
personal

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

Есть вариант задавать шрифты с помощью единиц vw и функции clamp.
https://jsfiddle.net/hqvft54b/

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

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

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

Это не css, это 3D модель, вставленная в браузер с использованием библиотеки three.js


wiki о three.js
статья на хабре про three.js
примеры того что может three.js
а это сама модель из вашего примера

Иконки не являются частью контента. Они несут только визуальную нагрузку. Оформительскую. Для машинного чтения бесполезны, даже вредны.
Представьте, что вы "просматриваете" страницу скринридером. И он начинает вам зачитывать описания иконок. Оно вам надо? Вы пришли за информацией.
Поэтому иконки вообще не следует верстать тегом img. А уж если сверстали, то оставьте alt пустым и добавьте role="presentation"

Вот так короче svg : https://codepen.io/topicstarter/pen/oNwgbLO

В общем схема следующая: имеем квадрат в размерах 100 100 в которой мы по координатам x1 y1 x2 y2 ставим две линии

1 линия будем иметь такие координаты: 0 0 это начало 100 100 это конец линии
2 линия будет иметь такие координаты 0 100 это начало 100 0 это конеч линии



Пример кода ответчика itishnikitsme - смотрите сами сколько лишнего хлама

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
	<g>
		<path d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717
			L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859
			c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287
			l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285
			L284.286,256.002z"/>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

SVG, и нужно разобраться с атрибутами stroke-dasharray и stroke-dashoffset: