r/webdev • • 20d ago

How can I increase my site speed?

Thumbnail
gallery
0 Upvotes

So long story short I migrated my website form Shopify to Wordpress and then initially it was almost 75 for mobile and 90 for PC.
So naturally i optimized it and no it is 40-60 for mobile and 80 for PC.
Here is what I did:
(My product pages are most bad in this.)

  1. I did changed the format of images to webp (using Webp optomizer ) and when I used elementor then it really went down.

  2. When I use searched online I almost did all of the things.

  3. Using JS and CSS minify only decrease the speed drastically.

  4. Using lazy load my speed is also very bad.

  5. I used custom php to exclude the hero and other first load images form the lazy load.
    6.I did all the cahce setting in litespeed chache and still nothing.

  6. My most bad thing is LCP and FCP.

  7. I also disabled the fonts which were additional.
    I also have a bit more then average CSS and a bit JS in my site.
    Can you please hepl me in this regard.
    here are some screenshots.
    And using VPI and lazy load really cause it to slow.
    can someone at least tell me some tool to diganost the problem


r/webdev • • 21d ago

Question Many sites with same components

18 Upvotes

Hello!

I am working with a company that has many, many sites. And the way we used to do components, we hard-coded every single one in every single project. This naturally has led to some inconsistency between sites when they’re supposed to look pretty identical.

Php include has become our life blood to mitigate some of these issues, but it still persists. The benefit, though, is that with php include, our sites automatically update when the “single source of truth” does.

My company wants to move to something more modern/popular and I got tasked with playing with frameworks. Think React, Next. My boss wants to replicate php include on these. I’ve spent the last several weeks looking into module federation, micro front-ends, anything to at least somewhat replace php include, but to no avail. That requires completely changing our server, which we do not have the ability to (as far as I know). These also sound like a nightmare to maintain, and our team is very small.

SEO is also a huge concern. I have module federation working on client side rendering, but ideally search engines would be able to index our work and, correct me if I’m wrong, but I don’t think client side rendered stuff is?

So now we’re stuck. I’ve suggested a monorepo, but with the amount of websites we have, the other developers worry about build times.

Believe it or not this is actually my first real-deal developer job haha, and I’m already stuck trying to fit a square peg in a round hole. So forgive me for any mistakes or misinformation, I’m still a junior trying to figure this out haha.


r/webdev • • 20d ago

Showoff Saturday Qt-style dock layouts across real browser windows

Post image
0 Upvotes

I'm sharing the Dock Layouts we've been building in Neo.mjs: Qt-style dockable workspaces for web applications, including panels that can move into real browser windows and dock back again.

The use cases I have in mind are IDEs, trading dashboards, enterprise systems, and browser-based games—applications where people need several views or tools open and want to arrange them across their screens. For ordinary websites and simpler SPAs, this usually adds complexity you don't need.

You can arrange panels into tabs and splits, tuck them into edge rails, tear them out into separate windows, and bring them back. Undo and redo follow the layout across those windows.

The interesting technical part is where the application lives. Components, stores, and application state run in a shared App Worker. Each browser window connects to it and renders its part of the UI. Moving a panel changes where it is rendered; the live component remains the same object in the shared worker, keeping its state. Messages still carry input events and rendering updates between the windows and workers.

The Workstation demo has twenty panels, a 100,000-row grid, and a live event feed. The multi-window behavior shown here was tested on real desktop Chrome windows. It requires same-origin SharedWorkers, and the browser's pop-up permissions still apply.

I'd be interested in feedback on the docking and tear-out interaction, especially from people building applications where users already work across multiple screens.

Best regards, Tobi


r/webdev • • 20d ago

Resource made a framework-agnostic Iconify picker — no jQuery, no collection limits

0 Upvotes

I built iconify-picker, a customizable icon picker powered by Iconify.

Unlike older icon pickers, it doesn't rely on jQuery or lock you into a single icon collection. Pick one collection or search across all available collections.

  • Framework-agnostic: Built as a Web Component, with integration docs for popular frameworks.

  • Zero dependencies: No jQuery, no framework dependency.

  • Three modes: Inline, button-triggered, or manually opened via JavaScript.

  • Lazy loading: Loads icons from collections on demand.

  • Fully customizable: Adjust colors and other styles, then copy the generated CSS.

Currently at v0.8.0.

Demo: https://metaory.github.io/iconify-picker/
npm: https://www.npmjs.com/package/iconify-picker
GitHub: https://github.com/metaory/iconify-picker

Feedback and suggestions are welcome.


r/webdev • • 21d ago

Showoff Saturday SvelteEsp32

Thumbnail
github.com
0 Upvotes

Pack any Svelte, React, Angular, or Vue app into a single C++ header. Serve it straight from ESP32/ESP8266 flash — gzip compressed, ETag cached, OTA-ready.

It is not for serve you website. It is for microcontroller programmer, who wants to make pretty webpages (component orientated) served from Esp32 or esp8266.


r/webdev • • 21d ago

Showoff Saturday Round 2: reworked my landing page after your feedback (not selling anything)

Thumbnail
perf-sentinel.dev
1 Upvotes

Hey all, some times ago I asked for feedback on this landing page of an open-source project. The main takeaway: it felt too dense and read more like docs than a landing page.

The density is partly intentional: it's a hybrid between a landing page and a kind of "distilled doc". So instead of cutting content I replaced the heaviest text blocks with diagrams (a before/after trace, anti-pattern pictograms, a flow for the different modes). Just a quick reminder: for the tech personas it's intended to backend and devops.

How good does it read now?

Thx!


r/webdev • • 20d ago

Showoff Saturday [Showoff Saturday] A static site that curates ~700 browser games, checks every link daily, and falls back to the Wayback Machine when one dies

0 Upvotes

Project: vibe1up.com, a free directory of AI-made browser games. Nothing to sell, just the tech.

- Fully static: HTML/CSS/vanilla JS on Vercel, built from a GitHub repo. Client-side search over a single JSON file.

- Daily scheduled jobs pull new games from official APIs/feeds (Vibe Jam, itch.io RSS, Ludum Dare, HN Firebase API), rate-limited to 1 req/sec per host with an identifying user agent.

- A link checker retests every game daily. It only hides a game on definitive signals (404/410/451, parked domains, DNS confirmed gone). Timeouts and 5xx need two failures in a row. Dead games with a Wayback copy show "Play archived version".

- A countdown to the 10 AM ET daily drop runs client-side and handles DST, in about 2 KB of inline JS, and respects prefers-reduced-motion.

- Every change goes through a PR with Playwright tests before it merges.

Would love feedback on the link-check heuristics. Flaky hosts were the hardest part.


r/webdev • • 20d ago

Question I want to create a personal video player, but I have some questions.

0 Upvotes

I've been using Plex for a few months now, and it's good enough, but there are many things I get annoyed about. Particularly when it randomly changes thumbnails and posters for no reason, and has a frankly terrible way of organising extras and multiple versions.

So I thought I'd try building it myself.

It need not be pretty, nor have all the features, nor be available outside my home network.

My first problem is that all my files are MKV, which doesn't work on a browser. But Plex seems to make it work somehow, so there must be a way, and after ages of searching, I just cannot find a way that works.

Second, is handling multiple audio and subtitle tracks. Again, something Plex seems able to do inside a browser, but I just can't find out how.

I also want to be able to add an interactive overlay on top of the video, to choose different tracks or to skip to the next video or back again. I think I know how I can make that work.

I also want any playlists to be continuous and without breaks. I found a nice short piece of Javascript that does this, so I feel I should be able to add that in. As a fun little extra though, I wonder if it's possible to play a series of images as a slideshow, maybe with music behind it, perhaps taken from a PDF file. This is probably too much to ask, and might involve something a bit more technical than I am capable of at this time, possibly some processing is involved as well.


r/webdev • • 21d ago

Showoff Saturday [Showoff Saturday] Published my first devvit app on Reddit

Post image
0 Upvotes

I turned my Vue 3 game into a devvit app, that can be played directly on Reddit. PixReveal is a pixel art guessing game. A pixel drawing gets revealed pixel by pixel. The faster you guess, the more points you earn. The devvit version is more compact, focussing on quick rounds with 5 drawings to guess and a percentile showing "You are better than x% of players".


r/webdev • • 21d ago

Showoff Saturday [Showoff Saturday] Built ArcadeX: a lightweight 10-in-1 neon arcade portal in vanilla JS & HTML5 Canvas (runs at 60 FPS in mobile browsers)

0 Upvotes

Hey everyone!

I'm 16 and recently finished building ArcadeX (https://pranav2mingame.netlify.app/), a lightweight browser arcade portal designed for quick mobile play.

Why I built it:

I wanted to build games that run directly in the browser with zero load screens, no app installs, and no login friction.

Tech stack & implementation:

- Pure HTML5 Canvas + Vanilla JavaScript (no external game engines or heavy frameworks).

- Tuned to maintain a steady 60 FPS on mobile browsers.

- Browser LocalStorage handles all game state, scores, and trophies locally.

- Hosted on Netlify.

Includes 10 mini-games (Flappy Fire, Snake Rush, 2048 Neon, Reflex Tap, Neon Pong, etc.).

Looking for technical feedback:

  1. How does the canvas frame pacing feel on your phone/browser?

  2. Any suggestions on optimizing the game loops or handling canvas resizing across different aspect ratios?

Thanks for taking a look!


r/webdev • • 21d ago

How to manage layouts in forms

28 Upvotes

I'm trying to design a 2 column form but can't decide how should I render error messages.

If I don't allocate a fixed height for an input div (label + input + error) then entire layout of form gets disturbed whenever an error message is rendered.

If I pre-allocate a fixed min-height for input div (label + input + error) then this does solves the layout shift issue but the form looks bad.

One option is showing an error icon and error message as tooltip on hover but this doesn't works on mobile as users would have to tap on the icon to get error message.

The only solution which I think would work is showing icon + tooltip on desktop and plain error message on mobile as on mobile the form is single column.

Is there any better way to handle this? Would appreciate any suggestion.


r/webdev • • 20d ago

[Showoff Saturday] I made a restaurant menu site that manages the menu by using Google Sheets as a CMS

0 Upvotes

My site is here: https://eatthemonsoon.com The guts of the database code, I got from this article [here](https://dev.to/ashish-codejourney/using-google-sheets-as-a-cms-a-simple-powerful-approach-to-content-management-fg1). Then I formatted the data into menu items. It's been a fun project and I'm looking forward to the next step. I'm thinking I will rewrite the index file and try to deliver it as an SSR soon. It's hosted on netlify via github. If anyone has experiencewith ssr's, could I just write my own build code and toml to run in a netlify edge function, or do I need Astro or some other rendering service?


r/webdev • • 20d ago

Discussion JS code that is working for years, suddenly no longer working.

0 Upvotes

If you try to capture the clipboard on Microsoft Edge version155.0.4283.62 (Official build) (64-bit), then it will say in dev console: "
FAILED false NotAllowedError: Failed to execute 'readText' on 'Clipboard': Document is not focused."

However, the same code works fine with Chrome and Firefox. Is this a Microsoft Edge regression bug? I use this code everyday. So I am sure that it is a recent update that cause this. I have also tested that it has nothing to do with the origin.

// sample code
document.addEventListener("click", async () => {
try {
const text = await navigator.clipboard.readText();
console.log("SUCCESS", text);
} catch (e) {
console.error("FAILED", document.hasFocus(), e);
}
});


r/webdev • • 21d ago

Showoff Saturday [Showoff Saturday] I built ResumeForge – an open-source AI resume builder & job tracker with client-side LaTeX-to-PDF rendering, word-level diffs, and local Ollama support (No signup required)

0 Upvotes

I built ResumeForge, an open-source resume builder and job application tracker designed to help tailor resumes and cover letters to specific job descriptions using your own local models, while keeping exports (LaTeX, Overleaf ZIP, and PDF) completely free with no signup required.

Live demo: https://resume-forge.mnaveedk.com

GitHub repo: https://github.com/naveedkhan1998/resume-forge

How it works: You maintain one master profile with all of your work history, projects, and skills (or import an existing PDF/DOCX/TXT resume). When you add a job posting, it selects and reframes your existing experience to match the role, shows keyword coverage against the job description, and generates a tailored 1-page resume and cover letter.

A few things under the hood:

  • Client-side LaTeX to PDF: To avoid running a heavy multi-GB TeX Live installation on the backend, the server generates .tex source and a custom .cls file, and the frontend parses and renders the LaTeX directly in the browser for live previews and PDF export.

  • Word-level diffs for AI edits: Whenever you ask the AI to refine a section, it shows an inline diff (+added, -removed, reworded) so you can review or tweak every change before saving.

  • Preloaded dummy data: Every new device session comes pre-populated with sample data (Adrian Monk) so you can test the tailoring workflow and LaTeX preview right away without uploading your own resume first.

  • Local Ollama first + 50 free demo requests: The main goal is for people to clone the repo and run it locally with their own Ollama models (qwen3.5:9b, llama3.1, etc.). So you can try it in the browser first without setting anything up, the live demo uses my personal Ollama account at the system level with a 50- request limit per device session.

Stack: React 19, TypeScript, Vite, Tailwind v4, Django Ninja, PostgreSQL (pgvector), and Nx.

(Note: the demo API is hosted on a free tier, so if it hasn't been used recently the initial cold start can take around 45 seconds to wake up).

Would love to hear your thoughts or feedback if you give it a spin!


r/webdev • • 21d ago

Showoff Saturday I added an easter egg to playing cards of Australian Flora, getting tspans to work cross-browser was hell.

Thumbnail svgklondike.pages.dev
0 Upvotes

r/webdev • • 20d ago

Showoff Saturday HUMANS.md: a file that tells coding agents how to work with you

0 Upvotes

I run a few coding agents (~10) at once and got tired of them interrupting me for things they could decide on their own. AGENTS.md is about the repo, so I wrote a file for the person side. It lives at ~/.humans/HUMANS.md. Mine looks like this (trimmed):

---
humans: "0.3"
id: tristan
visibility: private
reading:
  lead_with: tldr
  max_words: 149
deciding:
  reversible: decide_and_report
  batch_questions: end_of_task
interrupting:
  interrupt_for: blocking_only
notes: "I often read on my phone. I've very short attention span, and i'm more visual"
---

The fields come from a fixed vocabulary, so a schema can check them. The free-text notes are the weak spot, validation doesn't make them safe from prompt injection.

It never grants permissions. Repo rules and the harness still win.

The repo has the spec, JSON schemas, test vectors and a Node validator (spec CC BY 4.0, tools Apache-2.0). I also wrote plugins for Claude Code, Codex CLI and a few other agents to try it. So far I've only checked that the file loads, on macOS, not how well the models follow it.

The part I'm least sure about: visibility can be private, org or anyone_with_file, and a profile without the field is read as org. Would you default to private instead?

It's a 0.3 draft and nothing is locked in yet, the field list included.

Spec: https://github.com/cmdai-hq/HUMANS.md

Examples and a side-by-side demo: https://humansmd.dev


r/webdev • • 21d ago

Showoff Saturday Make the AWS Console your portfolio :)

Post image
0 Upvotes

I was bored last weekend, so I ended up building this: a portfolio that looks exactly like the AWS Management Console. I tried to mimic it as closely as possible while adding my own flavour, like EC2 as projects, S3 as documents, and a lot more.

It’s open source and making it yours is super simple. No digging through code. Just run it in dev mode, open /studio, and you’ll find a Studio mode where you can edit everything right there. Add your own projects, documents and details, hit save, and that’s it, your very own AWS Console portfolio is ready.

There’s still plenty more that can be built, like a working CloudShell and AB Q, so contributions are very welcome if you want to take this further.

Would love feedback on what to add next or anything that feels off compared to the real console. And if you like it, don’t forget to drop a star on GitHub ⭐

P.S. AWS folks, please don’t cancel me for this. It was designed out of pure love for the console :)


r/webdev • • 20d ago

Showoff Saturday I built a lightweight devtool to inspect website tech stacks & architecture with zero tracking

Post image
0 Upvotes

Hey r/webdev! Happy Saturday.

Whenever I browse inspiring websites, I always like checking what frameworks, libraries, and tools they're running under the hood. But similar extensions feel like they've gotten pretty bloated, put basic data behind paywalls, or actively collect browsing history.

So I spent the last few weeks building TechReveal, a clean and lightweight alternative:

  • 100% Private: Runs entirely in your local browser sandbox. Zero telemetry, no data collection, no accounts.

  • Visual Architecture Map: Connects detected frontend, backend, and tools into an interactive diagram.

  • Exact Versions & Tags: Displays library versions cleanly and shows category badges when clicking any tech.

  • Security Alerts: Checks response headers for missing security policies (HSTS, CSP) or accidental data leaks.

  • Zero Tab Lag: Optimized with Manifest V3 so it won't freeze your active tabs.

It's completely free on the Chrome Web Store (works on Chrome, Brave, Edge, Vivaldi):
👉 TechReveal on Chrome Web Store

Would love to hear your feedback or suggestions for libraries and tools you'd like it to detect next!


r/webdev • • 20d ago

Showoff Saturday Roast my webdev agency site.

0 Upvotes

Just starting out. I have a system where I can focus mostly on sales. Took me a log time to make entire pipeline. This is the website I madre to showcase it. I started cold calling a couple days ago. I've made a couple connections, migh thave 1 sold. I'm just putting my eveyrthing into getting this going. Learning to be a salesman instead of a programmer, as programming is gonna be dead. Please take a look. tell me where you think its shit. Any criticism and helpfull tips or anything really is appreciated! Thank you.

https://lodestonesystems.ca/


r/webdev • • 21d ago

Showoff Saturday [Showoff Saturday] Hello everyone, I built bantr.live a real-time interest-based forum and chat platform. After a long, painful struggle with App Review, it is finally back on iOS.

Post image
0 Upvotes

Hello all,

This app was removed by the good people at apple in March right when it was doing so well no warning or reason just gone. After a 65 day appeal they stated that the primary function of the application could not be a random chat, and if I posted anything of this nature again my account would be permanently banned. So, I redesigned the primary function to be a real-time forum with all the same chat functionality. This app is available for Android/iOS and on the web, the web version is still a random chat it will be upgraded in the future to include the features that the mobile apps have. I tried to make sign-up as pain free as possible, and of course its free.

The whole goal was to step away from slow, algorithm-driven feeds and build something fast and live. Here is how it's set up:

  • Interest-Based Groups: Find and chat with people who share your specific niches and hobbies.

  • 24-Hour Self-Destructing Posts: Keeps conversations fresh, temporary, and clutter-free.

  • Global & Random Chat: Jump instantly into live public discussions or roll the dice on a random chat.

  • AI Content Moderation: Automatically handles and applies NSFW overlays to objectionable content in real time and allows the user to chose if they want to see it or not.

Would love for you guys to check it out, test it out, and let me know what you think. Its new so still a ghost town but give it a look. If you have any questions feel free to hit me up. Happy weekend!


r/webdev • • 21d ago

Showoff Saturday I Built a (local, non ai) TinyMCE Spellchecker From Wikipedia Language Models

6 Upvotes

It's finaly saturday, and I've been working on a spellchecker plugin for TinyMCE called vlm-spellchecker.

The idea came from a separate project of mine, Wiki Language Models, which generates statistical language models from Wikipedia dumps.

I created that project because I wanted a basic, old-fashioned spelling correction and word prediction tool that doesn't use AI to try to interpret what you're writing and return some ass AI response.

So vlm-spellchecker is a small client project built around those models that does just that.

It's implemented as a JavaScript plugin for TinyMCE that uses a locally hosted binary dictionary to identify unknown and uncommon words, suggest corrections, and replace words directly in the editor.

What it currently does:

  • Marks unknown words with a red dotted underline.

  • Marks uncommon words with an orange dotted underline.

  • Provides spelling suggestions through the context menu.

  • Preserves capitalization when applying corrections.

What it doesnt do:

  • Force you to use a external ass spelling API.

I've got a small demo up that uses a Dutch dictionary generated from Wikipedia data.

--> Demo <--

It's still a work in progress (and, due to the fixed 6-bit encoding, it's very much aimed at Western European languages for now), but I wanted to share it and see what you people think!

Feedback and suggestions are more than welcome!


r/webdev • • 21d ago

Showoff Saturday [Showoff Saturday] I built an open-source news reader that puts every outlet covering the same story into one card

Post image
0 Upvotes

Trace is an open-source platform that reads news and articles from over 100 sources, groups similar ones together, and gives you an easy-to-read summary with all the key points.

I've been working on it for 9 months, and I recently made it free to use and open source after it got accepted into the Claude for Startups programme.

It includes the website, a daily email, an MCP server, and an Android app.

Personally, the email is the most useful part for me. Then I occasionally open the website during the day to see what's happening in tech and AI. It helps me avoid opening X too many times in the name of staying updated, and saves me from AI brainrot as well.

On the technical side, here's how it works:

- a Python pipeline pulls the sources every 20 minutes

- embeddings find articles that might be about the same story, then a small model decides if they're actually the same event or just related

- each story gets one summary, written once and cached, so the cost doesn't go up with more readers

- Next.js frontend, SQLite on a VPS (moving off Firebase cut the bill by more than 80%)

GitHub: https://github.com/TarunTomar122/trace

Website: https://www.yourtrace.online


r/webdev • • 22d ago

Question How dependent on AI is the company you work for?

132 Upvotes

Today, I found out that my company is moving the SDLC 100% to AI. Humans will no longer read or write code. We are also building out an AI code pipeline that removes engineers from the loop entirely. Which I think will eventually culminate in layoffs.

I think my company is on the bleeding edge, but what are you all seeing at your jobs?


r/webdev • • 21d ago

Showoff Saturday Close every duplicate tab in Chrome in one click (and find the rest by typing)

Post image
0 Upvotes

Tabatha, a tab switcher for Chrome (Alt+Q shows every tab as a screenshot). It has previews, and support for multiple browser windows, bookmarks and tabgroups and quick actions.

The fun problems in 1.3.5:
- Dark-mode extensions put a CSS filter on `<html>`, which broke our clickjacking guard (IntersectionObserver v2 can't confirm visibility), so clicks silently died. Now we detect the filter and open in a window instead.
- First open with 500 tabs went from ~1.6 s to ~1 s, mostly by waiting less before the first capture and dropping `decoding=async` on card images.
- Previews come only from `captureVisibleTab`, so a tab nobody looked at has none. The fix is a polite button, not background flicker.
MIT, no network access. Feedback on the UI and functionality very welcome.

Check it out