Asiathemes:Don’t play with code, play with themes:How to increase your website Page Speed score simply?

How to increase your website Page Speed score simply?

This time in the world every website owner want faster speed of website and want to increase page speed score of their website, so today we will discuss about increase page speed score of website in a few simple steps.

    1. Check your site page speed score on GTmetrix Website: At fir please check website page speed score on https://gtmetrix.com/ website, so we can know that what issues are exist in our website. It takes 10 to 25 seconds for check and provide score. For example we check an URL https://www.nasa.gov/ on gtmetrix on website that’s Pagespeed score is 19% only.
    2. Optimize images: This is very good tool here, in error list we receive Optimized image option and GTMetrix provide you the larger image URL and optimized image both. So At first download the optimized image and save that image with the same name Like In below given screenshot there is an image: https://www.nasa.gov/sites/default/files/styles/1x2_cardfeed/public/thumbnails/image/advisory_image.jpg which is larger and it is suggesting us that we can reduce the image size 86%. So we will save the (yellow marked in image) optimized image with the name: advisory_image.jpg and replace that to site using filezilla or any other FTP client.
    3. Serve scaled images: Serving appropriately-sized images can save many bytes of data and improve the performance of your webpage, especially on low-powered (eg. mobile) devices. It shows us that we can use the same image in smaller width and height on website.

      1. everage browser caching: Page load times can be significantly improved by asking visitors to save and reuse the files included in your website.
        1. Reduces page load times for repeat visitors
        2. Particularly effective on websites where users regularly re-visit the same areas of the website
        3. Benefit-cost ratio: high
        4. Access needed
    4. Configuring Apache to serve the appropriate headers: Find your .htaccess file in the root of your domain. This file is a hidden file but should show up in FTP clients like FileZilla or CORE. You can edit the .htaccess file with notepad or any form of basic text editor.
    5. General guidelines for setting expiries:
      • Truly static content (global CSS styles, logos, etc.) – access plus 1 year
      • Everything else – access plus 1 week

      For this Please add/append below given code in your .htacces file. .htaccess file you can find in the where your WordPress is installed.

      If you are unable to see .htaccess file please go to settings an choose show hidden files.

      ExpiresActive On

      # Images
      ExpiresByType image/jpeg “access plus 1 year”
      ExpiresByType image/gif “access plus 1 year”
      ExpiresByType image/png “access plus 1 year”
      ExpiresByType image/webp “access plus 1 year”
      ExpiresByType image/svg+xml “access plus 1 year”
      ExpiresByType image/x-icon “access plus 1 year”

      # Video
      ExpiresByType video/mp4 “access plus 1 year”
      ExpiresByType video/mpeg “access plus 1 year”

      # CSS, JavaScript
      ExpiresByType text/css “access plus 1 month”
      ExpiresByType text/javascript “access plus 1 month”
      ExpiresByType application/javascript “access plus 1 month”

      # Others
      ExpiresByType application/pdf “access plus 1 month”
      ExpiresByType application/x-shockwave-flash “access plus 1 month”

      Be careful: You want to be careful when enabling browser caching as if you set the parameters too long on certain files, users might not be getting the fresh version of your website after updates.

Configuring Apache to serve the appropriate headers: Find your .htaccess file in the root of your domain. This file is a hidden file but should show up in FTP clients like FileZilla or CORE. You can edit the .htaccess file with notepad or any form of basic text editor.

  1. In below given code, you will set our caching parameters to tell the browser what types of files to cache for a simple WordPress website.

     

    For configure or complete this step please add/append below given code to your .htaccess

     

    # Compress HTML, CSS, JavaScript, Text, XML and fonts
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml

    # Remove browser bugs (only needed for really old browsers)
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    Header append Vary User-Agent

     

    1. Minify JS/CSS/HTML: If you are using an WordPress site then there is an plugin autoptimize for minify JS, CSS, HTML etc. Autoptimize makes optimizing your site really easy. It can aggregate, minify and cache scripts and styles, injects CSS in the page head by default but can also inline critical CSS and defer the aggregated full CSS, moves and defers scripts to the footer and minifies HTML. You can optimize and lazy-load images, optimize Google Fonts, async non-aggregated JavaScript, remove WordPress core emoji cruft and more. As such it can improve your site’s performance even when already on HTTP/2! There is extensive API available to enable you to tailor Autoptimize to each and every site’s specific needs.

    But please be careful in this step it may break your website so, please check option one by one and save and see your website, if you feel that on this step site has been broken then please undo that changes.

     

    I also followed the above given same steps and minified an website URL: https://asiathemes.asia/preview/businessotest/ an created score 99% of this website URL. This is our Businesso WordPress theme, by following above given steps you can also increase your website page speed score. If you have any issue in using our theme or getting issue in increasing website pagespeed score then please get in touch with our support team(http://asiathemes.com//support/ ).

Leave your thought