fix: lighthouse (#67)

Author: perisicnikola37

analyzer/index.html

@@ -57,6 +57,9 @@
     />
     <meta name="twitter:site" content="@DevToRater" />
     <meta name="theme-color" content="#ffffff" />
+
+    <link rel="preconnect" href="https://iconfinder.com" />
+    <link rel="preconnect" href="https://cdn3.iconfinder.com" />
   </head>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Playwrite+IS&display=swap');

analyzer/package-lock.json

@@ -8,26 +8,21 @@
   "theme_color": "#ffffff",
   "icons": [
     {
-      "src": "icons/icon-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "icons/icon-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
+      "src": "https://i.postimg.cc/3NFg6y0Q/Analyze-your-Dev-to-posts-httpsdev-to-rater-xyz-2-photoaidcom-cropped.png",
+      "type": "image/png",
+      "sizes": "512x512"
     }
   ],
   "routes": [
     {
       "path": "/",
       "name": "Home",
-      "title": "DevTo Rater - Home"
+      "title": "DevTo Rater | Homepage"
     },
     {
       "path": "/rater",
       "name": "Post Analyzer",
-      "title": "DevTo Post Analyzer"
+      "title": "DevTo Post | Analyzer"
     },
     {
       "path": "/blogs",

analyzer/public/manifest.json

@@ -109,6 +109,7 @@ const BlogsSection = () => {
                 transition={{ delay: index * 0.2, duration: 0.5 }}
               >
                 <img
+                  loading="lazy"
                   src={post.image}
                   alt={post.title}
                   className="w-full h-48 sm:h-56 object-cover"

analyzer/src/components/Blogs/BlogsSection.tsx

@@ -17,6 +17,7 @@ const ReadingTimeBox = () => {
         </div>
       </div>
       <img
+        loading="lazy"
         src={readingTime}
         alt="Dev.to Rater - Reading time of blog post"
         className="w-full mt-5 h-full overflow-auto object-cover select-none"

analyzer/src/components/Features/ReadingTimeBox.tsx

@@ -20,6 +20,7 @@ const WordFrequencyBox = () => {
       </div>
       <div className="flex justify-center h-full p-8 w-full">
         <img
+          loading="lazy"
           className="select-none object-contain"
           src={wordFrequency}
           alt="Dev.to Rater - Word repetition frequency"

analyzer/src/components/Features/WordFrequencyBox.tsx

@@ -42,7 +42,12 @@ const Footer = () => {
             className="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse"
             onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
           >
-            <img src={logo} className="h-8" alt="Dev.to Rater Logo" />
+            <img
+              loading="lazy"
+              src={logo}
+              className="h-8"
+              alt="Dev.to Rater Logo"
+            />
           </Link>
 
           <ul className="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-400 sm:mb-0 dark:text-gray-400">

analyzer/src/components/Footer/Footer.tsx

@@ -8,7 +8,11 @@ const Header = () => (
         Dev.to Rater
       </h1>
       <Link to={'/'}>
-        <img className="ml-4 w-13 h-13" src={logo} alt="Dev.to Rater Logo" />
+        <img
+          className="w-13 h-13 transition-transform duration-300 hover:rotate-10 ease-in-out"
+          src={logo}
+          alt="Dev.to Rater Logo"
+        />
       </Link>
     </div>
     <div className="flex justify-start w-full mt-3 text-gray-800 dark:text-white">

analyzer/src/components/Header.tsx

@@ -31,10 +31,10 @@ const Card: React.FC<CardProps> = React.memo(
         <div className="flex flex-col justify-between h-full">
           <Suspense fallback={<Spinner />}>
             <img
+              loading="lazy"
               height={'100px'}
               width={'100px'}
               src={card.imgSrc}
-              loading="lazy"
               className="m-auto"
               alt="Dev.to Rater's social media"
             />

analyzer/src/components/HomePage/Card.tsx

@@ -39,7 +39,12 @@ const Header = () => {
     <header className="sticky top-0 flex justify-between items-center w-full px-6 md:px-10 border-b border-gray-800 h-18 backdrop-blur-sm z-50 bg-opacity-60">
       <div className="flex items-center">
         <Link to="/" className="flex items-center">
-          <img src={logo} alt="Dev.to Rater Logo" className="w-8 mr-2" />
+          <img
+            src={logo}
+            alt="Dev.to Rater Logo"
+            className="w-8 mr-2"
+            loading="lazy"
+          />
         </Link>
 
         <nav className="hidden md:flex items-center ml-8">

analyzer/src/components/HomePage/Header.tsx

@@ -19,6 +19,7 @@ const TrustedBySection = () => {
             <div key={index} className="relative mb-4">
               <a href={image.link} target="_blank" rel="noopener noreferrer">
                 <img
+                  loading="lazy"
                   src={image.src}
                   alt={`Dev.to Writer ${index + 1}`}
                   className={`rounded-full w-16 h-16 object-cover z-10 transition-transform duration-300 ease-in-out transform hover:scale-110 hover:-rotate-3`}

analyzer/src/components/HomePage/TrustedBySection.tsx

@@ -73,6 +73,7 @@ const PromotedPosts = ({ triggerRefetch }: { triggerRefetch: boolean }) => {
             className="hover:opacity-70 post-history-item flex items-center space-x-4 bg-white p-1 rounded-xl shadow-md hover:shadow-lg cursor-pointer transition duration-300"
           >
             <img
+              loading="lazy"
               src={
                 post.post_thumbnail ||
                 'https://static-00.iconduck.com/assets.00/dev-to-icon-2048x2048-4i261myk.png'

analyzer/src/components/PromotedPosts.tsx

@@ -110,7 +110,7 @@ const RepeatedWords = ({ content }: { content: FinalResponse | null }) => {
                   position="right"
                   textAnchor="middle"
                   dx={1}
-                  fill={'#fff'}
+                  fill={'#000'}
                 />
               </Bar>
             </BarChart>

analyzer/src/components/RepeatedWords.tsx

@@ -72,6 +72,7 @@ const ScannedPostsHistory: React.FC<ScannedPostsHistoryProps> = ({
             className="post-history-item flex items-center space-x-4 backdrop-blur-2xl hover:scale-101 p-5 rounded-xl shadow-md hover:shadow-lg cursor-pointer transition duration-300"
           >
             <img
+              loading="lazy"
               src={
                 post.imageUrl ||
                 'https://static-00.iconduck.com/assets.00/dev-to-icon-2048x2048-4i261myk.png'
@@ -92,6 +93,7 @@ const ScannedPostsHistory: React.FC<ScannedPostsHistoryProps> = ({
                   .map((reaction, index) => (
                     <p key={index} className="flex items-center">
                       <img
+                        loading="lazy"
                         src={
                           reactionEmojis[
                             reaction.category as keyof typeof reactionEmojis

analyzer/src/components/ScannedPostsHistory.tsx

@@ -29,6 +29,7 @@ const ScrollToTopButton = () => {
           rel="noopener noreferrer"
         >
           <img
+            loading="lazy"
             src={productHunt}
             alt="Dev.to Rater - Analyze blog posts to uncover trends and metrics | Product Hunt"
             width="65"

analyzer/src/components/ScrollToTopButton.tsx

@@ -44,6 +44,7 @@ const SubHeader = () => {
         onClick={handleRepoClick}
       >
         <img
+          loading="lazy"
           alt="GitHub repository stars badge"
           src="https://img.shields.io/github/stars/perisicnikola37/dev-to-rater"
         />

analyzer/src/components/SubHeader.tsx

@@ -54,8 +54,8 @@ const DevToPostAnalyzer = () => {
       trackSubmitEvent(inputURL)
       setSubmittedURL(inputURL)
       fetchHTMLContent(inputURL)
+      changeScannedPostsCount(1)
     }
-    changeScannedPostsCount(1)
   }
 
   useEffect(() => {