1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Speed up your site/blog with .htaccess and tweaks

Discussion in 'Blogging' started by idragon, May 21, 2012.

  1. idragon

    idragon Newbie

    Joined:
    Feb 22, 2012
    Messages:
    37
    Likes Received:
    5
    Occupation:
    Webmaster
    Location:
    Europe
    Hi Guys,

    Since i did some some cleaning lately on my sites, i thought i should share some tips for people that want more speed for their blogs. Speed is a factor in SEO now, so we all must be careful with this.

    We will use this tool for measurement since firebug its more advanced and a little annoying: tools.pingdom(dot)com Use performance grade tabs, to get more information on low grade stats.

    The easy fixes:

    Locate the .htaccess in your root director of the site and start editing with a text editor.

    Code:
    <files .htaccess>
    order allow,deny
    deny from all
    </files>
    
    this denies access to .htaccess

    Code:
    ServerSignature Off  
    security fix,


    Code:
    Options All -Indexes
    another security fix, disables browsing your FTP files.



    Code:
    <ifmodule mod_deflate.c="">
    <filesmatch ".(js|css)$"="">
    SetOutputFilter DEFLATE
    </filesmatch>
    </ifmodule>
    
    
    
    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4.0[678] no-gzip
    
    
    BrowserMatch bMSIE !no-gzip !gzip-only-text/html
    
    This compress html, xml and other content to speed up the delivery of the content of your site


    Code:
    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 300 seconds"
    ExpiresByType text/html "access plus 1 week" 
    ExpiresByType image/gif "access plus 1 week"
    ExpiresByType image/jpeg "access plus 1 week"
    ExpiresByType image/png "access plus 1 week"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/javascript "access plus 1 week"
    ExpiresByType application/x-shockwave-flash "access plus 1 week"
    ExpiresByType application/x-javascript "access plus 1 week"
    ExpiresByType text/xml "access plus 1 seconds"
    
    
    </IfModule>
    

    This adds expires headers to files, so users wont have to load them all the time.

    Extra:

    Add:

    Code:
    <?php  
    // flush the buffer  
    flush();  
    ?>  
    The buffer is essentially a big memory-resident string. When text is output, it's appended to the buffer rather than returned to the browser immediately. The buffer is then "flushed", i.e. its contents are transmitted and the string is reset pending further output. This is usually should be on by default, also if you are using a cache plugin system dont use this.

    To your header just before <body> in your /theme/header.php

    Note:

    - try decrease of the number of different CSS files and JS you load for a specific page by combining into one, or 2 where possible for less server requests. It requires coding knowledge if you have multiple plugins on your blog.


    NOTE:

    Add each part of code one time and test the site. if you get an error 500, it means some options on your server are not activated by the host and you should use another approach (seach google).

    Hope it helps!

    Let me know if you have corrections and other ideas.

    Have a great day!
     
    • Thanks Thanks x 5
    Last edited: May 21, 2012
  2. Lowbrow

    Lowbrow Registered Member

    Joined:
    Apr 26, 2012
    Messages:
    60
    Likes Received:
    31
    Occupation:
    SEO / Programmer
    Location:
    The Lost Highway, USA
    Home Page:
    You sir are on the right path.

    For site speed, make your site do less. To make it do less, go to the most basic level possible in order to get things done. For example, instead of using a WordPress plugin, code the function directly into the theme (when appropriate) or functions.php. Instead of using MySQL, use a text file or code the data into the site (remember static pages?). Instead of getting PHP to do something, get Apache to handle it. That's where .htaccess comes in.

    You can't always do away with things like a database or a plugin - but there are times you can, to the benefit of gaining some speed. But I find that htaccess is very versatile and there are tons of tricks you can do with it. It's almost like a black magic solution to things - it's hard to understand at times, and very powerful.

    A good site (for more info on how to leverage htaccess for optimization) is askapache[dot]com by the way.
     
  3. _Chip_

    _Chip_ Senior Member

    Joined:
    Jun 28, 2009
    Messages:
    847
    Likes Received:
    256
    Occupation:
    Student
    Location:
    Depends on my vpn
    Nice info.. :)
     
  4. mbhmirc

    mbhmirc Regular Member

    Joined:
    Feb 6, 2011
    Messages:
    208
    Likes Received:
    54
    Occupation:
    Computer Technician
    Location:
    UK
    Careful with flush(); it can break certain code/headers.
     
  5. idragon

    idragon Newbie

    Joined:
    Feb 22, 2012
    Messages:
    37
    Likes Received:
    5
    Occupation:
    Webmaster
    Location:
    Europe
    Yeah i noticed that during the years, some are too complex for me to code them, and some i just remove them and code them myself. Now i need to have less images on the pages and requests since it kinda kills the site. So far 95/100 on pingodom which is a neat feat for a big portal, but i ve been working on it continuously in the last 3 years + Dedicated Server.

    askapache doesnt work for me.

    - mbhmirc

    Yea i noticed that.

    Thanks
     
  6. bulokas

    bulokas Newbie

    Joined:
    Apr 5, 2011
    Messages:
    2
    Likes Received:
    0
    This is called caching and it's a great way to speed up your site.
    Instead of hardcoding your information or writing to disk (which is slow), what you could do is store data in memory. Memcache and Redis are quite popular caching systems. However, to use these you usually need some programming knowledge.

    Compressing content is great for quicker load times, but it may not be a viable option on low-power VPS, as it is a bit more resource intensive.

    Other than that, you could try to use other means of caching, e.g. setting up Nginx or Varnish Cache in front of your stack to cache various resources.
    Minifying CSS and JS code reduces page "weight" and by combining JS and CSS files together you can save precious lookups.

    By the way, OP mentioned flush(); function. You may use this to force sending contents early so that the browser could start rendering the page before it's even fully loaded.
     
    Last edited: May 21, 2012
  7. seoguy81

    seoguy81 Power Member

    Joined:
    May 18, 2011
    Messages:
    779
    Likes Received:
    163
    Occupation:
    Full time IM
    Location:
    My Desk
    interesting.. been reading up on improving site speed. I'm quite new to this.

    My biggest issue is with timthumb... and also google pagespeed tells me to optimize images. I use smush.it but its not really helping much. My .htaccess uses php compression and cache control.. but again, it doesn't seem to improve the page loading time. Pingdom gives a score of 83

    See below. Any suggestions?

    HTML:
    # php compression ? use with caution
    
    <ifmodule mod_php4.c>
    php_value zlib.output_compression 16386
    </ifmodule>
    
    # BEGIN Cache-Control Headers
    <ifModule mod_headers.c>
      <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
        Header set Cache-Control "max-age=2592000, public"
      </filesMatch>
      <filesMatch "\.(css)$">
        Header set Cache-Control "max-age=604800, public"
      </filesMatch>
      <filesMatch "\.(js)$">
        Header set Cache-Control "max-age=216000, private"
      </filesMatch>
      <filesMatch "\.(x?html?|php)$">
        Header set Cache-Control "max-age=600, private, must-revalidate"
      </filesMatch>
    </ifModule>
    # END Cache-Control Headers
     
  8. Rajthepositivelife

    Rajthepositivelife Elite Member Premium Member

    Joined:
    Feb 9, 2010
    Messages:
    1,786
    Likes Received:
    441
    Occupation:
    Director
    Location:
    India
    Home Page:
    Thats pretty good information, Really useful for all wordpress users.

    Thanks for sharing it, + repped you :)
     
  9. idragon

    idragon Newbie

    Joined:
    Feb 22, 2012
    Messages:
    37
    Likes Received:
    5
    Occupation:
    Webmaster
    Location:
    Europe
    Try reduce the image quality of the jpegs to 80, in the timthumb.php or whatever code you use. timthumb.php takes the original file, and does a resize based on the code or timthumb.php. Also saves the resized image into folder, so on a next load it loads the image from there.
     
  10. seoguy81

    seoguy81 Power Member

    Joined:
    May 18, 2011
    Messages:
    779
    Likes Received:
    163
    Occupation:
    Full time IM
    Location:
    My Desk
    Thanks, but I mostly use PNG's where ever possible. Since my post here, I did manage to get rid of GA (using OWA now) which has greatly improved the speed time. However, timthumb continues to worry me. Trying to figure out how to use the native wordpress function for resizing images.
     
    • Thanks Thanks x 1
  11. idragon

    idragon Newbie

    Joined:
    Feb 22, 2012
    Messages:
    37
    Likes Received:
    5
    Occupation:
    Webmaster
    Location:
    Europe
    THIS WORKS ONLY FOR WORDPRESS Sites. For some reasons i was under impressions u are using WP... so thats why i posted this.

    Use post-thumbnails in built function its 10 times better than timthumb:

    First you define your sizes in your theme functions.php :

    Code:
    if ( function_exists( 'add_theme_support' ) ) { 
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 170, 80, true);   
    
    
    // imagesize1 is a unique name you can asign to call it with functions, 170, 80 are width and height, true is crop = true/false, can be without. 
    add_image_size( 'imagesize1', 170, 80, true);
    add_image_size( 'imagesize2', 140, 80, true);
    
    
    }
    
    
    Now on your add/edit post you will notice you have a an upload window with featured page. When you upload pictures there and set them as featured they will upload the files and crop in all size including those defined in the function above. So when you call the function it already has the desired image width and height, so no CPU or slow loads on sites, it can also be nicely cached by browser.

    Calling the functions:

    1)

    Code:
    <?php the_post_thumbnail('imagesize1'); ?>
    this will return <img "imagesize1url" class="attachment-homepage wp-post-image" alt="" title=""/> So basically the image in the post from the featured box with the imagesize1 size.

    2)

    Code:
    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'imagesize1' ); ?>
    <?php echo $image[0]; ?>
    this will return only the url (location of the image so you can use it as you wish)

    P.S. Dont use PNG with many images unless they have low size which usually they dont.

    PROFIT!
     
    Last edited: May 30, 2012