Oluşturmayı önleyen javascript dosyalarını sayfanın altına (footera) taşımak sitenizin hızlanmasına ve sayfa hızının artmasına yardımcı olacaktır.
Çok fazla yüklenen eklentiler, WordPress’in kendisinin eklediği js dosyaları zamanla sitenizn yavaşlamasına neden olmaktadır. Google Page Speed Insights içerisinde sitenizi analiz ettiğinizde size Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın gibi bir uyarı verebilir. Burada bahsettiği web sitenizin üst kısmında ( header ) yer alan javascript dosyalarının sayfanın açılış hızını etkilediği, bu dosyaları footer kısmına almanız gerektiğidir.
WordPress’te bunu yapmak mümkün fakat bu işlem sonucunda bazı javascript dosyalarına ait fonksiyonlar çalışmayabilir. Bu yüzden bu işlemi yaptıktan sonra genel bir fonksiyon kontrolü yapın.
Oluşturmayı önleyen javascript dosyalarını sayfanın altına taşımak
Öncelikle kullandığınız temaya ait functions.php dosyasına aşağıdaki kodu ekleyin.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
/**
* Filter HTML code and leave allowed/disallowed tags only
*
* @param string $text Input HTML code.
* @param string $tags Filtered tags.
* @param bool $invert Define whether should leave or remove tags.
* @return string Filtered tags
*/
function
theme_strip_tags_content
(
$
text
,
$
tags
=
''
,
$
invert
=
false
)
{
preg_match_all
(
'/<(.+?)[\s]*\/?[\s]*>/si'
,
trim
(
$
tags
)
,
$
tags
)
;
$
tags
=
array_unique
(
$
tags
[
1
]
)
;
if
(
is_array
(
$
tags
)
AND
count
(
$
tags
)
>
0
)
{
if
(
false
==
$
invert
)
{
return
preg_replace
(
'@<(?!(?:'
.
implode
(
'|'
,
$
tags
)
.
')\b)(\w+)\b.*?>.*?</\1>@si'
,
''
,
$
text
)
;
}
else
{
return
preg_replace
(
'@<('
.
implode
(
'|'
,
$
tags
)
.
')\b.*?>.*?</\1>@si'
,
''
,
$
text
)
;
}
}
elseif
(
false
==
$
invert
)
{
return
preg_replace
(
'@<(\w+)\b.*?>.*?</\1>@si'
,
''
,
$
text
)
;
}
return
$
text
;
}
/**
* Generate script tags from given source code
*
* @param string $source HTML code.
* @return string Filtered HTML code with script tags only
*/
function
theme_insert_js
(
$
source
)
{
$
out
=
''
;
$
fragment
=
new
DOMDocument
(
)
;
$
fragment
->
loadHTML
(
$
source
)
;
$
xp
=
new
DOMXPath
(
$
fragment
)
;
$
result
=
$
xp
->
query
(
'//script'
)
;
$
scripts
=
array
(
)
;
$
scripts_src
=
array
(
)
;
foreach
(
$
result
as
$
key
=
>
$
el
)
{
$
src
=
$
result
->
item
(
$
key
)
->
attributes
->
getNamedItem
(
'src'
)
->
value
;
if
(
!
empty
(
$
src
)
)
{
$
scripts_src
[
]
=
$
src
;
}
else
{
$
type
=
$
result
->
item
(
$
key
)
->
attributes
->
getNamedItem
(
'type'
)
->
value
;
if
(
empty
(
$
type
)
)
{
$
type
=
'text/javascript'
;
}
$
scripts
[
$
type
]
[
]
=
$
el
->
nodeValue
;
}
}
//used by inline code and rich snippets type like application/ld+json
foreach
(
$
scripts
as
$
key
=
>
$
value
)
{
$
out
.
=
'
<script
type
=
"'.$key.'"
>
';
foreach ( $value as $keyC => $valueC ) {
$out .= "\n".$valueC;
}
$out .= '
</script>
'
;
}
//external script
foreach
(
$
scripts_src
as
$
value
)
{
$
out
.
=
'
<script
src
=
"'.$value.'"
>
</script>
'
;
}
return
$
out
;
}
|
Header.php dosyanızı açın ve içerisinde yer alan wp_head(); kodu ile aşağıdaki kodları değiştirin ve kaydedin.
|
1
2
3
4
5
6
7
8
9
10
|
<?php
ob_start
(
)
;
wp_head
(
)
;
$themeHead
=
ob_get_contents
(
)
;
ob_end_clean
(
)
;
define
(
'HEAD_CONTENT'
,
$themeHead
)
;
$allowedTags
=
'<style><link><meta><title>'
;
print
theme_strip_tags_content
(
HEAD_CONTENT
,
$allowedTags
)
;
?>
|
Son olarakta footer.php dosyanızı açın ve /body etiketinden önce aşağıdaki kodu ekleyip kaydedin.
|
1
|
<?php
theme_insert_js
(
HEAD_CONTENT
)
;
?>
|
Bu işlemlerden sonra header kısmında yer alan javascript dosyaları sayfanın altında (footer) yer alacaktır.
Yorum yapmak ister misin?