perf: defer non-critical CSS and optimize resource loading

- Deferred: animate.css, magnific-popup.css, mousecursor.css, slicknav.min.css, swiper-bundle.min.css
- Preload Google Fonts with media=print onload trick
- Added preconnect for res.cloudinary.com CDN
- Critical CSS kept synchronous: bootstrap, font-awesome, custom.css
This commit is contained in:
mstfyldz
2026-05-04 22:11:00 +03:00
parent 0d03a71eb6
commit c1a9eb18ad
6 changed files with 43 additions and 36 deletions

View File

@@ -23,21 +23,22 @@
<!-- Google Fonts Css--> <!-- Google Fonts Css-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap" rel="stylesheet"> <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Bootstrap Css --> <!-- Bootstrap Css -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- SlickNav Css --> <!-- SlickNav Css -->
<link href="css/slicknav.min.css" rel="stylesheet"> <link href="css/slicknav.min.css" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Swiper Css --> <!-- Swiper Css -->
<link rel="stylesheet" href="css/swiper-bundle.min.css"> <link rel="stylesheet" href="css/swiper-bundle.min.css" media="print" onload="this.media='all'">
<!-- Font Awesome Icon Css--> <!-- Font Awesome Icon Css-->
<link href="css/all.min.css" rel="stylesheet" media="screen"> <link href="css/all.min.css" rel="stylesheet" media="screen">
<!-- Animated Css --> <!-- Animated Css -->
<link href="css/animate.css" rel="stylesheet"> <link href="css/animate.css" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Magnific Popup Core Css File --> <!-- Magnific Popup Core Css File -->
<link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/magnific-popup.css" media="print" onload="this.media='all'">
<!-- Mouse Cursor Css File --> <!-- Mouse Cursor Css File -->
<link rel="stylesheet" href="css/mousecursor.css"> <link rel="stylesheet" href="css/mousecursor.css" media="print" onload="this.media='all'">
<!-- Main Custom Css --> <!-- Main Custom Css -->
<link href="css/custom.css" rel="stylesheet" media="screen"> <link href="css/custom.css" rel="stylesheet" media="screen">
</head> </head>

View File

@@ -23,21 +23,22 @@
<!-- Google Fonts Css--> <!-- Google Fonts Css-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap" rel="stylesheet"> <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Bootstrap Css --> <!-- Bootstrap Css -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- SlickNav Css --> <!-- SlickNav Css -->
<link href="css/slicknav.min.css" rel="stylesheet"> <link href="css/slicknav.min.css" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Swiper Css --> <!-- Swiper Css -->
<link rel="stylesheet" href="css/swiper-bundle.min.css"> <link rel="stylesheet" href="css/swiper-bundle.min.css" media="print" onload="this.media='all'">
<!-- Font Awesome Icon Css--> <!-- Font Awesome Icon Css-->
<link href="css/all.min.css" rel="stylesheet" media="screen"> <link href="css/all.min.css" rel="stylesheet" media="screen">
<!-- Animated Css --> <!-- Animated Css -->
<link href="css/animate.css" rel="stylesheet"> <link href="css/animate.css" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Magnific Popup Core Css File --> <!-- Magnific Popup Core Css File -->
<link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/magnific-popup.css" media="print" onload="this.media='all'">
<!-- Mouse Cursor Css File --> <!-- Mouse Cursor Css File -->
<link rel="stylesheet" href="css/mousecursor.css"> <link rel="stylesheet" href="css/mousecursor.css" media="print" onload="this.media='all'">
<!-- Main Custom Css --> <!-- Main Custom Css -->
<link href="css/custom.css" rel="stylesheet" media="screen"> <link href="css/custom.css" rel="stylesheet" media="screen">
</head> </head>

View File

@@ -23,21 +23,22 @@
<!-- Google Fonts Css--> <!-- Google Fonts Css-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap" rel="stylesheet"> <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Bootstrap Css --> <!-- Bootstrap Css -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- SlickNav Css --> <!-- SlickNav Css -->
<link href="css/slicknav.min.css" rel="stylesheet"> <link href="css/slicknav.min.css" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Swiper Css --> <!-- Swiper Css -->
<link rel="stylesheet" href="css/swiper-bundle.min.css"> <link rel="stylesheet" href="css/swiper-bundle.min.css" media="print" onload="this.media='all'">
<!-- Font Awesome Icon Css--> <!-- Font Awesome Icon Css-->
<link href="css/all.min.css" rel="stylesheet" media="screen"> <link href="css/all.min.css" rel="stylesheet" media="screen">
<!-- Animated Css --> <!-- Animated Css -->
<link href="css/animate.css" rel="stylesheet"> <link href="css/animate.css" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Magnific Popup Core Css File --> <!-- Magnific Popup Core Css File -->
<link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/magnific-popup.css" media="print" onload="this.media='all'">
<!-- Mouse Cursor Css File --> <!-- Mouse Cursor Css File -->
<link rel="stylesheet" href="css/mousecursor.css"> <link rel="stylesheet" href="css/mousecursor.css" media="print" onload="this.media='all'">
<!-- Main Custom Css --> <!-- Main Custom Css -->
<link href="css/custom.css" rel="stylesheet" media="screen"> <link href="css/custom.css" rel="stylesheet" media="screen">
</head> </head>

View File

@@ -27,23 +27,25 @@
<!-- Favicon Icon --> <!-- Favicon Icon -->
<link rel="shortcut icon" type="image/x-icon" href="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto/v1777917625/muglasurucukursu/logo.jpg"> <link rel="shortcut icon" type="image/x-icon" href="https://res.cloudinary.com/du7xohbct/image/upload/f_auto,q_auto/v1777917625/muglasurucukursu/logo.jpg">
<!-- Google Fonts Css--> <!-- Google Fonts Css-->
<link rel="preconnect" href="https://res.cloudinary.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap" rel="stylesheet"> <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Bootstrap Css --> <!-- Bootstrap Css -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- SlickNav Css --> <!-- SlickNav Css -->
<link href="css/slicknav.min.css" rel="stylesheet"> <link href="css/slicknav.min.css" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Swiper Css --> <!-- Swiper Css -->
<link rel="stylesheet" href="css/swiper-bundle.min.css"> <link rel="stylesheet" href="css/swiper-bundle.min.css" media="print" onload="this.media='all'">
<!-- Font Awesome Icon Css--> <!-- Font Awesome Icon Css-->
<link href="css/all.min.css" rel="stylesheet" media="screen"> <link href="css/all.min.css" rel="stylesheet" media="screen">
<!-- Animated Css --> <!-- Animated Css -->
<link href="css/animate.css" rel="stylesheet"> <link href="css/animate.css" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Magnific Popup Core Css File --> <!-- Magnific Popup Core Css File -->
<link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/magnific-popup.css" media="print" onload="this.media='all'">
<!-- Mouse Cursor Css File --> <!-- Mouse Cursor Css File -->
<link rel="stylesheet" href="css/mousecursor.css"> <link rel="stylesheet" href="css/mousecursor.css" media="print" onload="this.media='all'">
<!-- Main Custom Css --> <!-- Main Custom Css -->
<link href="css/custom.css" rel="stylesheet" media="screen"> <link href="css/custom.css" rel="stylesheet" media="screen">
</head> </head>

View File

@@ -23,21 +23,22 @@
<!-- Google Fonts Css--> <!-- Google Fonts Css-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap" rel="stylesheet"> <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Bootstrap Css --> <!-- Bootstrap Css -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- SlickNav Css --> <!-- SlickNav Css -->
<link href="css/slicknav.min.css" rel="stylesheet"> <link href="css/slicknav.min.css" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Swiper Css --> <!-- Swiper Css -->
<link rel="stylesheet" href="css/swiper-bundle.min.css"> <link rel="stylesheet" href="css/swiper-bundle.min.css" media="print" onload="this.media='all'">
<!-- Font Awesome Icon Css--> <!-- Font Awesome Icon Css-->
<link href="css/all.min.css" rel="stylesheet" media="screen"> <link href="css/all.min.css" rel="stylesheet" media="screen">
<!-- Animated Css --> <!-- Animated Css -->
<link href="css/animate.css" rel="stylesheet"> <link href="css/animate.css" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Magnific Popup Core Css File --> <!-- Magnific Popup Core Css File -->
<link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/magnific-popup.css" media="print" onload="this.media='all'">
<!-- Mouse Cursor Css File --> <!-- Mouse Cursor Css File -->
<link rel="stylesheet" href="css/mousecursor.css"> <link rel="stylesheet" href="css/mousecursor.css" media="print" onload="this.media='all'">
<!-- Main Custom Css --> <!-- Main Custom Css -->
<link href="css/custom.css" rel="stylesheet" media="screen"> <link href="css/custom.css" rel="stylesheet" media="screen">
</head> </head>

View File

@@ -23,21 +23,22 @@
<!-- Google Fonts Css--> <!-- Google Fonts Css-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap" rel="stylesheet"> <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Onest:wght@100..900&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Bootstrap Css --> <!-- Bootstrap Css -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- SlickNav Css --> <!-- SlickNav Css -->
<link href="css/slicknav.min.css" rel="stylesheet"> <link href="css/slicknav.min.css" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Swiper Css --> <!-- Swiper Css -->
<link rel="stylesheet" href="css/swiper-bundle.min.css"> <link rel="stylesheet" href="css/swiper-bundle.min.css" media="print" onload="this.media='all'">
<!-- Font Awesome Icon Css--> <!-- Font Awesome Icon Css-->
<link href="css/all.min.css" rel="stylesheet" media="screen"> <link href="css/all.min.css" rel="stylesheet" media="screen">
<!-- Animated Css --> <!-- Animated Css -->
<link href="css/animate.css" rel="stylesheet"> <link href="css/animate.css" rel="stylesheet" media="print" onload="this.media='all'">
<!-- Magnific Popup Core Css File --> <!-- Magnific Popup Core Css File -->
<link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/magnific-popup.css" media="print" onload="this.media='all'">
<!-- Mouse Cursor Css File --> <!-- Mouse Cursor Css File -->
<link rel="stylesheet" href="css/mousecursor.css"> <link rel="stylesheet" href="css/mousecursor.css" media="print" onload="this.media='all'">
<!-- Main Custom Css --> <!-- Main Custom Css -->
<link href="css/custom.css" rel="stylesheet" media="screen"> <link href="css/custom.css" rel="stylesheet" media="screen">
</head> </head>