Optimize images to WebP and enable lazy loading. Add security headers (HSTS, CSP, etc) for A+ SSL score.
This commit is contained in:
@@ -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]">
|
||||
|
||||
Reference in New Issue
Block a user