Skip to content

Commit dd78cb3

Browse files
JeconiasJeconias
committed
chore(seo): add lazy loading
1 parent 821ccec commit dd78cb3

File tree

2 files changed

+76
-80
lines changed

2 files changed

+76
-80
lines changed

‎index.html

+55-69
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,58 @@
11
<!DOCTYPE html>
22
<html lang="pt-br">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<meta
8-
name="description"
9-
content="Uma ferramenta para contagem regressiva de tempo. Com nosso intuitivo temporizador, você pode personalizar e monitorar o tempo de suas tarefas com facilidade, seja para cronometrar sessões de estudo, gerenciar prazos profissionais ou simplesmente acompanhar suas atividades diárias." />
10-
<meta
11-
name="keywords"
12-
content="Temporizador, Timer, Cronômetro Reverso, Tempo, Contador regressivo, Ferramenta de gestão de tempo, Aplicativo de cronometragem, Temporizador online, Relógio de contagem regressiva, Ferramenta de produtividade, Aplicativo de acompanhamento de tempo, Temporizador de tarefas, Temporizador personalizado, Contador regressivo online" />
13-
<meta name="language" content="pt-br" />
14-
<meta
15-
name="google-site-verification"
16-
content="ULu_CDAMz1EYmwNt8ttlyyEq0FI4j46tykbh1xlcpco" />
17-
<title>Timer</title>
183

19-
<link rel="stylesheet" type="text/css" href="./css/timer.scss" />
20-
</head>
21-
<body>
22-
<main id="main" class="main">
23-
<section id="information-icon">
24-
<ul>
25-
<li>
26-
<nobr
27-
>- Pressione <strong>ESPAÇO</strong> para pausar/continuar.</nobr
28-
>
29-
</li>
30-
<li>
31-
<nobr
32-
>- Pressione entre <strong>0</strong> a <strong>9</strong> para
33-
começar a contagem correspondente.</nobr
34-
>
35-
</li>
36-
</ul>
37-
<img src="./icons/info.svg" alto="Ícone de informação sobre o uso dos timers" width="24px" height="24px"/>
38-
</section>
39-
<section class="player-content">
40-
<ul>
41-
<li>
42-
<nobr
43-
>- Pressione as setas para cima/baixo para controlar o volume</nobr
44-
>
45-
</li>
46-
</ul>
47-
<button id="player-action" aria-label="Iniciar/Pausar Música">
48-
<img src="./icons/play-circle.svg" alt="Ícone de Play/Pause da música" width="24px" height="24px"></span>
49-
</button>
50-
<div id="player" loading="lazy"></div>
51-
</section>
52-
<div id="background-timer"></div>
53-
<a
54-
class="gh-link"
55-
href="https://github.com/jeconias/timer"
56-
target="_blank">
57-
<img src="./icons/github-mark.svg" alt="Ícone do Github para o endereço https://github.com/jeconias/timer" width="24px" height="24px"/>
58-
</a>
59-
<section class="timer-wrapper">
60-
<span
61-
id="timer"
62-
title="Pressione Espaço ou clique para pausar/continuar"
63-
>00:00:00</span
64-
>
65-
</section>
66-
<ul id="timers"></ul>
67-
</main>
68-
<script src="https://www.youtube.com/iframe_api" async></script>
69-
<script src="./js/timer.js" type="module"></script>
70-
<script src="./js/player.js" type="module"></script>
71-
</body>
72-
</html>
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description"
9+
content="Uma ferramenta para contagem regressiva de tempo. Com nosso intuitivo temporizador, você pode personalizar e monitorar o tempo de suas tarefas com facilidade, seja para cronometrar sessões de estudo, gerenciar prazos profissionais ou simplesmente acompanhar suas atividades diárias." />
10+
<meta name="keywords" content="Timer, Contador, Temporizador" />
11+
<meta name="language" content="pt-br" />
12+
<meta name="google-site-verification" content="ULu_CDAMz1EYmwNt8ttlyyEq0FI4j46tykbh1xlcpco" />
13+
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://www.youtube.com;">
14+
<title>Timer</title>
15+
<link rel="stylesheet" type="text/css" href="./css/timer.scss" />
16+
</head>
17+
18+
<body>
19+
<main id="main" class="main">
20+
<section id="information-icon">
21+
<ul>
22+
<li>
23+
<nobr>- Pressione <strong>ESPAÇO</strong> para pausar/continuar.</nobr>
24+
</li>
25+
<li>
26+
<nobr>- Pressione entre <strong>0</strong> a <strong>9</strong> para
27+
começar a contagem correspondente.</nobr>
28+
</li>
29+
</ul>
30+
<img src="./icons/info.svg" alt="Ícone de informação sobre o uso dos timers" width="24px" height="24px" />
31+
</section>
32+
<section class="player-content">
33+
<ul>
34+
<li>
35+
<nobr>- Pressione as setas para cima/baixo para controlar o volume</nobr>
36+
</li>
37+
</ul>
38+
<button id="player-action" aria-label="Iniciar/Pausar Música">
39+
<img src="./icons/play-circle.svg" alt="Ícone de Play/Pause da música" width="24px" height="24px"></span>
40+
</button>
41+
<div id="player" loading="lazy"></div>
42+
</section>
43+
<div id="background-timer"></div>
44+
<a class="gh-link" href="https://github.com/jeconias/timer" target="_blank">
45+
<img src="./icons/github-mark.svg" alt="Ícone do Github para o endereço https://github.com/jeconias/timer"
46+
width="24px" height="24px" />
47+
</a>
48+
<section class="timer-wrapper">
49+
<span id="timer" title="Pressione Espaço ou clique para pausar/continuar">00:00:00</span>
50+
</section>
51+
<ul id="timers"></ul>
52+
</main>
53+
<script src="https://www.youtube.com/iframe_api" async></script>
54+
<script src="./js/timer.js" type="module"></script>
55+
<script src="./js/player.js" type="module"></script>
56+
</body>
57+
58+
</html>

‎js/player.js

+21-11
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,22 @@ class Notify {
2525

2626
window.addEventListener('load', function () {
2727
const PLAYER = {
28-
ref: new YT.Player('player', {
28+
ref: null,
29+
metadata: {
30+
title: null,
31+
},
32+
done: false,
33+
};
34+
35+
const playerAction = document.getElementById('player-action');
36+
const playerIcon = playerAction.getElementsByTagName('img')?.[0];
37+
38+
if (!playerAction || !playerIcon) return;
39+
40+
const startIFrame = async () => {
41+
if (PLAYER.ref) return Promise.resolve();
42+
43+
PLAYER.ref = new YT.Player('player', {
2944
height: '0',
3045
width: '0',
3146
videoId: 'tGfQYbArQhc',
@@ -36,22 +51,17 @@ window.addEventListener('load', function () {
3651
playsinline: 1,
3752
},
3853
events: {},
39-
}),
40-
metadata: {
41-
title: null,
42-
},
43-
done: false,
44-
};
54+
});
4555

46-
const playerAction = document.getElementById('player-action');
47-
const playerIcon = playerAction.getElementsByTagName('img')?.[0];
48-
49-
if (!playerAction || !playerIcon) return;
56+
return new Promise((r) => PLAYER.ref.g.addEventListener('load', r));
57+
};
5058

5159
const notification = new Notify();
5260

5361
playerAction.addEventListener('click', async (event) => {
5462
event.preventDefault();
63+
await startIFrame();
64+
5565
const button = event.currentTarget ?? {};
5666

5767
const disableOrEnableButton = () => (button.disabled = !button.disabled);

0 commit comments

Comments
 (0)