Menampilkan Page Speed dan Data Usage di Website dengan PHP

Hello Sobat Helixs! Apa kabar nih? Kali ini helixs akan mengajarkan sesuatu berkaitan dengan programming PHP. Penjelasan singkatnya Page Speed adalah lama waktu yang diperlukan untuk membuka suatu page pada website hingga terload sepenuhnya, Sedangkan Data Usage yang di maksud ialah banyaknya data yang terpakai selama page load hingga selesai. Dengan menampilkan ini pada website kamu, akan menjadi fitur kecil yang menambah kesan tersendiri kepada para pengunjung website kamu. Oke langsung saja, disini saya menggunakan 2 macam code yang saya tambahkan di bagian header sebelum tag </head>.

<?php $mulai = microtime(true); ?>

Penjelasan mengenai code tersebut ialah kita menggunakan fungsi microtime() agar waktu pada saat mulai di akses (rendering) tersimpan ke variable ‘$mulai’. Selanjutnya kita akan menampilkan waktu kecepatan page load hingga selesai. Saya menambahkan code berikut pada bagian body.

<?php $finish = microtime(true); print''. round(($finish - $mulai) * 1000, 2) . '<small>-ms</small>';?>

Jika page selesai load (rendering) akan tersimpan ke Varibel ‘$finish’, Nah, untuk menampilkan hasil kalkulasi kita menggukan code ‘round(($finish – $mulai) * 1000, 2)’ Code ini akan menampilkan hasil kalkulasi dalam milisecond. Nah, berikutnya kita akan mencoba memakai code kedua. Saya menambahkan code berikut ke bagian header sebelum tag </head>.

<?php
$starttime = explode(' ', microtime());
$starttime = $starttime[1] + $starttime[0];
$load = microtime();
$loadtime = explode(' ', microtime());
$loadtime = $loadtime[0]+$loadtime[1]-$starttime;
?>

Penjelasannya hampir sama dengan code yang pertama, selanjutnya untuk menampilkan hasil kalkulasi load page dan data usage memakai code seperti berikut.

<?php
echo "Load Speed ".number_format($load,2)." <small>S</small>;
echo "<br>";
echo "Data Usage :".round(memory_get_peak_usage()/1048576, 2), "MB";
?>

Setelah saya menambahkan CSS dan menambahkan beberapa code, hasil akhirnya sebagai berikut dan untuk demo nya kalian bisa mengunjungi link ini.

WhatsApp Image 2021 03 18 at 10.02.03 1 Menampilkan Page Speed dan Data Usage di Website dengan PHP

Berikut source code full nya

<!DOCTYPE html>
<html>
<head>
  <title>Testing Page Load</title>
  <link rel="stylesheet" href="//cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">
  <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
  <link rel="stylesheet" href="https://tools.helixs.tech/style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <?php $mulai = microtime(true); ?>
  <?php
$starttime = explode(' ', microtime());
$starttime = $starttime[1] + $starttime[0];
$load = microtime();
$loadtime = explode(' ', microtime()); 
$loadtime = $loadtime[0]+$loadtime[1]-$starttime;
?>
</head>
<body>
    <div class="row">
        
           
            <div class="col-12 col-sm-6 col-md-3 grid-margin stretch-card">
                  <?php
                  $finish = microtime(true);
                  $updown = round(($finish - $mulai) * 1000, 2);
                          if ($updown > 1000) { 
                              echo'<div class="card icon-card-danger">'; 
                          } elseif ($updown > 100) { 
                              echo'<div class="card icon-card-warning">'; 
                          } else { 
                              echo'<div class="card icon-card-success">'; 
                          } 
                          ?>
                <div class="card-body">
                    <div class="d-flex align-items-center">
                      <div class="icon mb-0 mb-md-2 mb-xl-0 mr-2">
                        <i class="mdi mdi-access-point-network"></i>
                      </div>
                      <p class="font-weight-medium mb-0">Page Load</p>
                    </div>
                    <div class="d-flex align-items-center mt-3 flex-wrap">
                      <h3 class="font-weight-medium mb-0 mr-2"><?php $finish = microtime(true); print''. round(($finish - $mulai) * 1000, 2) . '<small>-ms</small>';?></h3>
                      <div class="badge badge-outline-light badge-pill mt-md-2 mt-xl-0">
                        <div class="d-flex align-items-baseline">
                          <span class="mr-2"><?php 
                          $updown = round(($finish - $mulai) * 1000, 2);
                          
                          if ($updown > 1000) { 
                              echo'Very Slow'; 
                          } elseif ($updown > 100) { 
                              echo'Slow'; 
                          } else { 
                              echo'Fast'; 
                          } 
                          ?></span>
                          <span class="mb-0"><?php print''. round(($finish - $mulai) * 1000, 2) . '<small>-ms</small>'; ?></span>
                          <?php 
                          $updown = round(($finish - $mulai) * 1000, 2);
                          
                          if ($updown > 1000) { 
                              echo'<span class="mdi mdi-arrow-down"></span><span class="mdi mdi-arrow-down"></span>'; 
                          } elseif ($updown > 100) { 
                              echo'<span class="mdi mdi-arrow-down"></span>'; 
                          } else { 
                              echo'<span class="mdi mdi-arrow-up"></span>'; 
                          } 
                          ?>
                        </div>
                      </div>
                    </div>
                    <small class="d-block mt-2">PING</small>
                </div>
              </div>
            
            </div>
            <div class="col-12 col-sm-6 col-md-3 grid-margin stretch-card">
              <div class="card icon-card-danger">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                      <div class="icon mb-0 mb-md-2 mb-xl-0 mr-2">
                        <i class="fas fa-radiation"></i>
                      </div>
                      <p class="font-weight-medium mb-0">Data</p>
                    </div>
                    <div class="d-flex align-items-center mt-3 flex-wrap">
                      <h3 class="font-weight-medium mb-0 mr-2"><?php echo "".round(memory_get_peak_usage()/1048576, 2), "<small>Mb</small>";
?></h3>
                      <div class="badge badge-outline-light badge-pill mt-md-2 mt-xl-0">
                        <div class="d-flex align-items-baseline">
                          <span class="mr-2">+</span>
                          <span class="mb-0"><?php echo "".round(memory_get_peak_usage()/1048576, 2), "<small>Mb</small>";
?></span>
                          <span class="mdi mdi-arrow-up"></span>
                        </div>
                      </div>
                    </div>
                    <small class="d-block mt-2">Data Usage</small>
                </div>
              </div>
            </div>
            
          </div>
</body>
</html>

Sekian! Sampai jumpa di artikel berikutnya sobat helixs.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *