In this blog post, we learn how to Improve Your Laravel application Speed and Performance by using a simple Laravel package. To increase our Laravel application performance, we will use “laravel-page-speed” package
Googel mentioned in doc for SEO, Page speed is a very important factor for SEO and ranking. we will use “laravel-page-speed” a simple package for boost page. By using this package we will improve our application load time for 50%+ optimization of our Laravel applications website.
How work this package?
The Laravel-page-speed package helps us to minify auto HTML and JS output and it can be optimization our web page. By using this package will remove unused properties in HTML tags, remove unused quotes in HTML, remove unused blank space or whitespace in HTML page, and remove comments and other which is the bad impact for the website.
Step 1: Create a Laravel Application
First, create a new Laravel Application using this command. Here I named “speedPage” application name you can select what you like.
laravel new speedPageStep 2: Add some data
At this step, some dummy data compare page loading speed test before install package.
welcome.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset=utf-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="//fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type=text/css>
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: cursive;
font-weight: 100;
height: 100vh;
margin: 0;
color: #000 !important;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
h4.li-post-title {
font-family: sans-serif;
font-size: 150%;
border-bottom: solid 2px #ce5014;
color: #d25151;
}
.li-post-group {
PADDING: 0PX 15PX;
}
</style>
</head>
<body>
<div >
@if (Route::has('login'))
<div >
@if (Auth::check())
<a href="{{ url('/home') }}">Home</a>
@else
<a href="{{ url('/login') }}">Login</a>
<a href="{{ url('/register') }}">Register</a>
@endif
</div>
@endif
<div >
<h1>My Post List</h1>
<hr/>
<div >
<div >
<h4 >Drag and Drop Table Row Sorting (Ajax, PHP and MySQLi)</h4>
<p >In this post, We are going to know how to do Drag and Drop Table Row Sorting with Ajax and PHP script without a refresh of the page. Using this function we can quickly sort or re-order table row data with an easy user interface and Drag and Drop HTML element very useful us to a done table row sorting. Here we have used JQuery UI Drag and Drop library Sortable() function and using this function we can easily move any HTML element from one area to another and the particular element will be placed automatically and it will be sort element.</p>
</div>
<div >
<h4 >IMPORT XML DATA INTO MYSQL DATABASE (AJAX, PHP AND PDO)</h4>
<p >In this article, we are going to know how to Import XML Data into Mysql Database table by using PHP code with Ajax. We all know XML stands for eXtensible Markup Language and it is used for to save and read data on the web and this data readable format for human and machine also.</p>
</div>
<div >
<h4 >LIVE DATA SEARCH (AJAX, PHP AND MYSQLI)</h4>
<p >In this post, we are going to learn Ajax Live Data Search with a help of PHP, MySQLi and Ajax. In real-time most of the website and web applications providing content search option to make the application as most user-friendly.</p>
</div>
<div >
<h4 >Form Submission With Validation Using AngularJS and PHP</h4>
<p >In this post, we are going to learn How to submit form data to PHP script by using AngularJS. In modern web development, many of technology used to submit a form data to the server script. Nowadays AngularJS is one of the technique use front-end technology it will manage by Google Inc on their hosted library. Here we will handle form data submission by using AngularJS and we will make necessary field validation by using AngularJS form valid or PHP Script.</p>
</div>
<div >
<h4 >LOAD MORE DATA ON PAGE SCROLL (AJAX, PHP AND MYSQLI)</h4>
<p >In this post, we will see how we can load more post details list with the help of Ajax. This technique helps us to load the page quickly. At the initial page load time have some limited post details only. Whenever the page scrolling at end of the page it trigger the ajax request to server and get and load specified list of the post details at the end of the post list container. Load more data method is very useful because the data is loaded without loading or redirecting the page.</p>
</div>
<div >
<h4 >CRUD REST API USING PHP AND MySQLi</h4>
<p >In this post, we are going to learn about REST API implementation using PHP and MySQLi. A RESTful web service helps us to perform CRUD operations with MySQL database. In this post which is part of the REST API series, let us learn how to implement an easy and simple CRUD REST API using PHP and MySQLi for Create, Read, Update and Delete operations. The entire process will be handled with a help of core PHP not be using any framework as dependencies.</p>
</div>
<div >
<h4 >DISPLAY SWEET ALERT IN LARAVEL USING UXWEB/SWEET-ALERT</h4>
<p >In this post, we are going to learn to show notify information with an excellent user-friendly look using sweetAlert package in laravel application. Here we are going to use uxweb/sweet-alert package for Display Sweet Alert Notifications in Laravel web application.</p>
</div>
<div >
<h4 >GENERATE A WORD DOCUMENT USING PHPWORD IN LARAVEL</h4>
<p >In this post, we going to see how to generate word doc and docx file using phpword package in Laravel. Nowadays some user needs to export data into a word file for offline usages. Some of the client to give their relevant data like Terms and conditions, Private policy and Copyrights details into pdf or word document format. For this kind of purpose, it will help us to generate word file in laravel using phpoffice/phpword package.</p>
</div>
<div >
<h4 >3-DIMENSIONAL(3D) PORTFOLIO IMAGE GALLERY USING HTML & CSS</h4>
<p >The Portfolio details is a very useful feature of the web page. You can establish your archived details and the works to the entire web community. It was outlined to bring in extra clients, get you selected based on this details.</p>
</div>
<div >
<h4 >GET WORDPRESS BLOG POST AND SHOW IN ANY PAGE</h4>
<p >In WordPress blog, our latest posts are publicized on the home page, and older posts access with the help of post page navigation. In this post, we are going to learn how to display our WordPress blog posts on any static or dynamic page using a simplexml_load_file() method with ATOM that works to get WordPress blog post details as XML data with domain link.</p>
</div>
<div >
<h4 >YOUTUBE CHANNEL VIDEO IMPORTING USING DATA API & PHP</h4>
<p >The YouTube Data API provides an easy way to access YouTube channel videos and include into our web application. The different sources package will get video details from YouTube channel using Data API. If we need to import and display YouTube video gallery on our web page means, YouTube Data API will help us to do this.</p>
</div>
<div >
<h4 >EXPORTING MYSQL DATA TO EXCEL USING PHP</h4>
<p >Exporting MySQL Data into Excel is a very useful method to keep the data list in a relevant area for offline usage. Exporting data method performs your web application as most user-friendly and improves the user to manage list data in offline.</p>
</div>
<div >
<h4 >GENERATE A PDF USING TCPDF IN LARAVEL</h4>
<p >In this post, we are going to know about generating PDF documents using TCPDF Package in Laravel. Most of the application needs to generate pdf documents for many reasons. It may use to produce E-Document for end user knowledge or reference. It helps to prepare Invoice bills, profile information, reports download etc.</p>
</div>
<div >
<h4 >SUGGESTION FIELD USING JQUERY, PHP AND MYSQL</h4>
<p >Suggestion field using jQuery is very useful for a web application. In this post, you will learn how to perform Google-like search textbox in PHP. Using jQuery UI we can efficiently show relevant suggestion from the database under a textbox.</p>
</div>
<div >
<h4 >IMAGE TO GRAYSCALE IMAGE CONVERSION IN LARAVEL</h4>
<p >In this post, I am going to share with you how to make a grayscale image from the original image in laravel. Sometimes, we may require making a grayscale image when user uploads image. The grayscale image looks better if you have a good layout website.</p>
</div>
<div >
<h4 >DELETE OPERATION IN CRUD USING PDO – PART 4</h4>
<p >This post explains how to build a CRUD (Create, Read, Update, Delete) application in PHP & MySQL using PHP Data Objects (PDO). PDO is a PHP extension that implements an interface for accessing databases in PHP. PDO is compact and strong. </p>
</div>
</div>
</div>
</div>
</body>
</html>
Step 3: Check the speed
Run your Laravel application and check the home page speed loading time before install the “laravel-page-speed” package.
To check speed use ctrl+shift+i than the select network. You can see in the image localhost loading time is 763 ms. now install the package.
You can also see our HTML not minified.
Step 4: Install “laravel-page-speed” Package
You can install the package via the composer using this command.
composer require renatomarinho/laravel-page-speedStep 5: Update provider details
Now successfully install update provider details.
'providers' => [
....
....
RenatoMarinho\LaravelPageSpeed\ServiceProvider::class,
],Step 6: Publish the package
Now run the flowing command to publish the package.
php artisan vendor:publish --provider="RenatoMarinho\LaravelPageSpeed\ServiceProvider"
Step 5: Adding middleware for web access
After Successfully publishing the package we need to add middleware details in Kernel.php file.
protected $middlewareGroups = [
'web' => [
........
........
\RenatoMarinho\LaravelPageSpeed\Middleware\InlineCss::class,
\RenatoMarinho\LaravelPageSpeed\Middleware\ElideAttributes::class,
\RenatoMarinho\LaravelPageSpeed\Middleware\InsertDNSPrefetch::class,
\RenatoMarinho\LaravelPageSpeed\Middleware\RemoveComments::class,
\RenatoMarinho\LaravelPageSpeed\Middleware\TrimUrls::class,
\RenatoMarinho\LaravelPageSpeed\Middleware\RemoveQuotes::class,
\RenatoMarinho\LaravelPageSpeed\Middleware\CollapseWhitespace::class,
]
]
Now we done all steps now times to check it’s work or not run the home page and check speed.
Bingo ! you can see our page loading time reduce 50% now it takes only 379 ms. and our HTML page is minified you can check by Ctrl + u.
So here we complated this post on how to Improve Your Website Speed and Performance in Laravel 5.8..
Good luck.
Brijpal Sharma is a web developer with a passion for writing tech tutorials. Learn JavaScript and other web development technology.
