CODEWITHSUNDEEP
phpcsslaravelsassless
Rashid
Rashid

Reputation: 921

Faster website by combining CSS files in one file - Laravel

Actually I am new in Laravel community, and I have finished my website finally :)

But what I am facing now is the slowness of the website's loading. I have minimised the size of my pictures. And I have been told that it is a good way to put your css files in one file after minifying all of css files to make it easy for browser to fetch them. So, I have created a dynamic way to fetch all required css files and combine them in one file for each page, my solution is :

My layouts/master.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="{{route('css.main',['route_name'=>Route::currentRouteName()])}}">  
</head>
<body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    @yield('content')
</body>
</html>

My home.blade.php page:

@extends('layouts.master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Welcome</div>
                <div class="panel-body">
                   My Applications Landing Page.
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

My Routes.php page

Route::any('/page1', "homeController@foo1")->name('page1');
Route::any('/page2', "homeController@foo2")->name('page2');
Route::get('/css/{route_name}/main.css', "cssController@main")->name('css.main');

My cssController:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

use File;

class cssController extends Controller
{
  public function main($route_name){

    header('Content-Type: text/css');

    $requirements =[
        'page1'=>[
               'styel1.css',
               'styel2.css',                 
         ],
         'page2'=>[
               'styel3.css',
               'styel4.css',                 
         ],
    ];

    $css    = [];       
    // include bootstrap
    $css[]  = '@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");';
    $css[]  = '@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");';      

       foreach($requirements[$route_name] AS $css_file){
          $css[] = File::get(storage_path('app/public/css/'.$css_file));
       }

    return implode(' ',$css);
    }
}

Please guide me if I'am not correct :)

Upvotes: 3

Views: 3909

Answers (2)

Achraf Khouadja
Achraf Khouadja

Reputation: 6279

You can use laravel elixir to achieve that in your app root open your terminal and install npm (you have to install nodejs first i guess)

npm install

after finishing the installation, go to your gulpfile.js and do the work

Exemple Css mix

elixir(function(mix) {
     mix.styles([
       "normalize.css",
       "style.css",
       "bootstrap.css",
       "docs.css",
       "all.css",
       "bt.css",
       "a.css",
       "font-awesome.min.css"
     ], 'public/css/everything.css', 'public/css/need');
 });

open your terminal again (root folder as usual) and type gulp

this exemple will mix all the files in public/css/need to one file located in public/css/everything.css

you can do this to scripts too

But the everything.css file is not minified yet. to achieve that type gulp --production in your terminal

then you add this to your View

<link rel='stylesheet' href='{{ url("css/everything.css") }}' type='text/css' media='all' />

and you can type gulp watch in your terminal so every time you make change to your files the mixed/minified file will compile too and apply these changes

check the laravel docs these would help I hope this helps

Upvotes: 3

Farhad
Farhad

Reputation: 4181

I think there is no problem with 2-3 css files. (not more than that) but you should compress your css/javascript files to decrease size of files. use this website to compress your files: https://htmlcompressor.com/compressor/

and there are many parameters that effective to website speed. see site GTmetric: https://gtmetrix.com/

this site tech you what parameters more effective. enter image description here

Test your website speed with http://tools.pingdom.com/fpt/

Upvotes: 3

Related Questions