Making your website faster

Click above to enter the TechMaster forum!
Forum rules
Post whatever, the max character limit is 6000.
Mon Jun 18, 2018 6:45 pm

  • 1) Everyone is familiar with this line of code:

    Code: Select all
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    but when loading a page, the page must first load the script before it can display the page contents. That's why you should allow the browser to asynchronously load the script and the content (at the same time). Use this code instead:

    Code: Select all
    <script async src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    Doing this alone should increase the loading speed of your website by at least 25%

    2) The next thing to do is to inline any CSS on your page if possible. The browser must goto any .css stylesheet that is embedded in the header, open that and parse it all. If all the content is in one file, it will load faster (less work).

    So instead of this:
    Code: Select all
    <link rel="stylesheet" type="text/css" href="mystyle.css">


    Inline the CSS into the html document header like this:
    Code: Select all
    <style>
            .well {
                min-height: 20px;
                padding: 19px;
                margin-bottom: 20px;
                background-color: #f5f5f5;
                border: 1px solid #e3e3e3;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05)
            }
    </style>


    3) Minify the HTML on your page if possible. If you are not really going to edit your site in the future, minifying the HTML code on your page can save space and slightly reduce loading time. Use a tool like HTML Minifier. You should also minify javascript, css and any other code on your page (json,php,ajax,etc.)

    Instead of this:
    Code: Select all
    <head>
        <title>TechMaster Web Projects</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="George D. Scott - TechMaster project links">
        <meta name="author" content="www.techmasterdesign.com">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    </head>


    you'll end up with this:
    Code: Select all
    <title>TechMaster Web Projects</title><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><meta content="George D. Scott - TechMaster project links"name=description><meta content=www.techmasterdesign.com name=author><meta content="text/html; charset=UTF-8"http-equiv=content-type>


    4) Leverage browser caching: this allows your browser to use cached (saved) files of your page more frequently. By setting an expiration date for caching on your pages, you can allow the browser to cache more frequently. Use cache-control tags to set up browser caching expiration dates. You can read more about it here.

    A simple example of a browser caching meta tag is as follows:
    Code: Select all
    <meta http-equiv="Cache-control" content="public">

    Replace public with one of the following options:

    Public - may be cached in public shared caches.
    Private - may only be cached in private cache.
    No-Cache - may not be cached.
    No-Store - may be cached but not archived.

    The directive CACHE-CONTROL:NO-CACHE indicates cached information should not be used and instead requests should be forwarded to the origin server. This directive has the same semantics as the PRAGMA:NO-CACHE.

    Clients SHOULD include both PRAGMA: NO-CACHE and CACHE-CONTROL: NO-CACHE when a no-cache request is sent to a server not known to be HTTP/1.1 compliant. Also see EXPIRES.

    Note: It may be better to specify cache commands in HTTP than in META statements, where they can influence more than the browser, but proxies and other intermediaries that may cache information.

    5) If your page contains a lot of images, use image compression. Simply reduce the size of the images or change the image format from png/gif to jpeg. GIF and PNG are lossless formats, in that the compression process does not make any visual modification to the images. For still images, PNG achieves better compression ratio with better visual quality. For animated images, consider using video element instead of a GIF, to achieve better compression. JPEG is a lossy format. The compression process removes visual details of the image, but the compression ratio can be 10x larger than GIF or PNG.

    6) avoid landing page redirects. Page load speed times enemy is this
    Code: Select all
    <meta http-equiv="refresh" content="2">

    If any snippet of code is redirecting the page or reloading it, it will compromise the overall loading time.

    7) For mobile devices, instead of using:
    Code: Select all
    <meta http-equiv="refresh" content="1;url=http://m.mywebsite.com/" />
    and redirecting the user to a completely different mobile website, try using detection for mobile devices on the same HTML page for desktop/mobile. Checking the device width will allow you to size things properly for mobile devices, but also avoid redirecting and causing a huge delay in loading time for mobile devices, which are already slow.

    8) If you cannot inline some code on your page, consider using a content delivery network. For example, if you are using bootstrap and you have a large homepage. It would be impractical to inline all the css code. So instead use:
    Code: Select all
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">


    9) Increase the host data transfer rate (mbps). If you are using web hosting, you can upgrade your package for a faster connection for your server, which will result in a faster loading time for your visitors. If you are hosting on a home connection, upgrading your connection speed will also help loading times for your website as it will distribute it faster.

    10) If using Wordpress, try not to use a lot of plugins. These plugins use external resources and make loading time take a lot longer. If you do have to use plugins, make sure there are no security vulnerabilities in them. As I have worked on websites that were compromised by attackers through insecure plugins.

    11) Enable Gzip compression for your files by downloading it from that link. More on how to enable it here. This will automatically compress some CSS and HTML reducing loading times significantly. And since 90% of today’s Internet traffic travels through browsers that support Gzip, it’s a great option for speeding up your site. If you are using apache, you can configure .htaccess attributes which will automatically enable gzip for your pages on your site (once downloaded):
    Code: Select all
     
    <ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    </ifModule>
    George
    Site Admin
     
    Posts: 11
    Joined: Tue Jun 25, 2013 8:34 am

Tue Sep 18, 2018 3:56 am

  • To make your website working faster, you should try by expelling pointless line breaks, extra space, et cetera, you will accelerate parsing, downloading and executing. This basic think u can do can cut bytes of information from your page, and each and every piece tallies. Instruments like this CSS Minifier/Compressor can be extremely useful in this office.

    Rodney H. Lapointe
    essay writer
    RodneyLapointe
     
    Posts: 1
    Joined: Tue Sep 18, 2018 3:46 am

Mon Nov 05, 2018 10:35 pm

  • Making your website faster has got a lot of advantages. A fast website gets more traffic than a slower one as people like to use responsive websites. And this loading speed will help to rank better on google ranking.
    internet providers for my address
    alexpaul
     
    Posts: 8
    Joined: Sun Oct 14, 2018 9:47 pm



Return to Forum




Information
  • Who is online
  • Users browsing this forum: No registered users and 1 guest
cron