Så optimerades linux.se att laddas snabbare.

Vi har det senaste månaden dränkt linux.se med artiklar hur man gör olika saker, undertecknad har funnit ett stort nöje i att med AIs hjälp producera Linux logotypen / maskot i en massa sitationer.

Nackdelen är att filerna kan bli över 1 MB styck, det kanske inte spela så där jättestort roll, när man sitter på en snabb uppkoppling eller har 5G.

Dessutom finns många som får betala för varje GB.

Lösningen blev att ta fram ett bash script som gå genom alla jpg och png filer, filer som är större än en viss storlek halveras med 50%.

Innan vi optimerade bilderna så hade Linux.se

Total Image Size: 87353932 bytes dvs 83, 31 megabytes , att ladda 83 MB

1. Dial-up (56 kbps): Cirka 12,857 sekunder (ca 3.573.57 timmar).
2. DSL (5 Mbps): Cirka 144 sekunder (ca 2.42.4 minuter).
3. Kabelinternet (100 Mbps): Cirka 7.2 sekunder.
4. Fiber (1 Gbps): Cirka 0.72 sekunder.
5. 4G mobilnätverk (20 Mbps): Cirka 36 sekunder.
6. 5G mobilnätverk (100-300 Mbps): Cirka 3.6 sekunder.

Punkt 1 inte så akutell längre, utan får vara där som jämförelse för att minnas fonstora dar. Men en 5 Mps uppkoppling är inte så ovanligt idag, det räcker med 4G uppkoppling eller bara vistas på ett ställe med dålig wifi täckning.

Efter vi har optimerat sajten med så blev det total Image Size: 28055767 bytes, vilket ger

1. Dial-up (56 kbps): Cirka 4,000 sekunder (ca 66.766.7 minuter).
2. DSL (5 Mbps): Cirka 44.8 sekunder.
3. Kabelinternet (100 Mbps): Cirka 2.24 sekunder.
4. Fiber (1 Gbps): Cirka 0.224 sekunder.
5. 4G mobilnätverk (20 Mbps): Cirka 11.2 sekunder.
6. 5G mobilnätverk (100-300 Mbps): Cirka 1.12 sekunder.

Det kanske inte 100% optimalt fortfarande, man skulle kunna begränsa antaler inlägg per sidvisning osv.

Fördelen att optimera storleken är :

Google gillar snabb laddade sidorna , man kan belönas med en bättre rakning på google.

Nackdelen :

Bilderna blir lite suddiga.

Har använt 3 olika script , 2 skrivna i PHP och 1 bash. PHP scriptet kan köras på din lokala LAMP installation och man kan även göra dem med php cli

PHP Script 1:

<?php
function getPageSize($url) {
    // Hämta sidans innehåll
    $html = file_get_contents($url);

    // Skapa en DOMDocument och ladda HTML-innehållet
    $doc = new DOMDocument();
    @$doc->loadHTML($html);

    // Räkna storleken på sidan (i bytes)
    $pageSize = strlen($html);

    // Hitta alla bild-element
    $images = $doc->getElementsByTagName('img');
    $imageSizeTotal = 0;
    foreach ($images as $img) {
        $imgUrl = $img->getAttribute('src');
        $imgData = file_get_contents($imgUrl);
        $imageSize = strlen($imgData);
        $imageSizeTotal += $imageSize;
    }

    // Räkna antalet länkar
    $links = $doc->getElementsByTagName('a');
    $numberOfLinks = $links->length;

    // Resultat
    return [
        'Total Page Size' => $pageSize,
        'Total Image Size' => $imageSizeTotal,
        'Number of Images' => $images->length,
        'Number of Links' => $numberOfLinks
    ];
}

// Använd funktionen
$url = 'https://www.foobar.foo'; // Byt ut mot den önskade URL:en
$result = getPageSize($url);

// Skriv ut resultaten
echo "Total Page Size: " . $result['Total Page Size'] . " bytes\n";
echo "Total Image Size: " . $result['Total Image Size'] . " bytes\n";
echo "Number of Images: " . $result['Number of Images'] . "\n";
echo "Number of Links: " . $result['Number of Links'] . "\n";
?>

Byt ut $url = ’https://www.foobar.foo’; till valfri sida som skall laddas. Skriptet ovan mäter hur stor en hemsida i bytes hur många utlänkar det finns.

PHP Script 2
<?php
function getImageSizes($url) {
// Hämta sidans innehåll
$html = file_get_contents($url);

// Skapa en DOMDocument och ladda HTML-innehållet
$doc = new DOMDocument();
@$doc->loadHTML($html);

// Hitta alla bild-element
$images = $doc->getElementsByTagName(’img’);
foreach ($images as $img) {
$imgUrl = $img->getAttribute(’src’);

// För att hantera relativa URL:er
if (parse_url($imgUrl, PHP_URL_SCHEME) == ”) {
$imgUrl = rtrim($url, ’/’) . ’/’ . ltrim($imgUrl, ’/’);
}

// Hämta bildens data och beräkna storleken
$imgData = @file_get_contents($imgUrl);
if ($imgData !== false) {
$imageSize = strlen($imgData) / 1024; // Storlek i kilobytes (KB)
echo ”Bild: $imgUrl – Storlek: ” . round($imageSize, 2) . ” KB\n”;
} else {
echo ”Kunde inte hämta bilden: $imgUrl\n”;
}
}
}

// Använd funktionen
$url = ’https://www.foobar.foo’; // Byt ut mot den önskade URL:en
getImageSizes($url);
?>

Koden visa hur stora bilder en webplats länkar in. Annars som exempel 1

PHP Script 3 :

Det här scriptet mäter hur snabbt det tar att ladda hem sida med kod och bilder. Du kan behöver installera php-curl med ( Gäller Debian, Ubunut och mint) andra paket system RTFM.

sudo apt-get update
sudo apt-get install php-curl

<?php

function getPageLoadTime($url) {
    // Starta timer
    $start = microtime(true);

    // Hämta HTML-innehållet på sidan
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $html = curl_exec($ch);
    curl_close($ch);

    // Ladda HTML-innehållet i en DOM-parser
    $dom = new DOMDocument();
    @$dom->loadHTML($html);
    $images = $dom->getElementsByTagName('img');

    // Hämta varje bild
    foreach ($images as $img) {
        $imgUrl = $img->getAttribute('src');
        // Hantera bara fullständiga URL:er
        if (filter_var($imgUrl, FILTER_VALIDATE_URL)) {
            $ch = curl_init();
            curl_setopt($ch, CURLOPT_URL, $imgUrl);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
            curl_exec($ch);
            curl_close($ch);
        }
    }

    // Stoppa timer och beräkna total tid
    $end = microtime(true);
    return $end - $start;
}
$url = "https://www.example.com"; // Byt ut mot önskad URL
$loadTime = getPageLoadTime($url);
echo "Total laddningstid för sidan: " . $loadTime . " sekunder";
?>

Nu till bash skriptet

#!/bin/bash

# Funktion för att visa hjälpmeddelande
show_help() {
    echo "Användning: $0 -m <minstorlek_kb> -c <kompressionskvalitet> -s <storlek>"
    echo "  -m: Minsta filstorlek i KB för bearbetning"
    echo "  -c: Sätt kompressionskvaliteten (exempel: 85)"
    echo "  -s: Sätt ny storlek (exempel: 800x600)"
    exit 1
}

# Kontrollera om några parametrar anges
if [ $# -eq 0 ]; then
    show_help
fi

# Standardvärden
min_size=""
compression=""
size=""

# Hantera inmatningsparametrar
while getopts "hm:c:s:" opt; do
  case $opt in
    m) min_size=$OPTARG ;;
    c) compression=$OPTARG ;;
    s) size=$OPTARG ;;
    h) show_help ;;
    \?) show_help ;;
  esac
done

# Kontrollera om nödvändiga parametrar är angivna
if [ -z "$min_size" ] || [ -z "$compression" ] || [ -z "$size" ]; then
    show_help
fi

# Sök och bearbeta bilder
find . -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) | while read image; do
    # Kontrollera storleken på bilden (i kilobytes)
    imageSize=$(du -k "$image" | cut -f1)

    if [ $imageSize -gt $min_size ]; then
        # Skapa en backup av originalbilden med .bak-tillägg
        cp "$image" "$image.bak"
        # Ändra storleken om storleksparameter är satt
        if [ ! -z "$size" ]; then
            mogrify -resize "$size" "$image"
        fi

        # Justera kompressionsgraden av bilden om kompressionsparameter är satt
        if [ ! -z "$compression" ]; then
            mogrify -quality "$compression" "$image"
        fi

        echo "Bilden $image har bearbetats och backats upp."
    fi
done
echo "Alla bilder bearbetade."

Koden ovan kopiera med lämplig filnamn till /usr/local/bin mappen och chmod +x görs. Koden söker igenom alla filer som är png och jpg, och större än 500 KB

Scriptet körs som

compress_images.sh -c 75 -s 800×600 -m 500

-c Kompremera ner bilden till 75% av kvaliten och -s krymper storleken önskad storlek i pxlar

För att köra skriptet behövs paktet ImageMagick installerat och du behöver shell access , bästa är att köra en VPS. Har man webhotell, så bör man skaffa sej en VPS istället. Tex Spacedump IT har billiga VPS.

OBS! GÖR BACKUP INNAN NI ANVÄNDER BASH SCRIPTET.
Fel använt kan scriptet förstöra era bilder.