Optimize images to WebP and enable lazy loading. Add security headers (HSTS, CSP, etc) for A+ SSL score.

This commit is contained in:
Muhammet Güler
2026-02-17 10:30:36 +03:00
parent 7101f7878a
commit 477993ec83
743 changed files with 927 additions and 232 deletions
+8 -8
View File
@@ -54,7 +54,7 @@
<div class="card">
@if($post->featured_image_url)
<figure class="card-img-top">
<img src="{{ $post->featured_image_url }}" alt="{{ method_exists($post, 'translate') ? $post->translate('title') : $post->title }}">
<img loading="lazy" src="{{ $post->featured_image_url }}" alt="{{ method_exists($post, 'translate') ? $post->translate('title') : $post->title }}">
</figure>
@endif
<div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2.8rem_3rem_2.8rem] lg:!p-[2.8rem_3rem_2.8rem] md:!p-[2.8rem_3rem_2.8rem]">
@@ -112,9 +112,9 @@
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
@if($post->author->avatar)
<img class="rounded-[50%]" alt="image" src="{{ asset('storage/' . $post->author->avatar) }}">
<img loading="lazy" class="rounded-[50%]" alt="image" src="{{ asset('storage/' . $post->author->avatar) }}">
@else
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u5.jpg') }}">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u5.webp') }}" loading="lazy">
@endif
</figure>
<div>
@@ -174,7 +174,7 @@
@php
$relatedTitle = method_exists($relatedPost, 'translate') ? $relatedPost->translate('title') : $relatedPost->title;
$relatedCategoryName = $relatedPost->category ? $relatedPost->category->name : '';
$relatedImageUrl = $relatedPost->featured_image ? asset('storage/' . $relatedPost->featured_image) : asset('assets/img/photos/b4.jpg');
$relatedImageUrl = $relatedPost->featured_image ? asset('storage/' . $relatedPost->featured_image) : asset('assets/img/photos/b4.webp');
$relatedUrl = route('blog.show', $relatedPost->slug);
$relatedDate = $relatedPost->published_at ? $relatedPost->published_at->format('d M Y') : $relatedPost->created_at->format('d M Y');
$relatedCommentCount = $relatedPost->comments_count ?? 0;
@@ -183,7 +183,7 @@
<article>
<figure class="overlay overlay-1 hover-scale group rounded !mb-5">
<a href="{{ $relatedUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $relatedImageUrl }}" alt="{{ $relatedTitle }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $relatedImageUrl }}" alt="{{ $relatedTitle }}" loading="lazy">
<span class="bg"></span>
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
@@ -243,7 +243,7 @@
<div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u1.jpg') }}">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u1.webp') }}" loading="lazy">
</figure>
<div>
<h6 class="m-0 !mb-[0.2rem]">
@@ -276,7 +276,7 @@
<div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u3.jpg') }}">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u3.webp') }}" loading="lazy">
</figure>
<div>
<h6 class="m-0 !mb-[0.2rem]">
@@ -309,7 +309,7 @@
<div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u2.jpg') }}">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u2.webp') }}" loading="lazy">
</figure>
<div>
<h6 class="m-0 !mb-[0.2rem]">