0 Members and 1 Guest are viewing this topic.

*

Pharg

  • *****
  • 2,532
    • OsDateFourm
  • osDate Version: osDate Evo v1.2
How to increase loading speed with htaccess and CSS modify
« on: January 09, 2017, 02:17:52 AM »
Hi Members,

Here is a great tip increasing your websites speed using the htaccess and keeping google happy.

After you have your SEO turned on in the admin to use the htaccess here is what to do to the current htaccess
to increase the websites loading speed for desktop and mobile devises.

The results will vary from host to host.

Change your current .htaccess from this:
Code: [Select]


###############################
# Place this file in your osDate root directory
###############################

################################
#  Add/remove file types you need to restrict access
################################

# Protect .htaccess and .htpasswd files
<FilesMatch "^\.ht">
  Order allow,deny
  Deny from all
</FilesMatch>

# Protect config.* files
<FilesMatch "^config(\..*)?$">
  Order deny,allow
  Deny from all
</FilesMatch>

# Protect files depending on extension
<FilesMatch "^(.*)\.(inc|inc\.php|tpl|tpl\.php|sql|txt|dat|csv|exe|dll)$">
  Order deny,allow
  Deny from all
</FilesMatch>

# Disable directory browsing
Options -Indexes
Options +FollowSymLinks

###############################

RewriteEngine on

# Replace with site url prefix. If osdate is in your site root, set this to just / symbol
# If osdate is in a subdirectory, set to /subdirectory/

RewriteBase /

RewriteRule ^privacy.html$ index.php?page=privacy
RewriteRule ^terms_of_use.html$ index.php?page=terms_of_use
RewriteRule ^services.html$ index.php?page=services
RewriteRule ^faq.html$ index.php?page=faq

RewriteRule ^stories.html$ index.php?page=stories
RewriteRule ^story([^/]+).htm$ index.php?page=showstory&storyid=$1

RewriteRule ^articles.html$ index.php?page=articles
RewriteRule ^article([^/]+).htm$ index.php?page=showarticle&articleid=$1

RewriteRule ^news([^/]+).htm$ index.php?page=shownews&newsid=$1
RewriteRule ^allnews.html$ index.php?page=allnews

# Translates sitename/username to sitename/showprofile.php?username=username
RewriteRule ^([a-zA-Z0-9_-]+)$ showprofile.php?username=$1

# Translates {$id}.htm to showprofile.php?id={$id}
RewriteRule ^([^/]+).htm$ showprofile.php?id=$1

##############################################################
# Following code may be used as separate .htaccess file and
# keep in those folders which you want to restrict access
# Uncomment the lines <Files ~ > to </Files>
##############################################################
# - uservideos
# - zipcodes
#
# Do NOT place this file in the following subdirectories:
# - admin (need to run the php-scripts)
# - images (images are directly accessed from smarty templates)
# - javascript (need to run the js-files)
# - templates (need to access the css-files. tpl-files are protected by .htaccess in root)
#
# Yet to test:
# - banners
# - chat
# - cronjobs
# - emailimages
# - forum
# - icons
# - imgEditor
# - modules
# - mpeg2flv
# - php121
# - plugins
# - videos
###############################
#
# Protect all files
# <Files ~ >
#   Order deny,allow
#   Deny from all
# </Files>
#
###############################

Change to this:
Code: [Select]
<IfModule mod_headers.c>
FileETag None
Header unset ETag
#Header unset Pragma
#Header unset Cache-Control
    Header set Connection keep-alive
#Header unset Last-Modified

# default cache 1 year = 31556926 s
Header set Cache-Control "max-age=31556926, public, no-transform, must-revalidate"

<IfModule mod_alias.c>
<FilesMatch "\.(html?|json|rss|txt|xhtml|xml)$">
# cache markup for 1 second
Header set Cache-Control "max-age=1, public, no-transform, must-revalidate"
</FilesMatch>

<FilesMatch "\.(js|css)$">
# cache for 1 week = 604800 seconds
Header set Cache-Control "max-age=604800, public, no-transform, must-revalidate"
</FilesMatch>

<FilesMatch "\.(gif|jpe?g?|png|ico)$">
# cache image files for 1 month = 2629744 seconds
Header set Cache-Control "max-age=2629744, public, no-transform, must-revalidate"
</FilesMatch>

<FilesMatch "\.(doc|eot|flv|mp4|ogg|pdf|svg|swf|ttf|otf|woff)$">
# cache fonts and media files for 1 month = 2629744 seconds
Header set Cache-Control "max-age=2629744, public, no-transform, must-revalidate"
</FilesMatch>
</IfModule>
</IfModule>



#BEGIN EXPIRES HEADERS
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default expiration: 1 hour after request
ExpiresDefault "now plus 1 hour"
# CSS and JS expiration: 1 week after request
ExpiresByType text/css "now plus 1 week"
ExpiresByType application/javascript "now plus 1 week"
ExpiresByType application/x-javascript "now plus 1 week"
# Image files expiration: 1 month after request
ExpiresByType image/bmp "now plus 1 month"
ExpiresByType image/gif "now plus 1 month"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
ExpiresByType image/x-icon "now plus 1 month"
ExpiresByType image/ico "now plus 1 month"
ExpiresByType image/icon "now plus 1 month"
ExpiresByType text/ico "now plus 1 month"
ExpiresByType application/ico "now plus 1 month"
# Webfonts
ExpiresByType font/truetype "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresDefault "access plus 2 days"
</IfModule>
#END EXPIRES HEADERS



# BEGIN GZIP
# mod_gzip compression (legacy, Apache 1.3)
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|xml|txt|css|js)$
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>
# END GZIP

# compress text, html, javascript, css, and xml
<IfModule mod_deflate.c>
     #The following line is enough for .js and .css
    AddOutputFilter DEFLATE js css
    AddOutputFilterByType DEFLATE text/plain text/xml application/xhtml+xml text/css


    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    #AddOutputFilterByType DEFLATE application/x-httpd-fastphp
    #AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript

    #The following lines are to avoid bugs with some browsers
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

</IfModule>

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE \
text/html text/plain text/xml text/css text/javascript \
application/xml application/xhtml+xml application/rss+xml \
application/javascript application/x-javascript \
image/svg+xml font/opentype application/x-font-ttf
</IfModule>



<IfModule mod_mime.c>

  # Audio
    AddType audio/mp4                                   m4a f4a f4b
    AddType audio/ogg                                   oga ogg

  # JavaScript
  # Normalize to standard type (it's sniffed in IE anyways):
  # http://tools.ietf.org/html/rfc4329#section-7.2
    AddType application/javascript                      js jsonp
    AddType application/json                            json

  # Video
    AddType video/mp4                                   mp4 m4v f4v f4p
    AddType video/ogg                                   ogv
    AddType video/webm                                  webm
    AddType video/x-flv                                 flv

  # Web fonts
    AddType application/font-woff                       woff
    AddType application/vnd.ms-fontobject               eot

  # Browsers usually ignore the font MIME types and sniff the content,
  # however, Chrome shows a warning if other MIME types are used for the
  # following fonts.
    AddType application/x-font-ttf                      ttc ttf
    AddType font/opentype                               otf

  # Make SVGZ fonts work on iPad:
  # https://twitter.com/FontSquirrel/status/14855840545
    AddType     image/svg+xml                           svg svgz
    AddEncoding gzip                                    svgz

  # Other
    AddType application/octet-stream                    safariextz
    AddType application/x-chrome-extension              crx
    AddType application/x-opera-extension               oex
    AddType application/x-shockwave-flash               swf
    AddType application/x-web-app-manifest+json         webapp
    AddType application/x-xpinstall                     xpi
    AddType application/xml                             atom rdf rss xml
    AddType image/webp                                  webp
    AddType image/x-icon                                ico
    AddType text/cache-manifest                         appcache manifest
    AddType text/vtt                                    vtt
    AddType text/x-component                            htc
    AddType text/x-vcard                                vcf

</IfModule>

<IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE "application/atom+xml" \
                                  "application/javascript" \
                                  "application/json" \
                                  "application/ld+json" \
                                  "application/manifest+json" \
                                  "application/rdf+xml" \
                                  "application/rss+xml" \
                                  "application/schema+json" \
                                  "application/vnd.geo+json" \
                                  "application/vnd.ms-fontobject" \
                                  "application/x-font-ttf" \
                                  "application/x-javascript" \
                                  "application/x-web-app-manifest+json" \
                                  "application/xhtml+xml" \
                                  "application/xml" \
                                  "font/eot" \
                                  "font/opentype" \
                                  "image/bmp" \
                                  "image/svg+xml" \
                                  "image/vnd.microsoft.icon" \
                                  "image/x-icon" \
                                  "text/cache-manifest" \
                                  "text/css" \
                                  "text/html" \
                                  "text/javascript" \
                                  "text/plain" \
                                  "text/vcard" \
                                  "text/vnd.rim.location.xloc" \
                                  "text/vtt" \
                                  "text/x-component" \
                                  "text/x-cross-domain-policy" \
                                  "text/xml"

</IfModule>

<FilesMatch ".(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

# Limit bandwidth consumption
<IfModule mod_php5.c>
    php_value zlib.output_compression 16386
</IfModule>

###############################
# Place this file in your osDate root directory
###############################

################################
#  Add/remove file types you need to restrict access
################################

# Protect .htaccess and .htpasswd files
<FilesMatch "^\.ht">
  Order allow,deny
  Deny from all
</FilesMatch>

# Protect config.* files
<FilesMatch "^config(\..*)?$">
  Order deny,allow
  Deny from all
</FilesMatch>

# Protect files depending on extension
<FilesMatch "^(.*)\.(inc|inc\.php|tpl|tpl\.php|sql|dat|csv|exe|dll)$">
  Order deny,allow
  Deny from all
</FilesMatch>

# Disable directory browsing
#Options -Indexes
#Options +FollowSymLinks

###############################

RewriteEngine on

# Replace with site url prefix. If osdate is in your site root, set this to just / symbol
# If osdate is in a subdirectory, set to /subdirectory/

RewriteBase /

RewriteRule ^privacy.html$ index.php?page=privacy
RewriteRule ^terms_of_use.html$ index.php?page=terms_of_use
RewriteRule ^services.html$ index.php?page=services
RewriteRule ^faq.html$ index.php?page=faq

RewriteRule ^stories.html$ index.php?page=stories
RewriteRule ^story([^/]+).htm$ index.php?page=showstory&storyid=$1

RewriteRule ^articles.html$ index.php?page=articles
RewriteRule ^article([^/]+).htm$ index.php?page=showarticle&articleid=$1

RewriteRule ^news([^/]+).htm$ index.php?page=shownews&newsid=$1
RewriteRule ^allnews.html$ index.php?page=allnews

# Translates sitename/username to sitename/showprofile.php?username=username
RewriteRule ^([a-zA-Z0-9_-]+)$ showprofile.php?username=$1

# Translates {$id}.htm to showprofile.php?id={$id}
RewriteRule ^([^/]+).htm$ showprofile.php?id=$1

##############################################################
# Following code may be used as separate .htaccess file and
# keep in those folders which you want to restrict access
# Uncomment the lines <Files ~ > to </Files>
##############################################################
# - uservideos
# - zipcodes
#
# Do NOT place this file in the following subdirectories:
# - admin (need to run the php-scripts)
# - images (images are directly accessed from smarty templates)
# - javascript (need to run the js-files)
# - templates (need to access the css-files. tpl-files are protected by .htaccess in root)
#
# Yet to test:
# - banners
# - chat
# - cronjobs
# - emailimages
# - forum
# - icons
# - imgEditor
# - modules
# - mpeg2flv
# - php121
# - plugins
# - videos
###############################
#
# Protect all files
# <Files ~ >
#   Order deny,allow
#   Deny from all
# </Files>
#
###############################

You can test before the change then test after the change and notice the difference ten fold.
Used the FreshDate templates for the speed test. http://gtmetrix.com/

The other thing to help with the loading speed is to minify your CSS files after you have finished modifying them.
http://csscompressor.com/

I have attached the difference on my host.

Regards,
Pharg ( Phill )

REMEMBER: ALWAYS BACKUP BEFORE YOU MAKE ANY CHANGES!!

osDateEvo v1.2 | PHP: 5.3.42 & PHP: 5.6.18 | MySQL: 5.5.35

Re: How to increase loading speed with htaccess and CSS modify
« Reply #1 on: April 12, 2017, 03:03:13 PM »
Hi Phil,

does gzip compression work with OSdate EVO?

Should also help with the page-speed in addition to the caching that helped me a lot

Also optimizing the .js files to make them smaller should help

Regards
Dave

*

Pharg

  • *****
  • 2,532
    • OsDateFourm
  • osDate Version: osDate Evo v1.2
Re: How to increase loading speed with htaccess and CSS modify
« Reply #2 on: April 12, 2017, 10:11:31 PM »
Hi Dave,

Not all servers allow gzip but do allow deflate which both do the same thing, compress some files but yes it works with osDateEvo or any installed program.

Yes optimizing the .js files will help, you minify them just like you do to the CSS file your using and increases the loading speed.

There are online minify sites that will do both the .js and the CSS files like http://www.minifier.org and many others.

Just remember, you must unminfiy them to make changes to the files, once the changes are done, then just minify them again.

Putting some of the .js lines at the bottom of the page before the closing /body tag also helps if you know what your doing.

Regards,
Pharg ( Phill )

REMEMBER: ALWAYS BACKUP BEFORE YOU MAKE ANY CHANGES!!

osDateEvo v1.2 | PHP: 5.3.42 & PHP: 5.6.18 | MySQL: 5.5.35