<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Aloysius Thomas</title>
    <description>The latest articles on DEV Community by Aloysius Thomas (@aloysius_thomas_0966f9e1c).</description>
    <link>https://dev.to/aloysius_thomas_0966f9e1c</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3695497%2F78c673f4-ff72-4826-8c00-227d15e94412.jpg</url>
      <title>DEV Community: Aloysius Thomas</title>
      <link>https://dev.to/aloysius_thomas_0966f9e1c</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/aloysius_thomas_0966f9e1c"/>
    <language>en</language>
    <item>
      <title>I built a simple PSI wrapper to get "GTmetrix style" grades</title>
      <dc:creator>Aloysius Thomas</dc:creator>
      <pubDate>Tue, 06 Jan 2026 05:31:09 +0000</pubDate>
      <link>https://dev.to/aloysius_thomas_0966f9e1c/i-built-a-simple-psi-wrapper-to-get-gtmetrix-style-grades-3ldc</link>
      <guid>https://dev.to/aloysius_thomas_0966f9e1c/i-built-a-simple-psi-wrapper-to-get-gtmetrix-style-grades-3ldc</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft139skv4iur8vw57gygu.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft139skv4iur8vw57gygu.jpg" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;

&lt;/p&gt;
&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://app.arcade.software/share/t6vjt5xHVD6bJbUuEBlW" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fapp.arcade.software%2Fog%2Ft6vjt5xHVD6bJbUuEBlW" height="auto" class="m-0"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://app.arcade.software/share/t6vjt5xHVD6bJbUuEBlW" rel="noopener noreferrer" class="c-link"&gt;
            Analyze Website Performance and Explore Optimization Tips | Arcade
          &lt;/a&gt;
        &lt;/h2&gt;
          
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.arcade.software%2Fimages%2Fbutton-logo-128.png"&gt;
          app.arcade.software
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;




&lt;p&gt;&lt;strong&gt;TL;DR:&lt;/strong&gt; I missed the old GTmetrix letter grades (A-F), so I built &lt;a href="https://grademyspeed.com" rel="noopener noreferrer"&gt;GradeMySpeed.com&lt;/a&gt;. It's a simple, free wrapper around the Google PageSpeed Insights API that restores the letter grading system. No huge frameworks, just Vanilla JS and a simple PHP proxy.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Motivation 📉
&lt;/h2&gt;

&lt;p&gt;Google's &lt;strong&gt;PageSpeed Insights (PSI)&lt;/strong&gt; is the source of truth, but I always found the UX a bit dense for quick checks. I mostly just wanted to know: "Is this an A site or an F site?"&lt;br&gt;
Since GTmetrix changed their UI a while back, I decided to build a simple clone of their old grading system for my own use.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Tech Stack 🛠️
&lt;/h2&gt;

&lt;p&gt;Nothing fancy here. I wanted it to run on cheap shared hosting without a build step.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Frontend: Vanilla JavaScript
&lt;/h3&gt;

&lt;p&gt;I avoided React/Next.js to keep it lightweight. It uses ES6 modules and CSS variables for the dark/light mode.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Backend: Simple PHP Proxy
&lt;/h3&gt;

&lt;p&gt;You can't call the PSI API directly from the browser (CORS + exposing API keys), so I wrote a minimal proxy.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Caching
&lt;/h3&gt;

&lt;p&gt;To avoid hitting Google's rate limits and to speed up repeat checks, I added basic file-based caching. If a URL was checked recently, it serves the local JSON instead of hitting the API again.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Grading Logic 🧮
&lt;/h2&gt;

&lt;p&gt;The "Letter Grade" isn't magic—it's just a weighted calculation I added on top of the Lighthouse data:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Performance Score (60%)&lt;/strong&gt;: The raw Lighthouse performance score.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Structure Score (40%)&lt;/strong&gt;: A composite of Accessibility, Best Practices, and SEO.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;totalScore&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;performance&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mf"&gt;0.6&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;structure&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mf"&gt;0.4&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;totalScore&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mi"&gt;90&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;A&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;totalScore&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mi"&gt;80&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;B&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;// ... etc&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Comparisons &amp;amp; Dark Mode
&lt;/h2&gt;

&lt;p&gt;I also added a "Compare" feature to run two checks side-by-side, which is useful for checking Mobile vs Desktop scores simultaneously. Plus, a dark mode because... well, why not?&lt;/p&gt;

&lt;h2&gt;
  
  
  Links
&lt;/h2&gt;

&lt;p&gt;It's &lt;br&gt;
free. If you want a simpler view of your PSI data, give it a try.&lt;br&gt;
👉 &lt;strong&gt;Live Tool&lt;/strong&gt;: &lt;a href="https://grademyspeed.com" rel="noopener noreferrer"&gt;GradeMySpeed.com&lt;/a&gt;&lt;br&gt;
Feedback welcome!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>php</category>
      <category>javascript</category>
      <category>webperf</category>
    </item>
  </channel>
</rss>
