Уроки
-
Введение
-
SEO
- Кликабельность снипета в поисковых системах
-
Индексация
-
Заголовки H1-H6
Атрибут «alt» у картинок
Атрибут Title у ссылок
Содержание robots.txt
Дублирующийся «title»
Дублирующийся «description»
Человеко понятное название картинки
Правила форматирования текста на странице
Требования и рекомендации формата микроразметки
Валидация микроразметки Яндекс и Google
Человеко понятный формат ссылок
Ошибки в Robots.txt
Содержание карты сайта
Файл карты сайта
Требования к форматированию ссылок
Тег Hreflang
Тег «canonical»
Орфография интерактивных элементов интерфейса
-
Скорость
-
Сократите количество сетевых запросов
-
Переизбыток маленьких картинок
Группировка CSS файлов
Группировка JavaScript файлов
Переизбыток файлов шрифтов
Перенаправления при загрузке файлов
Наличие сквозных CSS, JS файлов
Загрузка дубликатов файлов
Использование JavaScript фасадов
Перенаправление JavaScript кодом
Редирект с/на www версию
Использование технологии спрайтов
Корректное подключение видеоплеера
- Общая оценка
- Настройте сервер
- Ускорьте показ первого содержимого
-
Сократите размер графических файлов
-
Минификация встроенного JavaScript кода страницы
Минификация встроенного CSS кода страницы
Минификация картинок без потери качества
Суммарный размер всех картинок на странице
Оптимизация шрифтов
Переизбыток монохромных иконок
Наличие монохромного шрифта
Оптимизация data:URL картинок
Формат анимированных изображений MP4, WEBM, SVG вместо GIF и WEBP
Обрезка однотонных полей у изображений
Использование WebP формата в изображениях
Слишком качественные картинки без использования сжатия
Подходящий битрейт видео
Избыточно крупные картинки
- Быстродействие сервера
- Исправьте блокировки
-
Сократите объём кода
-
Минификация CSS для сокращения его объёма
Допустимый размер HTML кода страницы
Минификация JavaScript файлов для сокращения его объёма
Неиспользуемый CSS код
Неиспользуемый JavaScript код
-
Сократите количество сетевых запросов
- Мобильная адаптация
-
Программные ошибки
- Код
- Работа почты
- Доступность
- Настройки сервера
-
Удобство
- Читаемость текста
- Интерфейс
- Визуальные дефекты
- Взаимодействие с другими программами
- Фавикон изображения
-
Уязвимости
- Код
-
Настройки сервера
-
Загрузка всех файлов страницы по HTTPS
Заголовок Strict-https для повышения безопасности
Закрытый доступ к служебным файлам
Шифрованное IPv6 соединение
Включённый показ ошибок на севере
Корректность SSL сертификата
Доступность HTTPS
Перенаправления на защищённое
Уязвимости безопасного SSL соединения
HTTP заголовки для повышения безопасности
- Сторонние сервисы
Допустимый размер HTML кода страницы
Открывая любую ссылку в браузере, первое, что получает пользователь — это HTML код страницы. Её большой объём редко когда оправдан. Большие страницы не только долго загружаются, но ещё и требуют много вычислительных ресурсов для отображения. Это замедляет общую загрузку страницы.
Используйте отложенную загрузку. Например, в карточке товара в интернет-магазине рекомендации товаров можно подгружать после загрузки всей страницы. Пользователь увидит их самое раннее через 10 секунд, когда прокрутит страницу. Поэтому нет смысла загружать эти блоки сразу.
Также можно использовать минификатор HTML кода. Он удалит лишние символы вроде лишних пробелов, символов переноса строк, комментарии и т.д. Но их работа может занять продолжительное время, поэтому применяйте их только, если код, который вы оптимизируйте, кешируется.
Старайтесь, чтобы объём HTML кода страницы не превышал 120КБ.
Сравнение времени обработки браузером большой и маленькой HTML страницы:
Демонстрация
PHP код
HTML код
<?php
$mode = $_GET['mode'] ?? '';
?><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.btn {
color: #000;
display: inline-block;
margin-bottom: 5px;
text-decoration: none;
padding: 5px 10px;
border: 1px solid #000;
border-radius: 5px;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #000;
color: #fff;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
document.querySelector('#page-load').innerHTML = 'Событие DOMContentLoaded выполнилось в <b>'+(performance.now()/1000)+'с</b>.';
});
</script>
</head>
<body style="font-family: sans-serif;">
Режим: <a class="btn <?=$mode === '' ? 'active' : ''?>" href="./over_size_page.php">Файл 1 000 DOM элементов 25 КБ</a> <a class="btn <?=$mode === 'big' ? 'active' : ''?>" href="./over_size_page.php?mode=big">Файл 20 000 DOM элементов 490 КБ</a>
<br />
<p id="page-load">Тут отобразится время вызова события DOMContentLoaded</p>
<?php for($i = 0;$i < ($mode === 'big' ? 10000 : 500); ++$i) { ?>
<div><span><?=$i?></span></div>
<?php } ?>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.btn {
color: #000;
display: inline-block;
margin-bottom: 5px;
text-decoration: none;
padding: 5px 10px;
border: 1px solid #000;
border-radius: 5px;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #000;
color: #fff;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
document.querySelector('#page-load').innerHTML = 'Событие DOMContentLoaded выполнилось в <b>'+(performance.now()/1000)+'с</b>.';
});
</script>
</head>
<body style="font-family: sans-serif;">
Режим: <a class="btn active" href="./over_size_page.php">Файл 1 000 DOM элементов 25 КБ</a> <a class="btn " href="./over_size_page.php?mode=big">Файл 20 000 DOM элементов 490 КБ</a>
<br />
<p id="page-load">Тут отобразится время вызова события DOMContentLoaded</p>
<div><span>0</span></div>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
<div><span>12</span></div>
<div><span>13</span></div>
<div><span>14</span></div>
<div><span>15</span></div>
<div><span>16</span></div>
<div><span>17</span></div>
<div><span>18</span></div>
<div><span>19</span></div>
<div><span>20</span></div>
<div><span>21</span></div>
<div><span>22</span></div>
<div><span>23</span></div>
<div><span>24</span></div>
<div><span>25</span></div>
<div><span>26</span></div>
<div><span>27</span></div>
<div><span>28</span></div>
<div><span>29</span></div>
<div><span>30</span></div>
<div><span>31</span></div>
<div><span>32</span></div>
<div><span>33</span></div>
<div><span>34</span></div>
<div><span>35</span></div>
<div><span>36</span></div>
<div><span>37</span></div>
<div><span>38</span></div>
<div><span>39</span></div>
<div><span>40</span></div>
<div><span>41</span></div>
<div><span>42</span></div>
<div><span>43</span></div>
<div><span>44</span></div>
<div><span>45</span></div>
<div><span>46</span></div>
<div><span>47</span></div>
<div><span>48</span></div>
<div><span>49</span></div>
<div><span>50</span></div>
<div><span>51</span></div>
<div><span>52</span></div>
<div><span>53</span></div>
<div><span>54</span></div>
<div><span>55</span></div>
<div><span>56</span></div>
<div><span>57</span></div>
<div><span>58</span></div>
<div><span>59</span></div>
<div><span>60</span></div>
<div><span>61</span></div>
<div><span>62</span></div>
<div><span>63</span></div>
<div><span>64</span></div>
<div><span>65</span></div>
<div><span>66</span></div>
<div><span>67</span></div>
<div><span>68</span></div>
<div><span>69</span></div>
<div><span>70</span></div>
<div><span>71</span></div>
<div><span>72</span></div>
<div><span>73</span></div>
<div><span>74</span></div>
<div><span>75</span></div>
<div><span>76</span></div>
<div><span>77</span></div>
<div><span>78</span></div>
<div><span>79</span></div>
<div><span>80</span></div>
<div><span>81</span></div>
<div><span>82</span></div>
<div><span>83</span></div>
<div><span>84</span></div>
<div><span>85</span></div>
<div><span>86</span></div>
<div><span>87</span></div>
<div><span>88</span></div>
<div><span>89</span></div>
<div><span>90</span></div>
<div><span>91</span></div>
<div><span>92</span></div>
<div><span>93</span></div>
<div><span>94</span></div>
<div><span>95</span></div>
<div><span>96</span></div>
<div><span>97</span></div>
<div><span>98</span></div>
<div><span>99</span></div>
<div><span>100</span></div>
<div><span>101</span></div>
<div><span>102</span></div>
<div><span>103</span></div>
<div><span>104</span></div>
<div><span>105</span></div>
<div><span>106</span></div>
<div><span>107</span></div>
<div><span>108</span></div>
<div><span>109</span></div>
<div><span>110</span></div>
<div><span>111</span></div>
<div><span>112</span></div>
<div><span>113</span></div>
<div><span>114</span></div>
<div><span>115</span></div>
<div><span>116</span></div>
<div><span>117</span></div>
<div><span>118</span></div>
<div><span>119</span></div>
<div><span>120</span></div>
<div><span>121</span></div>
<div><span>122</span></div>
<div><span>123</span></div>
<div><span>124</span></div>
<div><span>125</span></div>
<div><span>126</span></div>
<div><span>127</span></div>
<div><span>128</span></div>
<div><span>129</span></div>
<div><span>130</span></div>
<div><span>131</span></div>
<div><span>132</span></div>
<div><span>133</span></div>
<div><span>134</span></div>
<div><span>135</span></div>
<div><span>136</span></div>
<div><span>137</span></div>
<div><span>138</span></div>
<div><span>139</span></div>
<div><span>140</span></div>
<div><span>141</span></div>
<div><span>142</span></div>
<div><span>143</span></div>
<div><span>144</span></div>
<div><span>145</span></div>
<div><span>146</span></div>
<div><span>147</span></div>
<div><span>148</span></div>
<div><span>149</span></div>
<div><span>150</span></div>
<div><span>151</span></div>
<div><span>152</span></div>
<div><span>153</span></div>
<div><span>154</span></div>
<div><span>155</span></div>
<div><span>156</span></div>
<div><span>157</span></div>
<div><span>158</span></div>
<div><span>159</span></div>
<div><span>160</span></div>
<div><span>161</span></div>
<div><span>162</span></div>
<div><span>163</span></div>
<div><span>164</span></div>
<div><span>165</span></div>
<div><span>166</span></div>
<div><span>167</span></div>
<div><span>168</span></div>
<div><span>169</span></div>
<div><span>170</span></div>
<div><span>171</span></div>
<div><span>172</span></div>
<div><span>173</span></div>
<div><span>174</span></div>
<div><span>175</span></div>
<div><span>176</span></div>
<div><span>177</span></div>
<div><span>178</span></div>
<div><span>179</span></div>
<div><span>180</span></div>
<div><span>181</span></div>
<div><span>182</span></div>
<div><span>183</span></div>
<div><span>184</span></div>
<div><span>185</span></div>
<div><span>186</span></div>
<div><span>187</span></div>
<div><span>188</span></div>
<div><span>189</span></div>
<div><span>190</span></div>
<div><span>191</span></div>
<div><span>192</span></div>
<div><span>193</span></div>
<div><span>194</span></div>
<div><span>195</span></div>
<div><span>196</span></div>
<div><span>197</span></div>
<div><span>198</span></div>
<div><span>199</span></div>
<div><span>200</span></div>
<div><span>201</span></div>
<div><span>202</span></div>
<div><span>203</span></div>
<div><span>204</span></div>
<div><span>205</span></div>
<div><span>206</span></div>
<div><span>207</span></div>
<div><span>208</span></div>
<div><span>209</span></div>
<div><span>210</span></div>
<div><span>211</span></div>
<div><span>212</span></div>
<div><span>213</span></div>
<div><span>214</span></div>
<div><span>215</span></div>
<div><span>216</span></div>
<div><span>217</span></div>
<div><span>218</span></div>
<div><span>219</span></div>
<div><span>220</span></div>
<div><span>221</span></div>
<div><span>222</span></div>
<div><span>223</span></div>
<div><span>224</span></div>
<div><span>225</span></div>
<div><span>226</span></div>
<div><span>227</span></div>
<div><span>228</span></div>
<div><span>229</span></div>
<div><span>230</span></div>
<div><span>231</span></div>
<div><span>232</span></div>
<div><span>233</span></div>
<div><span>234</span></div>
<div><span>235</span></div>
<div><span>236</span></div>
<div><span>237</span></div>
<div><span>238</span></div>
<div><span>239</span></div>
<div><span>240</span></div>
<div><span>241</span></div>
<div><span>242</span></div>
<div><span>243</span></div>
<div><span>244</span></div>
<div><span>245</span></div>
<div><span>246</span></div>
<div><span>247</span></div>
<div><span>248</span></div>
<div><span>249</span></div>
<div><span>250</span></div>
<div><span>251</span></div>
<div><span>252</span></div>
<div><span>253</span></div>
<div><span>254</span></div>
<div><span>255</span></div>
<div><span>256</span></div>
<div><span>257</span></div>
<div><span>258</span></div>
<div><span>259</span></div>
<div><span>260</span></div>
<div><span>261</span></div>
<div><span>262</span></div>
<div><span>263</span></div>
<div><span>264</span></div>
<div><span>265</span></div>
<div><span>266</span></div>
<div><span>267</span></div>
<div><span>268</span></div>
<div><span>269</span></div>
<div><span>270</span></div>
<div><span>271</span></div>
<div><span>272</span></div>
<div><span>273</span></div>
<div><span>274</span></div>
<div><span>275</span></div>
<div><span>276</span></div>
<div><span>277</span></div>
<div><span>278</span></div>
<div><span>279</span></div>
<div><span>280</span></div>
<div><span>281</span></div>
<div><span>282</span></div>
<div><span>283</span></div>
<div><span>284</span></div>
<div><span>285</span></div>
<div><span>286</span></div>
<div><span>287</span></div>
<div><span>288</span></div>
<div><span>289</span></div>
<div><span>290</span></div>
<div><span>291</span></div>
<div><span>292</span></div>
<div><span>293</span></div>
<div><span>294</span></div>
<div><span>295</span></div>
<div><span>296</span></div>
<div><span>297</span></div>
<div><span>298</span></div>
<div><span>299</span></div>
<div><span>300</span></div>
<div><span>301</span></div>
<div><span>302</span></div>
<div><span>303</span></div>
<div><span>304</span></div>
<div><span>305</span></div>
<div><span>306</span></div>
<div><span>307</span></div>
<div><span>308</span></div>
<div><span>309</span></div>
<div><span>310</span></div>
<div><span>311</span></div>
<div><span>312</span></div>
<div><span>313</span></div>
<div><span>314</span></div>
<div><span>315</span></div>
<div><span>316</span></div>
<div><span>317</span></div>
<div><span>318</span></div>
<div><span>319</span></div>
<div><span>320</span></div>
<div><span>321</span></div>
<div><span>322</span></div>
<div><span>323</span></div>
<div><span>324</span></div>
<div><span>325</span></div>
<div><span>326</span></div>
<div><span>327</span></div>
<div><span>328</span></div>
<div><span>329</span></div>
<div><span>330</span></div>
<div><span>331</span></div>
<div><span>332</span></div>
<div><span>333</span></div>
<div><span>334</span></div>
<div><span>335</span></div>
<div><span>336</span></div>
<div><span>337</span></div>
<div><span>338</span></div>
<div><span>339</span></div>
<div><span>340</span></div>
<div><span>341</span></div>
<div><span>342</span></div>
<div><span>343</span></div>
<div><span>344</span></div>
<div><span>345</span></div>
<div><span>346</span></div>
<div><span>347</span></div>
<div><span>348</span></div>
<div><span>349</span></div>
<div><span>350</span></div>
<div><span>351</span></div>
<div><span>352</span></div>
<div><span>353</span></div>
<div><span>354</span></div>
<div><span>355</span></div>
<div><span>356</span></div>
<div><span>357</span></div>
<div><span>358</span></div>
<div><span>359</span></div>
<div><span>360</span></div>
<div><span>361</span></div>
<div><span>362</span></div>
<div><span>363</span></div>
<div><span>364</span></div>
<div><span>365</span></div>
<div><span>366</span></div>
<div><span>367</span></div>
<div><span>368</span></div>
<div><span>369</span></div>
<div><span>370</span></div>
<div><span>371</span></div>
<div><span>372</span></div>
<div><span>373</span></div>
<div><span>374</span></div>
<div><span>375</span></div>
<div><span>376</span></div>
<div><span>377</span></div>
<div><span>378</span></div>
<div><span>379</span></div>
<div><span>380</span></div>
<div><span>381</span></div>
<div><span>382</span></div>
<div><span>383</span></div>
<div><span>384</span></div>
<div><span>385</span></div>
<div><span>386</span></div>
<div><span>387</span></div>
<div><span>388</span></div>
<div><span>389</span></div>
<div><span>390</span></div>
<div><span>391</span></div>
<div><span>392</span></div>
<div><span>393</span></div>
<div><span>394</span></div>
<div><span>395</span></div>
<div><span>396</span></div>
<div><span>397</span></div>
<div><span>398</span></div>
<div><span>399</span></div>
<div><span>400</span></div>
<div><span>401</span></div>
<div><span>402</span></div>
<div><span>403</span></div>
<div><span>404</span></div>
<div><span>405</span></div>
<div><span>406</span></div>
<div><span>407</span></div>
<div><span>408</span></div>
<div><span>409</span></div>
<div><span>410</span></div>
<div><span>411</span></div>
<div><span>412</span></div>
<div><span>413</span></div>
<div><span>414</span></div>
<div><span>415</span></div>
<div><span>416</span></div>
<div><span>417</span></div>
<div><span>418</span></div>
<div><span>419</span></div>
<div><span>420</span></div>
<div><span>421</span></div>
<div><span>422</span></div>
<div><span>423</span></div>
<div><span>424</span></div>
<div><span>425</span></div>
<div><span>426</span></div>
<div><span>427</span></div>
<div><span>428</span></div>
<div><span>429</span></div>
<div><span>430</span></div>
<div><span>431</span></div>
<div><span>432</span></div>
<div><span>433</span></div>
<div><span>434</span></div>
<div><span>435</span></div>
<div><span>436</span></div>
<div><span>437</span></div>
<div><span>438</span></div>
<div><span>439</span></div>
<div><span>440</span></div>
<div><span>441</span></div>
<div><span>442</span></div>
<div><span>443</span></div>
<div><span>444</span></div>
<div><span>445</span></div>
<div><span>446</span></div>
<div><span>447</span></div>
<div><span>448</span></div>
<div><span>449</span></div>
<div><span>450</span></div>
<div><span>451</span></div>
<div><span>452</span></div>
<div><span>453</span></div>
<div><span>454</span></div>
<div><span>455</span></div>
<div><span>456</span></div>
<div><span>457</span></div>
<div><span>458</span></div>
<div><span>459</span></div>
<div><span>460</span></div>
<div><span>461</span></div>
<div><span>462</span></div>
<div><span>463</span></div>
<div><span>464</span></div>
<div><span>465</span></div>
<div><span>466</span></div>
<div><span>467</span></div>
<div><span>468</span></div>
<div><span>469</span></div>
<div><span>470</span></div>
<div><span>471</span></div>
<div><span>472</span></div>
<div><span>473</span></div>
<div><span>474</span></div>
<div><span>475</span></div>
<div><span>476</span></div>
<div><span>477</span></div>
<div><span>478</span></div>
<div><span>479</span></div>
<div><span>480</span></div>
<div><span>481</span></div>
<div><span>482</span></div>
<div><span>483</span></div>
<div><span>484</span></div>
<div><span>485</span></div>
<div><span>486</span></div>
<div><span>487</span></div>
<div><span>488</span></div>
<div><span>489</span></div>
<div><span>490</span></div>
<div><span>491</span></div>
<div><span>492</span></div>
<div><span>493</span></div>
<div><span>494</span></div>
<div><span>495</span></div>
<div><span>496</span></div>
<div><span>497</span></div>
<div><span>498</span></div>
<div><span>499</span></div>
</body>
</html>